/* 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." */

.grid_container{

   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   color: white;
}

.side_block{

   width: 300px;
   text-align: center;
   color: white;
   background-color: rgb(0 0 0 / 0.75);
   border-radius: 25px;
   padding: 20px;
}

.about {

   margin: 0px 25px;
   width: 700px;
   text-align: center;
   color: white;
   background-color: rgb(0 0 0 / 0.75);
   border-radius: 25px;
   padding: 20px;
}

.centered_block{
   display: flex;
   justify-content: center;
}
.ressources {
   margin: 25px;
   width: 1250px;
   text-align: center;
   color: white;
   padding: 20px;
   background-color: rgb(0 0 0 / 0.75);
   border-radius: 25px;
}

.nav_title{

   color: white;
   color-visited: white;
   text-decoration: none;
   transition: all .15s ease-in-out;
}

.nav_title:hover {

   color: black;
   text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
   transform: scale(1.3);
}

h1{
   text-align: center;
   text-shadow: -2px 0px black, 0px 2px black, 2px 0px black, 0px -2px black;
   font-family: Ari; color: white;
   animation: float 3s infinite alternate ease-in-out;
}

.parallax {
   background-image: url(../img/kelp.png);
   min-height: 100%;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

body , html {
   font-family: Ari;
}

a:link {
   color: #33ccff;
   font-size: 18px;
}

a:visited {
   color: #cc66ff;
}

.center{
   text-align: center;
}

@font-face{
   font-family:Ari;
   src: url(../fonts/ari.ttf);
} 

.img_bounce{
   width: 250px;
   height: 300px;
}

#bouncy:hover{
   animation: bounce .15s;
   animation-iteration-count: 2;
   animation-direction: alternate;
   animation-fill-mode: forwards;
}

.img_bounce:active{
   
   animation: bounce .15s;
   animation-iteration-count: 4;
   animation-direction: alternate;
   animation-fill-mode: forwards;
}

@keyframes bounce {

   from {transform: translateY(0px);}
   to{transform: translateY(-10px);}
}

@keyframes float {

   0% {transform: translateY(10px);}
   100% {transform: translateY(-10px);}

}
.imglink:hover{

   filter: drop-shadow(2.5px 0 0 lightgray) 
        drop-shadow(0 2.5px 0 lightgray)
        drop-shadow(-2.5px 0 0 lightgray) 
        drop-shadow(0 -2.5px 0 lightgray);
}