@charset "UTF-8";

@keyframes moveBackground {
  0% {
    background-position: 0% 0%; /* Start position */
  }
  100% {
    background-position: 100% 100%; /* End position */
  }
}

body{
  font-family: 'Finlandica', sans-serif;
  padding: 0px;
  padding-top: 125px;
  margin-top: 100px;
margin: 0px;
background-image: url('imagens/background-retro.jpg');
background-attachment: fixed;
background-size: contain;
animation: moveBackground 45s linear infinite alternate;
}





/* ---------------------------------------- NAVBAR -------------------------------------------*/

header{

font-family: 'Finlandica', sans-serif;
text-align: center;
background-color:rgb(0, 0, 0);
color: white;
font-size: 4vh;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.363);
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 5px; /* Example padding */
z-index: 1000;
}

nav a {
    color:rgb(255, 255, 255);
    padding:10px;
}

nav a:hover{
    background-color: rgb(255, 196, 0);
    color: white;
}

a {
  color: rgb(255, 255, 255);
  transition-duration: .5s;
 border-radius: 5px;
 text-decoration: none;

}

a.social {
  justify-content: right;

  text-align: right;
}

a:hover{
  color:rgb(255, 196, 0);
}

a#title{
  font-size: 10vh;
}

header > h1, nav{
    display:inline-block;
}

h1#title{
  color: white;
  padding-left: 400px;
}

img#key{

  width: 20vh;
  height: 10vh;
  margin-bottom: -9px;
}

a:hover{
    animation: anim 2s linear infinite;
}

@keyframes anim {
            0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    }

main{
  text-align: center;
}

div.separador{
  font-size: 2.5vh;
  color: white;
  text-align:left;
  margin-left: 120px;
  margin-right: 106px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.425);
  padding-right: 20px;
 
}

img.separador{
width: 30px;
height: 30px;
}


div.separador > h2{

}

h1#wip {
color: white;
background-color: black;
border-radius:10px;
padding: 10px;
}




/*---------------------- HOMECON ----------------------*/
div.homecon{
  font-size: 1.5vh;
background-color: rgba(255, 255, 255, 0);
width: 95%;
  max-width: 75vh;
  min-width: 2vh;
  height: 100%;
  max-height: 75vh;
  min-height: 30vh;
text-align: center;
padding: 10px;
margin: auto;
display: inline-block;
justify-content: center;
align-items: center;
}

img#hometumb{stroke-dasharray: ;
  width: 95%;
  max-width: 75vh;
  min-width: 2vh;
  height: 100%;
  max-height: 75vh;
  min-height: 30vh;
  
  display: inline-block;
  border-radius: 30px;
  transition: transform .2s;
}

div.homeconw{
  font-size: 1.5vh;
background-color: rgba(255, 255, 255, 0);
width: 95%;
  max-width: 50vh;
  min-width: 2vh;
  height: 100%;
  max-height: 75vh;
  min-height: 30vh;
text-align: center;
padding: 10px;
margin: auto;
display: inline-block;
justify-content: center;
align-items: center;
}

img#hometumbw{stroke-dasharray: ;
  width: 95%;
  max-width: 75vh;
  min-width: 2vh;
  height: 100%;
  max-height: 75vh;
  min-height: 30vh;
  
  display: inline-block;
  border-radius: 30px;
  transition: transform .2s;
}

div.homecon2{
  font-size: 1.5vh;
background-color: rgba(255, 255, 255, 0);
width: 95%;
max-width: 75vh;
min-width: 2vh;
height: 100%;
max-height: 75vh;
min-height: 30vh;
text-align: center;
padding: 10px;
margin: auto;
display: inline-block;
justify-content: center;
align-items: center;
}

img#hometumb2{stroke-dasharray: ;
width: 95%;
max-width: 75vh;
min-width: 2vh;
height: 100%;
max-height: 75vh;
min-height: 30vh;

display: inline-block;
border-radius: 30px;
transition: transform .2s;
}

div.homecon3{
  font-size: 1.5vh;
background-color: rgba(255, 255, 255, 0);
width: 95%;
max-width: 75vh;
min-width: 2vh;
height: 100%;
max-height: 75vh;
min-height: 30vh;
text-align: center;
padding: 10px;
margin: auto;
display: inline-block;
justify-content: center;
align-items: center;
}

img#hometumb3{stroke-dasharray: ;
  width: 95%;
  max-width: 75vh;
  min-width: 2vh;
  height: 100%;
  max-height: 75vh;
  min-height: 30vh;

display: inline-block;
border-radius: 30px;
transition: transform .2s;
}

div.homecon4{
  font-size: 1.5vh;
background-color: rgba(255, 255, 255, 0);
width: 95%;
max-width: 75vh;
min-width: 2vh;
height: 100%;
max-height: 75vh;
min-height: 30vh;
text-align: center;
padding: 10px;
margin: auto;
display: inline-block;
justify-content: center;
align-items: center;
}

img#hometumb4{stroke-dasharray: ;
  width: 95%;
  max-width: 75vh;
  min-width: 2vh;
  height: 100%;
  max-height: 75vh;
  min-height: 30vh;

display: inline-block;
border-radius: 30px;
transition: transform .2s;
}





div.tumb img:hover{
transform: scale(1.1);
}

div.tumb{
float: center

}




/*---------------------- ARTICLE ----------------------*/

article{
  background-color: white;
max-width: 125vh;  
min-width: 36vh;
margin: 50px;
 padding-top: 25px;
 padding-left: 25px;
 padding-right: 25px;
 padding-bottom: 100px ;
 border-radius: 30px;
 text-align: left;
 font-size: 2.5vh;
}
div#article{
  display: flex;
  justify-content: center;
}

img#article{
  width: 100%;
  height: auto;
}

img#nota{
  width: 7vh;
  height: 7vh;
}

article a{
  color: rgba(179, 155, 19, 0.877);
}

article h1{
  font-size: 40px;
}

blockquote{ 
  background-color: blanchedalmond;
  padding: 10px;
  border-radius: 10px;
}

iframe{
  width: 100%;
  
}

a#next{
  color: rgb(255, 255, 255);
  font-size: 30px;
  transition-duration: .5s;
   border-radius: 5px;
   text-decoration: none;
   text-align: right;
  background-color: rgb(0, 0, 0);
  border-radius: 10px;
  padding: 5px;
  }
  
  a#next:hover{
    background-color:rgb(255, 196, 0);
  
  }


/*------------------------------------------------------*/



div.con{ 

font-size: 1.5vh;
background-color: rgba(255, 255, 255, 0);
text-align: center;
width: 39vh;
height: 19vh;
padding: 10px;
margin: 15px;
display: inline-block;
justify-content: center;
align-items: center;

}

img#tumb{stroke-dasharray: ;
    width: 39vh;
    height: 19vh;
    margin: auto;
 
display: block;
border-radius: 30px;
transition: transform .2s;
}

img#tumb:hover{
  transform: scale(1.1);
}


div.tumb{
  float: center
  
}
















    footer{
        background-color: rgb(0, 0, 0);
        text-align: right;
        font-size: 2.5vh;
        padding: 10px;
        margin-top: 20px;
        color: white;
        width: auto;
      }

        img.icon{
          width: 5vh;
          height: 5vh;
        }

      .zoom {
        padding: 50px;
        background-color: green;
        transition: transform .2s; /* Animation */
        width: 200px;
        height: 200px;
        margin: 0 auto;
      }
      
      .zoom:hover {
        transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
      }