/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #02003B;
  color: #DAF2FF;
  font-family: Verdana;
}

a {
  color: white;
}

a:visited {
  color: grey;
}

.scroll-container {
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

.scroll-container img {
  padding: 10px;
}

.sidebar1 {
  width: 30%;
}

.sidebar2 {
  width: 30%;
}

.landing {
  margin: auto;
  width: 100%;
  display: flex;
}

.main {
  width: 40%;
  margin: 0px;
}

#art01 {
  border-radius: 5px;
  cursor: pointer;
}

#art01:hover {opacity: 0.7;}

#art02 {
  border-radius: 5px;
  cursor: pointer;
}

#art02:hover {opacity: 0.7;}

#art03 {
  border-radius: 5px;
  cursor: pointer;
}

#art03:hover {opacity: 0.7;}

#art04 {
  border-radius: 5px;
  cursor: pointer;
}

#art04:hover {opacity: 0.7;}

#art05 {
  border-radius: 5px;
  cursor: pointer;
}

#art05:hover {opacity: 0.7;}

#art06 {
  border-radius: 5px;
  cursor: pointer;
}

#art06:hover {opacity: 0.7;}

#avital {
  display: block;
  margin-right: 200px;
  margin-left: 200px;
  border-radius: 5px;
  cursor: pointer;
}

#avital:hover {opacity: 0.7;}

#tree {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#kiss {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
}

#caption1 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

#caption2 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

#caption3 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

#caption4 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

#caption5 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

#caption6 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

#caption7 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}


.close1 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close1:hover,
.close1:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.close2 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close2:hover,
.close2:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.close3 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close3:hover,
.close3:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.close4 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close4:hover,
.close4:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.close5 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close5:hover,
.close5:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.close6 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close6:hover,
.close6:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.close7 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close7:hover,
.close7:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  #avital {
  display: block;
  margin-right: auto;
  margin-left: auto;
  border-radius: 5px;
  } 
  .main {
    margin-top: 30px;
  }
}