*{  
  scroll-behavior: smooth;
  }

body{
background: black;
font-family: 'Comfortaa', cursive;
letter-spacing: 0.1rem;
font-style:normal;
font-weight:lighter;
font-stretch: expanded;
margin: 0px;
}

@keyframes fade-in-pannel {
  0%{opacity: 1;background:black;}
  5%{opacity: 1;background: navy;}
  100%{opacity: 0;}
}

.fade-in-page{
  opacity: 0;
  position: absolute;
  background: black;
  left:0px;
  right:0px;
  width:100%;
  height:100%;
  z-index: 1;
  animation: fade-in-pannel;
  animation-duration: 5s;
 animation-timing-function:linear; 
}

@keyframes fade-in-navbar {
  0%{opacity: 0;}
  5%{opacity: 0;}
  100%{opacity: 1;}
}

.navbar{
  animation: fade-in-navbar;
  animation-duration: 5s;
 animation-timing-function:linear; 
}

h1{
    color:rgb(255, 255, 255);
    margin:1.5rem 10vw 1.5rem 10vw;
}
h3{
    color: rgb(255, 255, 255);
    margin:1.5rem 10vw 1.5rem 10vw; 
}

.row{
  width:100vw;
}

.description_container{
  font-family: 'Alexandria', sans-serif;
}

.dark_background{
  color:white;
  width: auto;
  display: flex;
  border-radius: 2rem;
  align-items: center;
  padding:0.5rem;
  background: navy;
  opacity:0.;
  text-align: center;
  justify-content: center;
}

.light_background{
  color: blue;
  display: flex;
  border-radius: 2rem;
  align-items: center;
  padding:1rem;
  background: rgb(255, 255, 255);
  opacity: 0.4;
}

.light_band{
display: flex;

background: rgba(204, 204, 204, 0.5);
margin: 1rem 0rem 1rem 0rem;
border-radius: 2rem;
}

/*For sm*/
@media only screen and (max-width: 670px) {

    body{
    background: rgb(0, 0, 0);
}

h1{
  font-size: 1.5rem;
  color:rgb(255, 255, 255);
  margin:0.5rem 10vw 0.0rem 10vw;
}
    h3{
        font-size: 1rem;
        margin:0.5rem 10vw 0.5rem 10vw; 
    }

}

.full_page_element{
   
    min-height:100vh;
    width:100vw;
}


.dynamic_image1{
  
        background-size: 3000px 3000px;
        background-image:url('./images/sky2.jpg');
        animation-name: move_in_dimond;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        animation-timing-function:ease-in-out;    
}
@keyframes move_in_dimond {
    0%   { background-position: 0% 5%;}
    25% { background-position: 5% 100%;}
    5% { background-position: 100% 5%;}
    75% { background-position: 5% 0%;}
    100%{ background-position: 0% 5%;}
  }
.centered_elements{
    display: flex;
    min-width:100%;
    min-height:100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}



@keyframes spin {
    0%   { width: 0px;left:5%;filter:brightness(0%)}
    25% { width:200px;left:0%;filter:brightness(100%)}
    5% {width:0px;left:5%;filter:brightness(0%)}
    75% { width:200px;left:0%;filter:brightness(0%)}
    100%{width:0px;left:5%;filter:brightness(0%)}
  }
  
  .profile_picture{
    width:200px;
    height:200px;
    border-radius: 5%;
    accent-color: black;
    border: solid rgb(255, 255, 255) 3px;
    opacity: 1;
  
  
    animation-name: spins;
   animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function:ease-in-out;
  
  }

  
.scroll_effect_1{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    translate: 0px 0px;
    opacity:0;
   font-size: 2rem;
    color:rgb(182, 182, 182);
    transition: all 2s ease-out;/* CRITICAL IMPORTANT FOR TRANSITION EFFECT TO WORK*/
  }

  .scroll_effect_2{
    translate: 0px 50px;
    opacity:0;
    transition: all 2s ease-out;/* CRITICAL IMPORTANT FOR TRANSITION EFFECT TO WORK*/
  }

  .scroll_effect_3{
   
    opacity:0;
   
  }

  .expand_on_hover:hover{
    scale:1.5;
  }

  #changing_content_1{
    height:5rem;
    opacity:0;
    color: rgb(255, 255, 255);
    transition:all 1s ease-in-out;
    translate:0px 0px;
   
  }

  .myProjects{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    vertical-align: middle;
}


.selectable_container{
    width:100%;
    margin:60px 20px 40px 20px;
    border-radius: 5%;

}



.selectable_image{
    position: absolute;
    border-radius: 5%;
    border:solid rgb(72, 72, 255) 2px;
    box-shadow: 0px 0px 20px;
    transition: all 2s ease-in-out;
}

.lgSelectable{
  width:300px;
    height:300px;
}

.smSelectable{
  width:150px;
    height:150px;
}

.selectable_text:visited,.selectable_text:active,.selectable_text:link{
position: relative;
z-index: 2;
top:-2px;
left:-2px;
width:304px;
height:304px;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
transition: all 1s ease-in-out;
color:white;
text-decoration: none;
border-radius: 5%;
border:solid white 2px;
font-size: 0.8rem;

}

.selectable_text:hover{
    opacity: 0.9;
    background: navy;
    font-weight: bold;
    background: navy;
    opacity: 0.9;
    top: 80px;
    border-radius: 5%;
    height:230px

}


.selectable_link:visited,.selectable_link:active,.selectable_link:link{
  position: relative;
  z-index: 2;
  top:-25px;
  left:-25px;
  width: 200px;;
  height:200px;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  transition: all 1s ease-in-out;
  color:white;
  text-decoration: none;
  border-radius: 5%;
  border:solid white 2px;
  font-size: 0.8rem;
  
  }
  
  .selectable_link:hover{
      opacity: 0.9;
      background: navy;

      font-weight: bold;
      background: navy;
      opacity: 0.9;
      top: 50px;
      border-radius: 5%;
      height:200px

  }
  
  
.footer{
  display:flex;
  padding-top: 1rem;
  min-height: 5rem;
  justify-content: center;
  text-align: center;
  align-items: center;
  vertical-align: middle;
  background: rgb(255, 255, 255);
  color:navy;
}


@media (max-width:670px) { 

    .myProjects{
      flex-direction: column;
      align-content: center;
      justify-content: center;
      vertical-align: middle;
      width:100%;
    }

    .selectable_text:visited,.selectable_text:active,.selectable_text:link{
        font-weight: bold;
        background: navy;
        opacity: 0.9;
        top: 250px;
        border-radius: 2rem;
        height:230px
    }
    .lgSelectable.selectable_container{
      height: 500px;
    }

    .selectable_link:visited,.selectable_link:active,.selectable_link:link{
      font-weight: bold;
      background: navy;
      opacity: 0.9;
      top: 100px;
      border-radius: 2rem;
      height:200px
  }
  .smSelectable.selectable_container{
    height: 300px;
  }

  h4{
    font-size: 1rem;
  }

  .description_container{
    font-size: 0.7rem;
  }

}