/********************* 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;
}

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


.Meat{
    background-image:url(Assets/Txtrs/pexels-artempodrez-7232848.jpg);
    background-size:95%;
    background-position:center;
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-areas: 
        "Blurb Skills";
    margin: auto;
    max-width: 1100px;
    padding:5%;
    border-radius: 10px;
}

.container:hover{
    cursor: url(WebsiteAssets/Cursor.png),pointer;
}
/* blurb */
.blurb{
    grid-area: Blurb;
    display:flex;
    overflow:hidden;
    align-items: flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
    margin:2%;
}

.Bio img{
    max-height:400px;
    margin:5px;
    border-radius: 5px;
    border: #8ccfdc;
    border-width: 5px;
    border-style: solid;
    filter: drop-shadow(-5px 4px .5px #140a31);
     transform: scaleX(-1);
     background-image: url(Assets/pexels-thefullonmonet-28380105.jpg);
     background-size: 100%;
     
}
.Bio p{
    max-height:400px;
    padding: 2%;
    background-image:url(Assets/Txtrs/pexels-ron-lach-10526896.jpg);
    background-size: 100%;
    background-color: #8ccfdc;
   color: #140a31;
    font-family: "Reg";
    font-size: 22px;
    filter: drop-shadow(5px 4px 1px #140a31);
    margin: 1%;
    align-text:left;
}
.Bio {
 display:flex;
 flex-direction:row;
}
/* Skills */

.Skills p {
    font-family: "Header";
    color: #140a31;
}
.Skills{
  max-height:500px;
    grid-area: Skills;
    display: flex;
    flex-direction: column;
    padding: 2px;
    margin: 2%;

    font-family: "Reg";
    font-size: 30px;
}
.list{
    font-family:"Reg"; 
     position: relative;  
}

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

#List1::-webkit-scrollbar-thumb{
    background-color: #d2f5d5;
    border-radius: 10px;
    height: 4px;
}
.list ul{
    padding: 10px;
    list-style: none;
    font-family: "Reg";
    color: #140a31;

    background-size: 100%;
    margin: 5%;
}
.list ul:hover{
     cursor: url(WebsiteAssets/ScrollDnCursor.png),crosshair;
}

#List1 {
    margin: auto;
    background-image: url(Assets/Txtrs/pexels-ron-lach-10526896.jpg);
    background-size:50%;
    background-color: #8ccfdc;
   border-radius: 10px;
   z-index: 87;
    text-align: left;
    overflow-y: hidden;
    position: relative;
    max-height: 100%;
    filter: drop-shadow(4px 2px .1px #140a31);
}
.Resume a{
    z-index: 87;
    position: absolute;
    background-color: #F44B4A;
    border-radius: 10px;
    left:5px;
    padding: 5%;
    filter: drop-shadow(4px 2px 2px #140a31);
    
    margin-top:1%;
    color: #1c415d;
    font-family: "Reg";
    text-decoration: none;
}
.Resume a:hover{
    filter: drop-shadow(2px 1px 0px #140a31);
    translate: 1px 1px;
    cursor: url(Assets/Pointer.png),pointer;
}
.NapQuote{
    position: absolute;
    z-index: 90;
    left: 130px;
    width: 80%;
    top:180px;
}
.NapQuote img{
 width: 100%;
 
}
.NapQuote button{
    width: fit-content;
    border:none;
    filter: saturate(160%);
    background: transparent;
    filter: drop-shadow(4px 5px 5px #140a31);
}
.NapQuote button:hover {
    cursor: url(Assets/Pointer.png),pointer;
    filter: drop-shadow(4px 2px .1px #140a31);
    translate: 1px 1px;
}

/* CV */

/* Contact n shit */

.Contact {
    grid-area: Contact;
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}
.Socials{
    display: flex;
    padding-left: 25%;

}

.Socials a{
    max-width:100%;
    display: contents;
}

.Socials img{
    width: 20%;
    margin: 2%;
    filter: drop-shadow(4px 3px 2px #140a31);
}
.Socials img:hover{
    translate: .5px .5px;
    filter: drop-shadow(3px 2px .1px #140a31);
    cursor: url(Assets/Pointer.png),pointer;
}
.Email {
    padding: 2%;
    background-color:#F44B4A;
    font-size: 15px;
    max-width:fit-content;

    filter: drop-shadow(5px 4px .5px #140a31);
    margin: 1%;
    border-radius: 5px;
}
.Contact p{
    font-family: "Reg";
    color: #061C37;
}


/****************************************MEDIA************************************************/
@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;
    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*/