@font-face{
    src: url(fonts/Caprasimo-Regular.ttf);
    font-family: brand;
}
@font-face{
    src: url(fonts/NotoSans-VariableFont_wdth\,wght.ttf);
    font-family: straightText;
}
@font-face{
    src: url(fonts/NotoSans-Bold.ttf);
    font-family: boldText;
}
@font-face{
    src: url(fonts/Sniglet-Regular.ttf);
    font-family: curvyText;
}
@font-face{
    src: url(fonts/Cinzel-Black.ttf);
    font-family: boldFancy;
}

@font-face{
    src: url(fonts/Redressed-Regular.ttf);
    font-family: welcome;
}


* {
    box-sizing: border-box;
}
body{
    margin:0px;
    overflow-x: hidden;

    background-color: var(--primary-page-bg);
    color: var(--primary-text-color);
    transition: background-color 0.5s ease;
    --primary-page-bg: rgb(255, 255, 255);
    --primary-text-color: black;
    --stopwatch: hsl(0, 0%, 25%);
    --time: hwb(0 30% 70%);
    --container: #A9AB9D;
    --border-color: rgb(0, 0, 0);
    --hidden: 1;
    --hidden2:0;
    --shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    overscroll-behavior: none;
}
body.dark{
    
    --primary-page-bg: black;
    --primary-text-color: white;
    --stopwatch: hsl(0, 0%, 95%);
    --time: hsl(105, 81%, 45%);
    --container: rgba(50, 50, 50, 0.84);
    --border-color: rgb(255, 255, 255);
    --hidden: 0;
    --hidden2:1;
    --shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}


.fa-solid.fa-moon{
    display: inline-block; 
    text-align: center;
    font-size: 2rem;
    height:auto;
    position: absolute;
    right:23px;
    top: 35px;
    z-index: 20;
    opacity:var(--hidden2);
}
#toggle{
    display: none;
}
.fa-solid.fa-sun{
    display: inline-block; 
    text-align: center;
    font-size: 2rem;
    height:auto;
    position: absolute;
    right:23px;
    top: 35px;
    opacity:var(--hidden);
    animation: smoothGrow 1.5s ease-out;
}
@keyframes smoothGrow{
    50%{
        transform: scale(1.5,1.5) rotate(180deg);
    }
}


main{
    margin:5px;
}
#minHeader{
    display:inline-block;
    text-align: center;
    background-color:#d8572a;
    width:100%;
    height:11.75vh;
    
}
#companyName{
    text-align: center; 
    display:inline-block; 
    font-family: boldFancy;
    color:#CFE8EF;
    /*
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding-left: 0px; 
    */
}
#logo{
    display: inline-block; 
    text-align: center;

    /*
    display: table-cell;
    line-height: 0; 
    */

    width:60px;
    height:auto;
    position: relative;
    top: 18px;
}
.navbar ul{
    
    list-style: none;
    background-color: #db7c26;
    text-align: center;
    padding: 0;
    margin:0;
    overflow:hidden;
}
.navbar a{
    text-align: center;
    color:#CFE8EF;
    text-decoration: none;
    padding:1em;
    display: block;
    font-family: curvyText;
    
}
.navbar a:hover{
    background-color: #d8572a;
}
.navbar li{
    display: inline-block;
    align-content: center;
    margin-left: 25px;
    margin-right: 25px;
}
.greetings{
    display: block;
    width: 98%;
    height:1em;
    padding-bottom: 7%;
    position: relative; /* Allows positioning of child elements */
    overflow: hidden;
    margin-right: 1%;
    margin-left: 1%;
}
#greetings{
    font-family: welcome;
    font-size: 35px;
    
    position: absolute; /* Absolutely position to allow full movement */
    left: 0; /* Start on the left edge */
    transform: translateX(0); /* Initially at 0 (left) */
    animation: slideRight 2s forwards ease-in-out; /* 2s animation */
    white-space: nowrap; /* Prevent text wrapping */
}
@keyframes slideRight{
    0% {
        transform: translateX(0);
    }
    
    100% {
        left: 50%; /* Move the element to the center */
        transform: translateX(-50%); 
    }
}
#entice{
    display:inline-block;
    width:100%;
    height:auto;
    background-color: rgba(233, 88, 88, 0.499);
    border-top: 4px solid;
    border-left: 4px solid;
    border-right: 4px solid;
    border-bottom: 4px solid;
    padding:0;
    margin:0;
    overflow:hidden;
    position:relative;
}
.yap{
    display:inline-flex;
    align-self: center;
    margin-block-start: 10px;
    text-align:left;
    width:50%;
    float:right;
    padding:10px;
    background-color: #FF8080;
}
#salesPitch{
    font-family: boldText;
    text-shadow: var(--shadow);
    margin-block-start: 10px;
    text-align:left;
    height:100%;
    width:50%;
    float:right;
    padding:10px;
    font-size: 1.5em;
}

.containerman{
    position:absolute;
    height:100%;
    width:100%;
    top:3%;
    left:-2%;
}
.s1{
    
    width:25%;
    top:0%;
    left:10%;
}
#s1{
    position: absolute;
    top:0%;
    left:10%;
}
#group:hover{
    animation-name: shake;
    animation-delay: 1.5s;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    
}
#h1{
    padding:10px;
    width:25%;
   
    position:absolute;
    top:0%;
    left:10%;
}
.h1:hover{
    animation: turn 2s;
    
}

