* {
  font-family: "Montserrat";
  /* font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal; */
}

body {background-color: #f9f9f9}

#intro {
  min-height: 428px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 96vh;
}

#intro img{
  left: 0;
  max-width: 428px;
  max-height: 433px;
  /* border-radius: 0 10% 20% 0; */
  /* filter: sepia(80%); */
  /* box-shadow: 0 0 8px 8px white inset; */
  object-fit: contain;
}

#wedding-logo{display: none;}

#wedding-info{
display: grid;
padding-right: 8vw;
text-align: center;
}

#names{
    font-family: "Allura", cursive;
    font-size: 250%;
    margin: 50px 0 50px 0;
    letter-spacing: 0.2rem;
}

#event-date{font-size: 180%}

#gifts-menu{
    padding-top: 8px;
    background-color: #636363;
}

#gifts-explanation{font-size: medium}

#date-information{
display: grid;
justify-content: center;
background-color: #575555;
padding-top: 1rem;
}

#date-information span{color: white;}

#countdown-clock{
    display: flex;
    justify-content: center;
  font-family: "Electrolize", sans-serif;
  font-weight: 500;
  font-style: normal;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: #fffff4;
    padding: 5px 1px 5px 1px;
    border-radius: 0.8em;
}

#RSVP{
display: flex;
justify-content: space-around;
padding: 3rem 1rem 3rem 1rem;
}

#RSVP-text-container{text-align: justify}

#RSVP-image{
  width: 5rem;
  object-fit: contain;
}

#whatsapp{
  object-fit: contain;
  height: 3rem;
  background-color: #25D366;
  border-radius: 1rem;
  padding: 0.7rem;
  /*filter: brightness(0);*/
}

#RSVP-text-container span{font-weight: 700;}
#RSVP-text-container p{font-weight: 500;}

#dress-code{
  background-color: #575555;
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}

#dress-code span{color: white;text-shadow: 2px 2px 2px black}
#dress-code p{color: white;}

#dress-code img{
  /* turn white */ filter: invert();
  max-width: 16vw;
  object-fit: contain;
}

#dress-code-text{
  display: grid;
  align-items: center;
  justify-items: center;
}

#dress-code span{font-size: larger;}
#dress-code p{font-size: large; text-align: center;}

#location{
display: flex;
margin: 20px 10px 20px 10px;
justify-content: space-evenly;
}

#logo-alto-lagoa{filter: brightness(0%)}

#map{
  max-width: 480px;
  /* max-width: 65vw; */
  /* border-color: black; */
  border: 2px solid rgb(17, 49, 9);
  object-fit: cover;
}

.uber-icon{
  max-width: 50px;
  display: flex;
  margin: 15px auto 10px auto;
}
.hotel-icon{
  max-width: 50px;
  display: flex;
  margin: 22px auto 1px auto;
}

#location-text-container{
display: inline-table;
margin-left: 5px;
margin-top: auto;
margin-bottom: auto;
}

.text-icons{
  object-fit: contain;
  max-width: 1.05rem;
  stroke-width: 30px;
  stroke: black;
}

footer {
  display: grid;
  padding: 2.2rem;
  align-items: center;
  justify-content: center;
  text-align:center
}

footer img{
  height: 35px;
  /*filter: sepia(70%);*/
  padding: 0 30px 0 30px;
}

@media screen and (max-width: 429px) {
  #intro{
    display: block;
    align-items: center;
    align-content: space-around;
  }
  #intro img{
    width: 100vw;
    margin-top: 10vh;

    /* side-by-side configuration */
        /* width: 180px;
    height: 300px;
    object-fit: cover;
    object-position: 100% 50%;
    overflow-x: hidden; */
  }
  #names{font-size: 195%; text-align: center;}
  #event-date{font-size: 180%;}
  #wedding-info{padding-right: 8px; text-align: center;} 
  #location{display: block;}
  #map{width: 93vw}
  #location-text-container{text-align: center;display: block;}
}

@media screen and (min-width:430px) and (max-width: 513px) {
#intro img{
    /* width: 260px; */
    height: 352px;
    object-fit: contain;
    object-position: 100% 50%;
    /* overflow-x: hidden; */
}
#names{font-size: 160%;}
#event-date{font-size: 150%;}
#wedding-info{padding-right: 9px;}
#location{display: block;}
#map{width: 93vw}
#location-text-container{text-align: center;display: block;}
}

@media screen and (min-width:514px) and (max-width: 671px) {
#intro img{height: 400px}
#names{font-size: 180%;}
#event-date{font-size: 170%;}
#location{display: block;}
#map{width: 93vw}
#location-text-container{text-align: center;display: block;}
}