/********************* 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: 'HandWriting'; 
    src: url('Fonts/Skrawl.ttf'); }



Body {
 background-image:url(Assets/Pattern_BackgroundStars_04.png);
 background-color:#140a31;
 background-repeat:repeat;
  background-position:top;
  background-size:5%;
 color:#140a31;
 font-family:"Reg";
  padding-left:15%;
  padding-right:15%;
}
body:hover{
  cursor:url(Assets/Cursors/UFO.png),pointer; 
}

.Container {
  margin:auto;
  padding-left:60px;
  padding-right:60px;
  background-image:url(Assets/Txtrs/notepad.png);
  background-size:100%;
  background-repeat:repeat;  
}
.Container :hover{cursor:url(Assets/Cursors/hand.png),pointer;}
.Title{
  margin:auto;
  padding-top:11%;
  padding-bottom:10px;
}

.Title h1{text-decoration-line:underline; font-size:35px;text-align:center;}
.About h2 {font-size:24px; font-family:"HandWriting";}
.Title p {color:#1c415d; font-size:18px;}
.About {display:flex;flex-direction:row; align-items:center; justify-content:center;}

.Meat {
padding:10px;
 margin:auto;
 max-height:900px;
 overflow:hidden;
}

.tab button {
  font-family:"Handwriting";
  color:#1c415d;
  font-size:24px;
  border:solid 5px #1c415d;
  border-radius:5px;
  background:none;
  margin:5px;
  padding:7px;
  }
.tab button:hover{
  background: #efea4a;
  }
  
  .TabContent {
   overflow-y:scroll;
   overflow-x:hidden;
   max-height:800px;
   /*background-image:url(Assets/Txtrs/paperplain.jpg);*/
  background-size:100%;
  background-repeat:repeat;
  background-attachment: local;
  }
  .TabContent::-webkit-scrollbar{
    width:10px;
    height: fit-content;
    background-color: #8ccfdc;
    }
    
  .TabContent::-webkit-scrollbar-thumb{
    background-color: #1c415d;
    border-radius: 10px;
    }
  .TabContent::-webkit-scrollbar-thumb:hover {
   background: #555;
  }
  .TabContent p{font-size:24px;font-family:"handwriting";}
  .TabContent h3{font-size:30px; text-decoration:underline;}
  .TabContent{padding:5px;}
  
  /* ----------DEVELOPMENT ------------------------------------*/
    .Workflow p{
      margin:10px;
      padding:30px;
      
      background-image:url(Assets/Txtrs/pexels-ron-lach-10526896.jpg);
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center
    }
    .Description{filter:drop-shadow(5px 7px 5px #1c415d);}
    .Description p{font-family:"Reg";}
    
     .Step1Images{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      grid-template-rows:1fr;
    }
    .Step1IndvImages{
      margin:5px;
      padding:30px;
      display:flex;
      flex-direction:column;
      flex-wrap:nowrap;
      align-items:center;
      
      background-image:url(Assets/Txtrs/crumpledPaper3.png);
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      
      filter:drop-shadow(5px 7px 5px #1c415d);
    }
    .Step1IndvImages img{
      max-height:350px;
      }
    
    .Step2Images{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      grid-template-rows:1fr;
  
    }
    .Step2IndvImages{
      margin:5px;
      padding:40px;
      display:flex;
      flex-direction:column;
      flex-wrap:nowrap;
      align-items:center;
      
      background-image:url(Assets/Txtrs/crumpledPaper3.png);
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      
      filter:drop-shadow(5px 7px 5px #1c415d);
    }
    .Step2IndvImages img{
      max-height:350px;
  
    }
    
    .Step3Images{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      grid-template-rows:1fr;
     
    }
    .Step3IndvImages{
      margin:5px;
      padding:40px;
      display:flex;
      flex-direction:column;
      flex-wrap:nowrap;
      align-items:center;
      
      background-image:url(Assets/Txtrs/crumpledPaper3.png);
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      
      filter:drop-shadow(5px 7px 5px #1c415d);
    }
    .Step3IndvImages img{
      max-height:250px;
  
    }
    
    .FinalResult{
      display:flex;
      flex-direction:column;
      align-items:center;
      margin:50px;
      padding:60px;
      
      background-image:url(Assets/Txtrs/pexels-ron-lach-10526896.jpg);
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      filter:drop-shadow(5px 7px 5px #1c415d);
    }
  
    .FinalResult iframe{
     border-radius:10px;
     width:880px;
     height:495px;
    }
    .FinalResult p{
     font-family:"Reg";
     font-size:15px;
     background:none;
    }
  /* ----------Scene 2 ------------------------------------*/
     .S2Grid{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      grid-template-rows:1fr;
     }
     .S2Grid img{
      height:250px; 
      padding:30px;
      background-image:url(Assets/Txtrs/cardStack_01.png);
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      
      filter:drop-shadow(5px 7px 5px #1c415d);
     }
     .S2A img:hover{
       cursor:url(Assets/Cursors/handwithMag_Hover.png), pointer;
       content: url('Assets/projects/HyperSonic/Screenshot 2026-01-16 140721.png');
     }
    .S2B img:hover{
       cursor:url(Assets/Cursors/handwithMag_Hover.png), pointer;
       content: url('Assets/projects/HyperSonic/Screenshot 2026-01-16 141544.png');
     }   
    .S2C img:hover{
       cursor:url(Assets/Cursors/handwithMag_Hover.png), pointer;
       content: url('Assets/projects/HyperSonic/Screenshot 2026-01-16 141514.png');
     }
   
      .SceneFinal{
      display:flex;
      flex-direction:column;
      align-items:center;
      margin:50px;
      padding:60px;
      
      background-image:url(Assets/Txtrs/pexels-ron-lach-10526896.jpg);
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      filter:drop-shadow(5px 7px 5px #1c415d);
    }
  
    .SceneFinal iframe{
     border-radius:10px;
     width:880px;
     height:495px;
    }
    .SceneFinal p{
     font-family:"Reg";
     font-size:15px;
     background:none;
    }
  
  /* ----------Song 3 ------------------------------------*/

  
    /* ----------Scene 3------------------------------------*/
    
    .Scene3Backgrounds{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      grid-template-rows:1fr;

    }
    
    .Scene3Backgrounds img{
     max-height:250px; 
      padding:20px;
      margin:2px;
      
      background-image:url(Assets/Txtrs/pexels-arina-krasnikova-7002683.jpg);
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      filter:drop-shadow(5px 7px 5px #1c415d);
    }