/* Removes padding around edges of the site. Sets page color for all empty elements */
body {
    margin: 0;

    background-color: rgb(214, 213, 213);
    background-image: url(Assets/I);
}

/* Stack divs in .row on top of each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Stack navbar links on top of each other */
@media screen and (max-width: 450px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}



/* HEADER */
/* Background image at the top of the page */
.header {
    padding: 52px;

    background: #55a9aa;
    background-image: url(Assets/Sky/sky3.png);
}

/* Title at the top of page */
.headerText {
    text-align: center;
    font-size: 80px;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: -10px;
    text-shadow: 3px 5px rgb(172, 97, 97);
}

.headerSubtitle {
    text-align: center;

    font-size: 90px;
}

/* Grey bar below header. Another 1 billion to Israel */
.navbar {
    overflow: hidden;
    
    padding-top: 6px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 7px;

    background-color: grey;
    background-image: linear-gradient(to bottom right, #777676, #5e5252);
}

/* Settings for links inside of the navbar div */
.navbar a {
    float: left;
    padding-right: 30px;
    padding-left: 20px;
}
.navbar a.right {
    float: right;
    padding-right: 10px;
}

.navbar a:hover {
    background-color: #535656;
    color: #fefef4;
}

.footer a:hover {
    background-color: #535656;
    color: #fefef4;
}







/* BODY */
/* padding to work as a spacer between divs */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

.vertPadding {
    background-color: beige;
    visibility: hidden;
}

.padding {
    -ms-flex: 5%;
    flex: 5%;
}

.content {
    -ms-flex: 68%;
    flex: 68%;
    background-color: #dcdada;
    background-image: linear-gradient(to bottom right, #dcdada, #999898);
    box-shadow: 2px 2px grey;
}

.contentTitle {
    font-size: 22px;

    padding-top: 25px;
    padding-bottom: 15px;
    padding-left: 10px;
}

.imgContainer {
    display: wrap;
    padding: 10px;
    padding-top: 25px;
}

.imgContainer a:hover {
    background-color: #535656;
    color: #fefef4;
}

.img {
    padding: 10px;

    border-color: #55a9aa;
    border-style: outset;
    background-color: #aaa;
    border-width: 2px;
}

.imgRight {
    float: right;
}
.imgLeft {
    float: left;
}

.imgButton {
    text-align: right;
}

.toast {
    -ms-flex: content;
    flex: content;

    padding-bottom: 15px;
    
    background-color: grey;
    background-image: linear-gradient(to bottom right, #a7a6a6, #888484);
    box-shadow: 2px 2px grey;
    padding-left: 10px;
    padding-right: 10px;
}

.toastContainer {
    text-align: center;
    padding-top: 20px;
}







/* FOOTER */
/* feeter */
.footer {
    position: fixed;
    width: 100%;
    bottom: 0px;

    background-color: antiquewhite;

    padding-left: 180px;
}

.footer a {
    padding-left: 25px;
    padding-right: 25px;
}

.footer a:hover {
    background-color: #535656;
    color: #fefef4;
}