body {
color: red;
font-family: 'husky-stash', sans-serif;
background-image: url(misty_forest_2.jpg);
}


/* 1. Define the regular weight */
@font-face {
  font-family: 'husky-stash';
  src: url('huskysta-webfont.woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Tells the browser to show fallback text while downloading */
}

/* 2. Define the bold weight under the SAME family name */
@font-face {
  font-family: 'husky-stash';
  src: url('huskysta-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
font-display: swap;
}

/* 1. Define the regular weight */
@font-face {
  font-family: 'neon-disco';
  src: url('neondisco-webfont.woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Tells the browser to show fallback text while downloading */
}

/* 2. Define the bold weight under the SAME family name */
@font-face {
  font-family: 'neon-disco';
  src: url('neondisco-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
font-display: swap;
}

/* 1. Define the regular weight */
@font-face {
  font-family: 'Data Control';
  src: url('data-latin-webfont.woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Tells the browser to show fallback text while downloading */
}

/* 2. Define the bold weight under the SAME family name */
@font-face {
  font-family: 'Data Control';
  src: url('data-latin-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
font-display: swap;
}

/* 1. Define the regular weight */
@font-face {
  font-family: 'Semi Coder';
  src: url('semi-coder-regular-webfont.woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Tells the browser to show fallback text while downloading */
}

/* 2. Define the bold weight under the SAME family name */
@font-face {
  font-family: 'Semi Coder';
  src: url('semi-coder-regular-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
font-display: swap;
}

/* Designates the font for all Heading 1 tags */
h3, h4, h5, h6 {
  font-family: 'Semi Coder', sans-serif;
}

h1{
  font-family: 'neon-disco', sans-serif;
}

h2{
  font-family: 'husky-stash', sans-serif;
}

/* Designates the font for all Paragraph tags */
p, ul, li {
  font-family: 'Data Control', serif;
}


#Header {
color:#39ff14;
padding: 0px 0px 0px 0px;
width: 60%;
height:auto;
margin-left: 25%;
margin-right: 25%;
margin-top: 5%;
margin-bottom: 0%;
font-size: 50
}

#main {
border: 3px solid;
border-color:#39ff14;
color:#39ff14;
background-color:#093b0060;
padding: 0px 20px 20px 20px;
width: 60%;
height:auto;
margin-left: 20%;
margin-right: 20%;
margin-top: 0%;
margin-bottom: 5%;
}

#main2 {
background-color:#FF65A3;
border: 3px solid;
border-color:#39ff14;
color:#333333;
padding: 0px 20px 20px 20px;
width: 60%;
height:auto;
margin-left: 20%;
margin-right: 20%;
margin-top: 0%;
}

#blank-center {
padding: 0px 20px 20px 20px;
width: 60%;
height:auto;
margin-left: 20%;
margin-right: 20%;
margin-top: 5%;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: red;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.floating-title {
  font-family: 'neon-disco';
  font-size: 5rem;
  display: inline-block; /* Helps the browser calculate the layout boundaries correctly */
  
  /* 
    floating = the name of the keyframe below
    4s       = the speed of one full cycle (increase for slower, decrease for faster)
    ease-in-out = creates a gentle deceleration at the top and bottom peaks
    infinite = makes it play forever
    alternate = reverses direction each cycle so it doesn't snap back abruptly
  */
  animation: floating .1s ease-in-out infinite alternate;
}

@keyframes floating {
  0% {
    transform: translateY(0); /* Natural starting position */
  }
  100% {
    transform: translateY(-2px); /* Moves up by 15 pixels */
  }
}