/*
[Author]: John Bostater

[Start Date]: 7/16/24

[Description]:
  This CSS document contains all of the relevant fonts, styles, & animations 
  for my Websites "About Me" page :)
*/





/*Buttons & Navigation*/
/************************************************/


/************************************************/



/*Text & Native HTML Element Styling*/
/************************************************/

/*Name on the Intro Page*/
.introName{

  padding-top: 2%;
  font-size: clamp(40px, 4dvw, 120px);
  font-family: "GothicPixel";


  /*=====================================*/
  background: linear-gradient(
      330deg,
      red 5%, orange 75%
  );


  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /*=====================================*/
}



/*Set the font size and style*/
header{

  padding: 1%;

  /*=====================================*/
  background: linear-gradient(
    to top,
    black 80%, white 200%, gray 200%
  );
  /*=====================================*/

}

/*Set the font size and style*/
footer{

  padding: 2%;
  font-size: clamp(14px, 1.5dvw, 16px);  
  color: white;

  /*=====================================*/
  background: linear-gradient(
    to top,
    black 80%, white 200%, gray 200%
  );
  /*=====================================*/

}


/*Set the font size and style*/
body{

  background-color: black;
  text-align: center;
  overflow-x: hidden;
}  


/*Link Format*/
a{

  font-size: clamp(30px, 2.5dvw, 40px);  
  font-family: "GothicPixel";
  text-decoration: none;

  background: linear-gradient(
      to bottom,
      purple 10%, blue 10%, white 90%
  );


  /*=====================================*/
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /*=====================================*/

  padding: 1%;
}


a:hover{
  color: blue;
}


h1{
  /*Set the font size and style*/
  font-family: 'Times New Roman', Times, serif;
  -webkit-text-fill-color: white;
  font-size: 60px;
  z-index: 2;
}


h2{
  /*Set the font size and style*/
  font-size: 30px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  -webkit-text-fill-color: #d1d1d1;
}

h3{
  /*Set the font size and style*/
  font-size: clamp(40px, 2dvw, 50px);
  font-family: 'Times New Roman', Times, serif;
  -webkit-text-fill-color: #6c6c6c;
}


/*Body text #0, 'About Me', we reference via 'id'*/
.body-text-0{

  /*Font Styling*/
  -webkit-text-fill-color: gray;
  padding: 2%;  
  font-size: clamp(20px, 2dvw, 22px);
}

.body-text-1{

  /*Font Styling*/
  -webkit-text-fill-color: gray;
  font-size: clamp(20px, 2dvw, 22px);
}


/*ASU Header Text*/
.asuHeaderText{

  /*Set the font size and style*/
  font-size: 50px;
/*
  font-family: Georgia, 'Times New Roman', Times, serif;
  -webkit-text-fill-color: #7B0000;
  -webkit-text-fill-color: #d4af37;
*/
  font-family: GothicPixel;
  -webkit-text-fill-color: #7F6921;
}


/*SC4 Header Text*/
.sc4HeaderText{

  /*Set the font size and style*/
  font-size: 50px;
  font-family: GothicPixel;
  -webkit-text-fill-color: #002650;
}

/************************************************/


/*Images*/
/************************************************/

/*Photo of me*/
.mePhoto{

  border: 3px solid white;
  width: 45%;
  image-rendering: crisp-edges;
}


/*SC4 Logo*/
.sc4Logo{
  /*Set the dimensions of the image*/
    width: 300px;
    height: 300px;
}


/*ASU Logo*/
.asuLogo{
  /*Set the dimensions of the image*/
    width: 325px;
    height: 300px;
}


/*Invert the color of the github logo*/
.invertImageColor{

  /*Invert the image color and set positioning*/
  filter: invert(100%);
  position: relative;
  top: -30px;
}

/************************************************/



/*Animation & Art*/
/************************************************/

.image{
width: 100%;
}


/*Text box for the main page*/
.textBox{

  /*Font Styling*/
  -webkit-text-fill-color: gray;  
  font-size: clamp(18px, 1dvw, 30px);
  border: .25dvw solid white;
  margin-top: 4%;
  padding: 1.5dvw;
  width: clamp(300px, 35%, 35%);
  margin-left: auto;
  margin-right: auto;
  animation-delay: .5s;
  animation: fadeIn 2s ease-in;
}