@keyframes turn {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotateY(200deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes shake {
    0%{ 
        transform: translate(1px, 1px) rotate(0deg); 
    }
    10%{ 
        transform: translate(-1px, -2px) rotate(-1deg); 
    }
    20%{ 
        transform: translate(-3px, 0px) rotate(1deg); 
    }
    30%{ 
        transform: translate(3px, 2px) rotate(0deg); 
    }
    40%{ 
        transform: translate(1px, -1px) rotate(1deg); 
    }
    50%{ 
        transform: translate(-1px, 2px) rotate(-1deg); 
    }
    60%{ 
        transform: translate(-3px, 1px) rotate(0deg); 
    }
    70%{ 
        transform: translate(3px, 1px) rotate(-1deg); 
    }
    80%{ 
        transform: translate(-1px, -1px) rotate(1deg); 
    }
    90%{ 
        transform: translate(1px, 2px) rotate(0deg); 
    }
    100%{
        transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .divLetters{
    
    display:inline-block;
    position: relative;
    width:100%;
    height:auto;
    text-align: center;
    align-items: center;
    background-color: black;
    padding:0;
    margin:0;
    
    background-image: url(images/firetr.png);
    background-position:center;
    background-attachment: fixed;
    background-size:cover;

    position:relative;

  }
  .letters{
    letter-spacing: 5px;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    text-transform: uppercase;
    color: slategray;
    font-size:2em;
    font-family: brand;
  }
  #letters span
  {
      animation: animate 1s  ease-in-out;
  }
  @keyframes animate
  {
      0%
      {
          opacity: 0%;
          transform: rotateY(90deg);
          filter: blur(10px);
      }
      100%
      {
          opacity: 1;
          transform: rotateY(0deg);
          filter: blur(0px);
      }
  }
  #letters span:nth-child(1)
  {
      animation-delay: 0.3s;
  }
  #letters span:nth-child(2)
  {
      animation-delay: 0.7s;
  }
  #letters span:nth-child(3)
  {
      animation-delay: 1.2s;
  }
  #letters span:nth-child(4)
  {
      animation-delay: 1.7s;
  }
  #letters span:nth-child(5)
  {
      animation-delay: 2.2s;
  }
  #letters span:nth-child(6)
  {
      animation-delay: 2.7s;
  }
  #letters span:nth-child(7)
  {
      animation-delay: 3.2s;
  }
  #letters span:nth-child(8)
  {
      animation-delay: 4s;
  }
  #letters span:nth-child(9)
  {
      animation-delay: 4.3s;
  }
#space1{
    height:70px;

}
#twohome{
    display:inline-block;
    position: relative;
    height:auto;
    width:100%;
    background-color: hsla(205, 33%, 71%, 0.6);
    padding:7px;
    margin:0;
    border: 4px solid black;
}
#twoimage img{
    height:100%;
    width:33%;
    float:left;
    border: 4px outset white;
}
.twotext{
    height:100%;
    width:48%;
    float:right;
    font-family: boldText;
    font-size: 1.5em;
    text-shadow: var(--shadow);
}

.fa-solid.fa-location-dot{
    margin-top: 20px;
    display: block;
    margin-left: 85%;
    font-size:30px;
    margin-bottom: -10px;
    color:#ed4b4b;
}

#space2{
    height:70px;

}


#threehome{
    display:inline-block;
    position: relative;
    height:auto;
    width:100%;
    background-color: #E9B384;
    padding:7px;
    margin:0;
    border: 4px solid black;
}
#threeimage img{
    height:100%;
    width:22%;
    float:right;
    border: 4px outset white;
    margin-right: 13%;
}
.threetext{
    height:100%;
    width:48%;
    float:left;
    font-family: boldText;
    font-size: 1.5em;
    text-shadow: var(--shadow);
}
#threelist{

}
.fa-solid.fa-id-card{
    margin-top: -25%;
    display: block;
    margin-left: 120%;
    font-size:2em;
    color:#8bb8f3;
}
#space3{
    height:70px;
}


#fourhome{
    display:inline-block;
    position: relative;
    height:auto;
    width:100%;
    background-color: #f0e47a;
    padding:7px;
    margin:0;
    border: 4px solid black;
}
#fourimage img{
    height:100%;
    width:24%;
    float:left;
    border: 4px outset white;
    margin-left: 7%;
}
.fourtext{
    height:100%;
    width:48%;
    float:right;
    font-family: boldText;
    font-size: 1.5em;
    text-shadow: var(--shadow);
}
.fa-solid.fa-book{
    margin-top: -20%;
    display: block;
    margin-left: -25%;
    font-size:2em;
    color:#b87b0b;
}
#fourlist{

}

#space4{
    height:70px;

}


#fivehome{
    display:inline-block;
    position: relative;
    height:auto;
    width:100%;
    background-color: #f8957f;
    padding:7px;
    margin:0;
    border: 4px solid black;
}
#fiveimage img{
    height:100%;
    width:20%;
    float:right;
    border: 4px outset white;
    margin-right: 13%;
}
.fivetext{
    height:100%;
    width:48%;
    float:left;
    font-family: boldText;
    font-size: 1.5em;
    text-shadow: var(--shadow);
}
.fa-solid.fa-clock{
    margin-top: 7%;
    display: block;
    margin-left: 60%;
    font-size:3em;
    color: #e1c45adc;
}



/* MISC */

/* saffron colors:
yellow: #f7b538
orange: #db7c26
dark orange: #d8572a
red: #c32f27
dark red: #780116
*/