/* Adjusting basic body settings */
body{
    margin:0;
    overflow: hidden;
}

/* Background for the entire page, used to make a simple gradient */
#BG{
    z-index: -1;
    height: 100vh;
    width: 100vw;
    position: fixed;
    /* First item is at the top of the page, adding more is as easy as just copying and editing */
    background-image: linear-gradient(rgb(236, 190, 137),rgb(249, 255, 217),rgb(249, 255, 217),rgb(249, 255, 217),rgb(144, 219, 144));
}

/* Tells wheels to go up at a slight angle */
/* Keyframe colour filter works in opposite order to background-image gradient colours */
@keyframes WheelAnim {
    from {
        transform: translateY(100vh) translateX(-20vw);
        /* Starts the wheels at a green hue */
        filter: hue-rotate(140deg);
    } 
    to {
        transform: translateY(-50vh) translateX(20vw);
        /* Ends them at a orange hue */
        filter: hue-rotate(0deg);
    }
}

/* Presets were used instead of random for future editing of different factors, never got used */
.WheelClassVSlow {
    animation: WheelAnim 20s linear infinite;
}
/* */
.WheelClassSlow {
    animation: WheelAnim 18s linear infinite;
}
/* */
.WheelClassNorm {
    animation: WheelAnim 15s linear infinite;
}
/* */
.WheelClassFast {
    animation: WheelAnim 13s linear infinite;
}
/* */
.WheelClassVFast {
    animation: WheelAnim 10s linear infinite;
}

/* Used for the red square background */
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    width: 95vw;          
    height: 90vh;         
    box-sizing: border-box;
    padding: 30px; 
    
    overflow-y: auto; 
    overflow-x: auto; 
    border-radius: 35px;
    background-image: url("Bgtest.jpg");
    background-size: cover;
    background-color: #e7c4c4;
    border: 5px solid rgb(40,40,40);
    z-index: 2; /* Due to all the moving wheels and bike spawning, Z index was very important. Most things are in the minus level to make it easier. */
    /* If stuff is invisiable during testing, CHANGE THE Z INDEX */
}

.containerPol {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    width: 95vw;          
    height: 90vh;         
    box-sizing: border-box;
    padding: 30px; 
    
    overflow-y: auto; 
    overflow-x: auto; 
    border-radius: 35px;
    background-image: url("Bgtest.jpg");
    background-size: cover;
    background-color: #e7c4c4;
    border: 5px solid rgb(40,40,40);
    z-index: 2; /* Due to all the moving wheels and bike spawning, Z index was very important. Most things are in the minus level to make it easier. */
    /* If stuff is invisiable during testing, CHANGE THE Z INDEX */
}

/* Used for the animated text, I think its a true loop but it could jitter. */
/* I'm sure there is a better way to do this but, this works for now */
@keyframes wavy {
  0% {
    transform:translate(0,0.5px)
  }
  12.5% {
    transform:translate(-0.354px,0.354px)
  }
  25% {
    transform:translate(-0.5px,0)
  }
  37.5% {
    transform:translate(-0.354px,-0.354px)
  }
  50% {
    transform:translate(0,-0.5px)
  }
  62.5% {
    transform:translate(0.354px,-0.354px)
  }
  75% {
    transform:translate(0.5px,0)
  }
  87.5% {
    transform:translate(0.354px,0.354px)
  }
  100% {
    transform:translate(0,0.5px)
  }
}

/* This was another text animation test, this one looked bad... Still could be good for something, maybe.  */
@keyframes shaky {
  0% {
    transform:translate(0,0)
  }
  6.25% {
    transform:translate(0.3px,-0.15px)
  }
  12.5% {
    transform:translate(-0.3px,0.15px)
  }
  18.75% {
    transform:translate(-0.3px,-0.15px)
  }
  25% {
    transform:translate(0.3px,0)
  }
  31.25% {
    transform:translate(0px,0.3px)
  }
  37.5% {
    transform:translate(0.3px,-0.15px)
  }
  43.75% {
    transform:translate(-0.3px,-0.3px)
  }
  50% {
    transform:translate(-0.3px,-0.15px)
  }
  56.25% {
    transform:translate(0,0.3px)
  }
  62.5% {
    transform:translate(-0.3px,0.15px)
  }
  68.75% {
    transform:translate(-0.3px,-0.15px)
  }
  75% {
    transform:translate(0.3px,-0.3px)
  }
  81.25% {
    transform:translate(0.3px,-0.15px)
  }
  87.5% {
    transform:translate(0.3px,-0.3px)
  }
  93.75% {
    transform:translate(-0.3px,0.15px)
  }
  100% {
    transform:translate(0,0)
  }
}

/* Just the handler for the moving text */
.MovingText {
    z-index: 3; /* Don't forget Z-index please */
    display: inline-block;
    animation: wavy 0.75s steps(16,end)infinite;
    animation-delay: 0ms;
    white-space:pre
}

/* Used to clump up set amounts of entry boxes */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Does the clumping */
    gap: 20px;       
    margin-bottom: 20px;
}


/* Formatting class */
.input-wrapper {
    width: 300px;
    position: relative;
    display: inline-block;
}

/* Fancy way of seperating types of inputs B) */
.input-wrapper input[type="text"]{
    width: 100%;
    padding: 15px;
    border-radius: 15px;
    border: 3px solid rgba(40,40,40,0.7);
    box-sizing: border-box;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(50, 0, 0);
    font-size: 18;
    margin-bottom: 20px;
}

/* Never found a use for the checkboxes, also looked bad. */
.input-wrapper input[type="checkbox"]{
    width: 50px;
    height: 50px;
    filter: hue-rotate(180deg);
    position: relative;
}

/* This is used for the fading text */
.input-wrapper span.Textbox{
    position: absolute;
    transform: scale(1.484);
    padding: 17px;
    left: 32px;
    color: rgba(40,40,40,0.7);
    pointer-events: none;
    transition: all 0.5s ease;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18;
    color: rgb(50, 0, 0);
}

/* This would be used for the fading text for checkboxes, but again looked bad */
.input-wrapper span.Checkboxspan{
    position: absolute;
    transform: scale(1.67);
    padding: 14px;
    left: 110px;
    color: rgb(0,0,0);
    pointer-events: none;
    transition: all 0.3s;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16;
}

/* Animation for fading */
  .input-wrapper input:focus + span.Textbox{
      filter: opacity(0);
  }

  .input-wrapper input:not(:placeholder-shown) + span.Textbox{
      filter: opacity(0);
  }
/*  */

/* Was used to make the checkbox change colour based on if it was active, looked pretty good but again, no use for checkboxes */
.input-wrapper input:checked + span.Checkboxspan {
  color: rgb(120,20,20);
}
/* More invis animations, but for when text is inside instead of when box has focus */
  span.Textbox{
      filter: opacity(0);
  }

  .input-wrapper input:not(:placeholder-shown) + span.Textbox{
      filter: opacity(0);
  }

/* Checkbox animations */
  .input-wrapper input:checked + span.Checkboxspan {
    color: rgb(120,20,20);
  }
/* Restoring opacity */
  span.Textbox{
      filter: opacity(1);
  }

/* Handles edge cases, no noticable performance impacts */
.input-wrapper input:not(:placeholder-shown) + span.Textbox{
    filter: opacity(0);
}

/* Checkbox animations */
.input-wrapper input:checked + span.Checkboxspan {
  color: rgb(120,20,20);
}