/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

dark blue   #140a31
Blue 1      #1c415d                   
Blue 2      #8ccfdc
Green       #d2f5d5
Yellow      #efea4a

*/

@font-face {
    font-family: 'Reg'; 
    src: url('Fonts/OldNewspaperTypes.ttf'); 
}
@font-face {
    font-family: 'Header'; 
    src: url('Fonts/BMSTA___.TTF'); 
}

body {
  background-image: url(Assets/Pattern_BackgroundStars_02.png);
  background-size:3%;
  background-repeat:repeat;
  background-position: center;
  background-color: #DEEEFF;
  color:  #d2f5d5;
  font-family: "Reg";
  padding:5%;
}

body:hover{
  cursor:url(Assets/Cursors/UFO.png),pointer; 
}



.Main {
  background-image: url('Assets/BG_Trees.png');
  background-size:1800px;
  background-position:bottom;
  background-repeat:no-repeat;
  color:  #d2f5d5;
  font-family: "Reg";
  border-style:solid;
  border-radius:10px;
  
  margin:auto;
  padding:2%;
  max-width:1700px;
  max-height:1300px;
  display:grid;
  grid-template-columns:2fr 8fr;
  grid-template-rows:100%;
}

.Main:hover{
  cursor: url(Assets/Cursor.png),pointer;
}


.Navigation{
  padding:5px;
  display:flex;
  flex-direction:column;
  align-content:flex-start;
  overflow:hidden;
  }
  

.Navigation button{
 background:none;

}
.Name{
 border:none; 
}
.Name:hover{
  cursor:url('Assets/Pointer.png'),pointer;
  background-image:url('Assets/Navigation/Name_Full.png');
  background-size:200px;
  background-position:center;
  background-repeat:no-repeat;
  translate: -2px -2px;
}

.Name img{
 max-width:200px;
}
.Name img:hover{cursor:url('Assets/Pointer.png'),pointer;}

.Illustration{
  border:none;
}
.Illustration img{
  max-width:200px;
}
.Illustration img:hover{filter:brightness(20%); cursor:url('Assets/Pointer.png'),pointer;}

.Illustration:hover{
  cursor:url('Assets/Pointer.png'),pointer;
  background-image:url('Assets/Navigation/Illustration_bg.png');
  background-size:200px;
  background-position:center;
  background-repeat:no-repeat;
  translate: -2px -2px;
}
.Projects{
  border:none;
}
.Projects img{max-width:200px;}
.Projects img:hover{filter:brightness(20%); cursor:url('Assets/Pointer.png'),pointer;}
.Projects:hover{
  cursor:url('Assets/Pointer.png'),pointer;
  background-image:url('Assets/Navigation/project_bg.png');
  background-size:200px;
  background-position:center;
  background-repeat:no-repeat;
  translate: -2px -2px;
}
.About{
  border:none;
}
.About img{max-width:200px;}
.About img:hover{filter:brightness(20%); cursor:url('Assets/Pointer.png'),pointer;}
.About:hover{
  cursor:url('Assets/Pointer.png'),pointer;
  background-image:url('Assets/Navigation/About_bg.png');
  background-size:200px;
  background-position:center;
  background-repeat:no-repeat;
  translate: -2px -2px;
}
.Socials img{
 width:75%; 
}
.Socials {
 display:flex;
 flex-direction:row;
 filter: drop-shadow(4px 3px 2px #140a31);
 margin:10px;
}
.Socials img:hover{
    translate: .5px .5px;
    filter: drop-shadow(3px 2px .1px #140a31);
    cursor: url(Assets/Pointer.png),pointer;}

/****************************************MEAT*************************************************/


.Meat {
  background-image:url(Assets/Txtrs/pexels-ron-lach-10526896.jpg);
  border-radius:10px;
  padding:10px;
  }
  .Gallery{
   display:grid;
   grid-template-columns:repeat(3, 1fr);
   grid-auto-rows:250px;
   grid-gap:5px;
  }

.G-item {width:100%; height:100%; position:relative;}

.G-item .image{width:100%; height:100%; overflow:hidden;}

.G-item .image img:hover {transform:scale(1.1) rotate(2deg);}

.G-item .image img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; border-radius:10px;transition:.5s ease-in-out;}

/****************************************MEDIA************************************************/
@media only screen and (max-width:1000px) {
  .Main {
 display:flex;
 flex-direction:row;
 flex-direction:column;
 justify-content:space-around;
 flex-wrap:nowrap;
 height:fit-content; 
}

.Navigation{
  display:flex;
  height:fit-content;
  flex-direction:row;
  justify-content:flex-start;
  align-content:center;
  flex-wrap:wrap;
}
.Meat{
  display:flex;
  height:fit-content;
  flex-direction:column;
  justify-content:flex-start;
  align-content:center;
  flex-wrap:nowrap;
  }
  .Highlights{
    display:flex;
    height:fit-content;
    flex-direction:column;
    justify-content:flex-start;
    align-content:center;
    flex-wrap:nowrap;
  }
  .Highlights_imgs{
    display:flex;
    height:fit-content;
    flex-direction:column;
    justify-content:center;
    align-content:center;
    flex-wrap:nowrap;
  }
  
}/*End of media*/