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

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

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

*/

@font-face {
    font-family: 'Pixel-Reg'; 
    src: url('Fonts/OldNewspaperTypes.ttf'); 
}
@font-face {
    font-family: 'Header'; 
    src: url('Fonts/Arslan_s_Blood.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: "Pixel-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: "Pixel-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;
}


/* MEAT START */

.Meat{
  color:#140a31;
  max-height:800px;
  max-width:1300px;
  border-style:solid;
  border-color:#140a31;
  border-radius:10px;
  overflow:hidden;
  
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:30px;
  
  background-image:url(Assets/Txtrs/projectsBackground.png);
  background-size:100%;
  background-position:top;
  background-repeat:no-repeat;
   background-attachment: local;
  /*background-color: #140a31;
  color:#140a31;*/
  
  font-size:20px;
}

.Meat p {
 padding:10px;
 border-radius:10px;
 width:fit-content;
 text-align:center;
}

.Meat::-webkit-scrollbar{
    width:10px;
    height: fit-content;
    background-color:#061C37;
}

.Meat::-webkit-scrollbar-thumb{
    background-color: #efea4a;
    border-radius: 10px;
    height: 4px;
}
.Meat:hover{
 cursor:url(Assets/Cursors/handwithMag.png), pointer;  
}
.Title {
 display:block;
 width:fit-content;
}
.Title {
  max-height:fit-content;
  font-family:'Header';
  font-size:25px;
  color:#efea4a;
  text-align:center;
}
.Files{
  max-width:600px;
 display:flex;
 flex-wrap:wrap;
 flex-direction:row;
 justify-content:center;
 align-content:center;
 
 text-align:center;
 
 filter: drop-shadow(10px 20px 8px #140a31);
}

.File p{color:#d2f5d5; border-radius:5px;}
.Files img{
 width:300px; 
 
 
}
.Files2{display:contents;}

.File{
  display:flex;
  flex-direction:column;
  text-align:center;
  align-items:center;
  justify-content:center;
}


.Files .ClosetSpace img{animation: shake 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
.Files .ClosetSpace img:hover{
  cursor:url(Assets/Cursors/handwithMag_Hover.png), pointer;
  content: url('Assets/projects/ClosetSpace/File_Open_closet.png');
  animation: shake 1s;
  animation-iteration-count: infinite;
}
.Files .Passenger img{animation: shake2 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
.Files .Passenger img:hover{
  cursor:url(Assets/Cursors/handwithMag_Hover.png), pointer;
  content: url('Assets/projects/Passage/File_Open_Passage.png');
  animation: shake2 1s;
  animation-iteration-count: infinite;
}
.Files .HyperSonic img{animation: shake3 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
.Files .HyperSonic img:hover{
  cursor:url(Assets/Cursors/handwithMag_Hover.png), pointer;
  content: url('Assets/projects/HyperSonic/File_Open_HyperSonic.png');
  animation: shake3 .5s;
  animation-iteration-count: infinite;
}

/* MEAT FIN */



.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;}

@media only screen and (max-width:1000px) {
  .Main {
 display:flex;
 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;
    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*/


/*Animation*/

@keyframes shake {
 0% { transform: translate(2px, 2px) rotate(2deg); }
  25% { transform:translate(-2px, -2px) rotate(0deg); }
  50% { transform: translate(2px, -2px) rotate(-2deg);}
  75% {transform: translate(-2px, 2px) rotate(0deg);}
  100% {transform: translate(2px, 2px)rotate(2deg);}
}

@keyframes shake2 {
  0% { transform: translate(-2px, -2px) rotate(-2deg); }
  25% { transform:translate(2px, 2px) rotate(0deg); }
  50% { transform: translate(-2px, 2px)rotate(2deg);}
  75% {transform: translate(2px, -2px) rotate(0deg);}
  100% {transform: rotate(-2deg);}
}

@keyframes shake3 {
  0% { transform:translate(2px, 2px) rotate(0deg); }
  25% { transform:translate(-2px, -2px) rotate(2deg); }
  50% { transform: translate(2px, -2px) rotate(0deg);}
  75% {transform: translate(-2px, 2px) rotate(-2deg);}
  100% {transform: translate(2px, 2px) rotate(0deg);}
}