* {  margin: 0;
     padding: 0;
     box-sizing: border-box;}

.ativo {
    color: #ad9966;
    font-weight: bold;
    font-family: "Roboto", sans-serif;
}

     
body {  font-family: "Roboto", sans-serif;}

.header { width: 100%;
          top: 0;
          position: sticky;
          z-index: 99;
          background-color: white;
          font-family: "Roboto", sans-serif;}

a { color: #000;
    text-decoration: none;}          

a:hover {color: #ad9966}

.recipiente {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 30px 0;
}
.menu:first-child {
  justify-self: start;
}

.menu:last-child {
  justify-self: end;
}


.menu { display: flex;
        gap: 30px;
        list-style: none;}

.menu li { font-size: 13px;
           letter-spacing: 2px;
           cursor: pointer;}

.logo { font-size: 20px;}

.logo1 {width: 67px;}

.prabaixo { position: relative; }

.prabaixoo {
  position: absolute;
  display: none;
  background: white;
  padding: 20px;
  list-style: none;
  width: 180px;
  top: 100%;}

.prabaixoo li { margin-bottom: 8px; }

.prabaixo:hover 
.prabaixoo { display: block;}

#rooftop {height: 78vh;
     background-image: url(header-bg.png);
     background-position: center;
     background-repeat: no-repeat;
     position: relative;}
    
.texto-foto { position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              color: ghostwhite;
              font-family: "Playfair Display", serif;}

.texto-foto h1:first-child { font-size: 65px;}

.texto-foto p { font-family: "Roboto", sans-serif;
  text-align: center;}

#rooftop hr { margin: 20px auto;
width: 350px;
border: 1px solid white;}


.fotos1 { background-image: url(cat-widget1.jpg);
          background-repeat: no-repeat;
          height: 40vh;
          margin-top: 20px;
          margin-left: 19%; }

.texto1 {
  position: absolute;
  top: 100%;
  left: 21%;
  background: rgba(0, 0, 0, 0.7);
  padding: 30px;
  text-align: center;
  color: white;}

.texto1 h1 {
  font-family: "Playfair Display", serif;
  font-size: 20px;}

.texto1 hr {
  margin: 10px auto;
  width: 220px;
  border: 1px solid white;}

.texto1 p { font-family: "Roboto", sans-serif;}


.fotos2 { background-image: url(cat-widget2.jpg);
          background-repeat: no-repeat;
          height: 35vh;
          margin-top: -20.7%;
          margin-left: 42%; }

.texto2 {
  position: absolute;
  top: 100%;
  left: 44%;
  background: rgba(0, 0, 0, 0.7);
  padding: 30px;
  text-align: center;
  color: white;}

.texto2 h1 {font-size: 20px;
font-family: "Playfair Display", serif;}

.texto2 hr {
  margin: 10px auto;
  width: 220px;
  border: 1px solid white;}

.texto2 p { font-family: "Roboto", sans-serif;}

.fotos3 { background-image: url(cat-widget3.jpg);
          background-repeat: no-repeat;
          height: 35vh;
          margin-top: -18.2%;
          margin-left: 65%; }

.texto3 {
  position: absolute;
  top: 100%;
  left: 67%;
  background: rgba(0, 0, 0, 0.7);
  padding: 30px;
  text-align: center;
  color: white;}

.texto3 h1 { font-family: "Playfair Display", serif;
  font-size: 20px;}

.texto3 hr {
  margin: 10px auto;
  width: 220px;
  border: 1px solid white;}

.texto p { font-family: "Roboto", sans-serif;}

.food { padding: 20px;
margin-left: 20%;
font-size: 16px;}

.fotocavalo {height: 26vh;
margin-top: -6%;
margin-left: 29%;} 


.elementos {
    cursor: pointer;
    position: relative;
    margin-top: -150px; 
    z-index: 10;
}

.elementos a {
    color: #777;
    text-decoration: none;
    transition: 0.3s;
}

