/* 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." */
   
   .chelsea-market-regular {
  font-family: "Chelsea Market", system-ui;
  font-weight: 400;
  font-style: normal;
}


  body, html {
  width: 100%;
  height: 100%;
  margin: auto;

}                                                                        
   
       
    body  {
  background-image: url('gallery/green.jpg');


  background-repeat: no-repeat;
  background-position:center; 
  height: 100%;
  margin: 0;  
  background-attachment: fixed;
   background-size: 100% 100%;
 
  }      
  
  p { 
    
    font-family:'Chelsea Market' }
    
  .ul {   font-size: 15px; }
    
    
 .mitz { 
display:flex;
 
position:relative;
  width: 100%;
  margin:auto;
  justify-content:center;
  margin-bottom:25px;
  
  cursor:pointer ;
    
  }   
  
  .mitz:hover  {cursor: pointer;transform: scale(1.05); } 


.newimag:hover { cursor: pointer;transform: scale(1.05);}




/* ------------GENERAL CONTAINER--------------- */



.everything {
  
  display: flex;  
  width: 80%;
  flex-direction:row;
 
  margin:auto;  
  text-align: center;
  justify-content:center;
  

}

.main {
  
  display: flex;  
  width: 100%;
  flex-flow:column;
  
 
  
  text-align: center;
  justify-content:center;
  

}


.mortbox {
  
  display:flex;
  flex-flow: row;
  flex-direction: row;
 
  justify-content:center;
 
  width:100%;
  margin:auto;

}

.cen2 {
  
   display:flex;

  flex-direction: row;
 
  justify-content:center;
padding:30px;
  width:90%;


}

  .artfight {
  
   display:flex;
  flex-flow: column;
  flex-direction: column;
 
  justify-content:center;
  padding:20px;
  width:90%;
  

}
  
  
.column{
    display:flex;
 
  flex-direction: column;
 


  width:20%;


  padding:20px;


  
  
}

.column div {
  
 display:flex;
 flex-direction: column;

  
}


.new {
  
  width:200px;
height:350px;
  display:flex;
  flex-direction:column;
   
  background-color: #47706d;
  color: white;
  margin:15px;


   

  text-align:center;
  padding:10px;
   
  font-size: 20px;

   border-radius: 20px; 
 
   filter: drop-shadow(1px 1px 1px black); }

  
  .new img:hover {cursor: pointer;transform: scale(1.05); filter: drop-shadow(1px 1px 1px black); }



  
  
  

 /*---------MENU--------*/
 
 .menu {
   
   
  display: flex;
flex-direction: column;


   
    font-family:'Chelsea Market';
  border-radius: 5px;
  background-color: inherit;

justify-content:center;


text-align: center;


}

.menu div {
  
 
  width:130px;
height:130px;
  display:flex;
  flex-direction:column;
    text-align:center;

  color: white;
  margin:5px;

  margin-top:10px;
   

  font-size: 15px;

  justify-content:center;
   filter: drop-shadow(1px 1px 1px black);

}



.menu div:hover { cursor: pointer;  transform: rotate(5deg);}


.menu a {  display:flex;
  flex-direction:column;
 color: inherit;text-decoration: none; 
   }

.floattext {
  
   font-family:'Chelsea Market';
   display:flex;
 
    color:black;
    position:absolute;
    font-size:13px;
    width: 400px;
    height:200px;
    margin-left:50px;
   margin-top:-170px;
   
}




/* --------------DEVLOG-------------------*/

.devlog {
  
  
  display: flex ; 
flex-direction:column;
   filter: drop-shadow(2px 2px 2px black);
   width:150px;
margin-left:10px;

}



.devtext {
  
  
  display: flex;
          position: absolute;
        overflow-y: scroll;
         overflow-x: hidden;
     
        width: 180px; height: 260px;
        margin-top:20px;
        margin-left:-10px;
        margin-right:5px;
        font-size: 12px;
        scroll-padding: -10px;
     

      
        

}



 
/*---------------MORT---------------------*/ 
                                                                                                            
.mort {

   display:flex;
  flex-direction:row;
 
width:400px;
height: 400px;

justify-content:center;
  

 filter: drop-shadow(1px 1px 1px black);
 
}