/*Beach Background Image*/
.duneBackground{
  width: 25%; height: 2%; 
  z-index: 0;
}

/*Sunset Sky for the scene*/
.sunsetSky{
  inset: 0;
  position: absolute;
  margin-top: 2.1%;
  margin-left: 25%;
  width: 50%; 
  display: block;
}


/*Cactus*/
.cactus{
  width: 2%; height: 5%; display: flex;
  margin-left: 40%;
  transform: translateY(66%);
}

/*Cactus*/
.cactus0{
  width: 2%; height: 4%; display: flex;
}


/*Moon & Sun*/
.moon{

  width: 10%; display: flex;
  margin-left: 45%;
  animation: fadeIn 2s ease-in, planetBob 5s ease-in-out infinite;
}


/*Scorpion*/
.scorpionManz{

  /*Set the dimensions of the image*/
  opacity: 0;
  width:3.5%; height:3.5%; display: flex;
  margin-left: 45%;
  animation: scorpionSneak 2s ease-in forwards;
  animation-delay: 1s;
}


/*Cloud 0*/
.cloud0{
  margin-top: -2%;
  margin-left: 58%;
  width: 10%; display: flex;
  animation: cloudAnim 14s infinite;
}

/*Cloud 1*/
.cloud1{
  opacity: 0;
  margin-left: 32%;
  margin-top: -2%;
  width: 10%; display: flex;
  animation: cloudAnim 14s infinite;
  animation-delay: 1.5s;
}


/*Fade Down Animation*/
/*===============================================*/
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(175%);
  }
  to {
    opacity: .75;
    transform: translateY(200%);
  }
}
/*===============================================*/


/*Fade Up Animation for the Introduction text (Intro page)*/
@keyframes fadeUp{
  from {
    opacity: 0;
    transform: translateY(25%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}


/*Fade In Animation*/
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity: 1;}
}


/*Animation for the clouds movements*/
@keyframes cloudAnim{
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  50% {
    opacity: 1;
    transform: translateY(50%);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}


/*Fade Right to Left Animation*/
/*===============================================*/
@keyframes scorpionSneak {
  from {
    opacity: 0;
    transform: scale(1) translate(500%, -10%);
  }
  to {
    opacity: 1;
    transform: scale(1) translate(400%, -10%);
  }
}
/*===============================================*/


/*Fade Up Animation*/
@keyframes planetRise {
  from {
    opacity: 0;
    transform: scale(1) translateY(-300%);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(-200%);
  }
}


/*Bob Animation*/
/*===============================================*/
@keyframes planetBob {
  0% {
    transform: translateY(135%);
  }
  50% {
    transform: translateY(155%);
  }
  100% {
    transform: translateY(135%);
  }
}
/*===============================================*/

/************************************************/


/*Custom Fonts*/
/************************************************/

/*===============================================*/
@font-face{
  font-family: "GothicPixel";
  src: 
    url("../Fonts/old-english-gothic-pixel-font/OldEnglishGothicPixelRegular-ow2Bo.ttf") format("truetype");
}
/*===============================================*/

/************************************************/


/*Alignment*/
/************************************************/

/*Encapsulating vertical alignment for the page*/
.vertical0{
  text-align: center;
}
/************************************************/


/*
THIS AI STATEMENT APPLIES TO [ALL FILES: HTML, CSS, JS] WITHIN MY PERSONAL WEBSITE

[Generative AI Statement]: ChatGPT (OpenAI, January 21, 2026 to Indefinite End of Project) 

[Purpose]: Used AI for examples of animations and how to implement dynamic scaling into my program.

[Note]: 
  The fade in and scorpion walk animations are courtesy of chat. 
  Just needed a quick refresher so being able to copy n paste it in was nice.
  As alwasy I marked off the AI generated code between comments marked /*================

*/


/*
[Dev Note to self]: 

  Use  transform: translateY(y) to place sprites vertically.
  
  MUST use margin-left or margin-right to place sprites along x-axis.
*/