.elementos div:hover a {color: #ad9966;}

.mark, .data, .views, .comen { 
    position: relative;     
    margin-left: 20.6%;       
    margin-bottom: 12px; 
    height: 27px;
}

.mark i, .data i, .views i, .comen i {
    position: absolute; 
    left: 110px;           
    color: #000;
    font-size: 18px;
    top: 0;
}


.Astronomy { font-size: 18px;
margin-left: 29%;
margin-top: 20px;}

.Astronomy h2 { font-family: "Playfair Display", serif;}

.textomcse { color: #777;
font-size: 16px;
margin-top: 1%;
letter-spacing: 0.5px;}

.botao {
    position: absolute;
    text-decoration: none;
    padding: 9px 30px;
    color: black;
    background-color: white;
    font-size: 20px;
    border: solid 1px;
    border-color: #ad9966;
    margin-top: 1.5%;
    left: 29%;
    cursor: pointer;}   

.botao:hover {
    background-color: #ad9966;
    color: white;
    border-width: 2px;}

.food2 {  margin-top: 10%;
          left: 21.3%;
          position: absolute;}

.fotomato { height: 28.3vh;
           margin-top: 7%;
           margin-left: 29%;}


.The { font-size: 18px;
margin-left: 29%;
margin-top: 30px;}

.The h3 { font-family: "Playfair Display", serif;}

.botao2 {
    position: absolute;
    text-decoration: none;
    padding: 9px 30px;
    color: black;
    background-color: white;
    font-size: 20px;
    border: solid 1px;
    border-color: #ad9966;
    margin-top: 1.5%;
    left: 29%;
    cursor: pointer;}   

.botao2:hover {
    background-color: #ad9966;
    color: white;
    border-width: 2px;}

.food3 {  
          margin-top: 10%;
          left: 21.3%;
          position: absolute;}

.fotocasal { height: 28.3vh;
           margin-top: 7%;
           margin-left: 29%;}


.The2 { font-size: 18px;
margin-left: 29%;
margin-top: 30px;}

.The2 h3 { font-family: "Playfair Display", serif;}

 .botao3 {
    position: absolute;
    text-decoration: none;
    padding: 9px 30px;
    color: black;
    background-color: white;
    font-size: 20px;
    border: solid 1px;
    border-color: #ad9966;
    margin-top: 1.5%;
    left: 29%;
    cursor: pointer;}   

.botao3:hover {
    background-color: #ad9966;
    color: white;
    border-width: 2px;}

.food4 {  
          margin-top: 10%;
          left: 21.3%;
          position: absolute;}

.fotomulher { height: 28.3vh;
           margin-top: 7%;
           margin-left: 29%;}

.The3 { font-size: 18px;
margin-left: 29%;
margin-top: 30px;}

.The3 h3 { font-family: "Playfair Display", serif;}

 .botao4 {
    position: absolute;
    text-decoration: none;
    padding: 9px 30px;
    color: black;
    background-color: white;
    font-size: 20px;
    border: solid 1px;
    border-color: #ad9966;
    margin-top: 1.5%;
    left: 29%;
    cursor: pointer;}   

.botao4:hover {
    background-color: #ad9966;
    color: white;
    border-width: 2px;}

.food5 {  
          margin-top: 10%;
          left: 21.3%;
          position: absolute;}

.fotolugar { height: 28.3vh;
           margin-top: 7%;
           margin-left: 29%;}

.The4 { font-size: 18px;
margin-left: 29%;
margin-top: 30px;}

.The4 h3 { font-family: "Playfair Display", serif;}

 .botao4 {
    position: absolute;
    text-decoration: none;
    padding: 9px 30px;
    color: black;
    background-color: white;
    font-size: 20px;
    border: solid 1px;
    border-color: #ad9966;
    margin-top: 1.5%;
    left: 29%;
    cursor: pointer;}   

.botao4:hover {
    background-color: #ad9966;
    color: white;
    border-width: 2px;}

.numeros {
margin-top: 200px;
margin-left: 30%;
display: flex;
gap: 15px;}

.numeros a {
  color: #555;
  padding: 8px;
  text-decoration: none;}

.numeros .ativo {
  background: #b3a16b;
  color: #fff;}

  
.tudodadireita {
    position: absolute;
    top: 1255px;      
    right: 22%;      
    width: 300px;   
    padding: 20px;
    border: 1px solid #eee; 
    text-align: center;
}


.buscar {
    position: relative;
    background-color: #ad9966;
    border-radius: 40px;
    display: flex;
    padding: 5px 20px; 
}

.buscar input {
    border: none;
    background: transparent;
    padding: 10px 0;
    outline: none;
    color: white; 
    width: 100%;
}

.buscar button {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 17px;
    margin-top: 8px;
}

.buscar button:hover {
    color: white;
}

.buscar input::placeholder {
    color: white;
}

.imagemdeperfil img {
  position: relative;
  margin-top: 20px;}

.imagemdeperfil hr { 
  margin: 20px auto;
  width: 250px;
  border: 1px solid gainsboro
} 

.imagemdeperfil h4 {
  font-family: "Playfair Display", serif;
  margin: 30px 0px 5px;
}

.imagemdeperfil p {
  color: #777;
  margin: 10px 0px 5px;
}

.redessociais {
    position: relative; 
    margin: 30px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.redessociais a {
    color: #000;
    font-size: 14px;
    transition: 0.3s;
}

.redessociais a:hover { color: #ad9966;}

.texto9 {
    font-size: 14px;
    color: #777; 
    line-height: 1.6;
    text-align: center;
    position: relative;   
    width: 300px;     
    z-index: 10; 
    left: -20px;         
}
  
.hr { 
  position: relative;  
  margin: 70px auto;
  width: 250px;
  border: 1px solid gainsboro
} 

.popular {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  position: relative;  
  background-color: #ad9966;
  color: white;
  padding: 12px 0px;
  margin: 2px 0;
}


.fotospace {
    margin: 40px 0;
    position: relative;
    left: -30%;}

.textoale {
    font-family: "Playfair Display", serif;
    position: absolute;
    top: 0;
    left: 175px;
    width: 180px;
}

.textoale h5 {
    margin-top: 5px;
    font-size: 14px;
    color: #222;
}

.textoale p {
    font-family: "Roboto", sans-serif;
    margin-left: -30%; 
    font-size: 16px;
    color: #777;
    margin-top: 12px; 
}

.trezentos {position: relative;
margin-left: -8%; }


.lista li {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 14px;
    font-size: 15px;
    font-family: "Roboto", sans-serif;}

.lista a, .lista span {
    color: #777;
    text-decoration: none;
    transition: 0.3s;}

.botao5 { color: white;}
.botao5:hover {color: white}

.here {
    margin: 30px 0;
    font-size: 15px;
    color: #777; 
    line-height: 1.6;
    text-align: center;
    position: relative;   
    width: 300px;     
    z-index: 10; 
    left: -20px;}



.tudoemail {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 45px;
    overflow: hidden;}

.email {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 12px;}

.email i {
    color: #ccc;
    font-size: 15px;
    margin-right: 10px;
}

.email input {
    border: 0;
    outline: 0;
    width: 100%;
    color: #777;
    font-size: 14px;
}

.tudoemail button {
    background: #ad9966;
    color: #fff;
    border: 0;
    padding: 0 20px;
    height: 100%;
    font-size: 14px;
    margin-top: 10px;
}


.tagcloud {margin: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;}

.tagcloud a {
    display: inline-block;
    color: #333; 
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    padding: 8px 15px;
    border: 1px solid #eee;
    text-decoration: none;
    transition: 0.3s;
}

.tagcloud a:hover {
    background: #ad9966;
    color: #fff;
    border-color: #ad9966;
}

.rodape {
  background-color: #04091e;
  padding: 150px 0;
  margin-top: 30%;
  display: flex;
  justify-content: center;
  gap: 80px;}


.TOP, .quick, .features, .resources, .newsletter
 {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  color: white;
  margin-bottom: 20px;
}

.textoTOP, .textoquick, .textofeatures, .textoresources, .textonewsletter 
{ color: #888;
  font-family: "Roboto", sans-serif;
  font-size: 14px;}

button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  display: block;
  margin-bottom: 10px;
}

button:hover { color: #ad9966;}

.textorodape { font-family: "Roboto", sans-serif;
  position: absolute;
  color: #888;
  font-size: 14px;
  margin-top: 10%;
  left: 23.3%;
}

.textorodape span, .textorodape a 
{
  color: #ad9966;
  text-decoration: none;
}

.newsletter p {
  font-size: 16px;
  color: #888;
}

.newsletter input {
  padding: 13px;
  border: 1px solid #333;
  background: transparent;
  color: #888;
}

.newsletter button {
  margin-top: -42px;
  margin-left: 200px;
  padding: 13px;
  background-color: #ad9966;
  color: white;
}

.social {
  margin-top: -100px;
  margin-left: 70%;
  display: flex;
  gap: 1px;
}

.socials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #22223b;
    color: #b8a36f;
}

.socials:hover {
    background-color: #b8a36f;
    color: white;
}