.mort:hover   {


cursor:pointer;

}

.mort img {
  
 width:100%;
 height:100%;
}


.explain {
  
   background-image: url('j/speech.png');
background-repeat:no-repeat;
background-size:100% 100%;
width:450px;
height: 400px;
margin-left:-50px;

  display:flex;
  flex-direction:column;
    text-align:center;

  color: black;
 


   
  padding: 6px;
  font-size: 15px;
 
  justify-content:center;
   filter: drop-shadow(1px 1px 1px black); }

.explain a {  
text-decoration: none; 
   }

/* --------------------FISH ---------------------*/

.fih {  
  
 
    display: flex;
 
   width: 20%;
 

 

 justify-content:center;
margin:auto;



}


.fih img{
     display: flex;
  width:270px;
  height:120px;
  filter: drop-shadow(3px 3px 3px black);
  
  
}

.fih:hover { cursor: pointer;  transform: scale(1.05); }




.neigh {
  
   background-image: url('4/koudouni.png');
  background-size:100% 100%;
  display: flex;
 flex-direction:column;
 width:190px;
 height:340px;
padding-top:-10px;
    
      
justify-content:center;

padding-left:30px;

  
 
   filter: drop-shadow(2px 2px 2px black);
  } 



.neigh:hover { cursor:pointer; }



.neigh div {
  
margin-top:19px;
margin-left:5px;
 display:flex;
 flex-direction:column;


    width:90px;
  height:25px;
   filter: drop-shadow(1px 1px 1px black); 
  
}


.neigh div:hover { transform: scale(1.05);  }


.back {
  
  
   background-image: url('j/linkback.png');
     background-size:100% 100%;
       background-repeat:no-repeat;
       width:200px;
       height:200px;
        display:flex;
 flex-direction:column;
 margin:auto;
 margin-top:20px;
justify-content:center;

}


 #cork {
      
      width:480px;
      height:550px;
       background-image: url('j/boardd.png');
       background-size:100% 100%;
       background-repeat:no-repeat;
      margin-top:-30px;
      
    }

.corktext {
  
 
  display: flex;
          position: absolute;
        overflow-y: scroll;
         overflow-x: hidden;
     
        width: 450px; height: 530px;
        margin-top:20px;
        margin-left:10px;
        margin-right:10px;
        font-size: 15px;
        scroll-padding: -10px;
     
  filter: drop-shadow(2px 2px 2px black); 
      
        

}



#blog {
  
 
  margin-top:-70px;
  
}

#con {
  
  margin-left:130px;
  margin-top:-50px;
}

#comm {
  
  margin-left:130px;
    margin-top:-50px;
}

#comm img {
  
 width:100px;
 height:100px;
 margin:auto;
}

#about {
  
   margin-top:-70px; 
  
}

#about img {
  
 width:105px;
 height:75px;
 margin:auto;
}

#col3 {
  
  width:30%;
  
  
}

#col1 {
  
  margin-top: 30px;
  
}

#col1 div{
  
  
 
  position:relative;
 
}

#gif {
  
  margin-top: -120px;
  margin-left:50px;
    filter: drop-shadow(1px 1px 1px black); 
  
}



#bell {
  
  margin-top: -80px;
  margin-left:-130px;
  
  
  
}




#bell img {
   filter: drop-shadow(1px 1px 1px black); 
   width:170px;
 height:160px;
 margin:auto;
}
  
#bell:hover {
   
    transform: scale(1.05);  
    cursor:pointer;
   
   
 }
 
 
 
#map  {
  
    margin-left:50px;
   
}

#map:hover {
   
    transform: scale(1.05);  
    cursor:pointer;
   
   
 }
 
 
 #artfight:hover {
   
   transform:scale(1.02);
   cursor:pointer;
   border:2px solid black;
   
 }
 
 
 
/* --------------------------------------------MEDIA FOR MOBILE----------------------------------- */


/* For smart phones */
@media screen and (max-width: 400px) {
  

 
.p {
  
font-size:10px; 
  
}

.everything {
 flex:100%; 
}
 
 
}