body{
    background-image: url(./pics/Background.png);
    background-size: 100% 100%;
}
.sign_up {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: whitesmoke;
}
hr{
    height: 2px;
    border-width:0px;
    width:30%;
    color: whitesmoke;
    background-color: whitesmoke;
}
.actual_sign_up{
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: whitesmoke;
}
/*Fun stuff :]*/
.invisible_letters p{
    color: rgba(0, 0, 0, 0);
}
input:focus{
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/*text animation & code*/
input[type="text"]{
    color: black;
    background-color: #c6c9ca;
}
input[type="text"]:focus{
    animation-name: textColorAnimation;
}
@keyframes textColorAnimation{
    from {background-color: #c6c9ca;}
    to {background-color: #94dbf5;}
}
/*email animation & code*/
input[type="email"]{
    color: black;
    background-color: #c6c9ca;
}
input[type="email"]:focus{
    animation-name: emailColorAnimation;
}
@keyframes emailColorAnimation{
    from {background-color: #c6c9ca;}
    to {background-color: #f0c695;}
}
/*password animation & code*/
input[type="password"]{
    color: black;
    background-color: #c6c9ca;
}
input[type="password"]:focus{
    animation-name: passwordColorAnimation;
}
@keyframes passwordColorAnimation{
    from {background-color: #c6c9ca;}
    to {background-color: #9bf89b;}
}
/*date code*/
input[type="date"]{
    color: black;
    background-color: #c6c9ca;
}
/*number animation & code*/
input[type="number"]{
    color: black;
    background-color: #c6c9ca;
}
input[type="number"]:focus{
    animation-name: numberColorAnimation;
}
@keyframes numberColorAnimation{
    from {background-color: #c6c9ca;}
    to {background-color: #ff8c8c;}
}
/*textarea animation & code*/
textarea{
    background-color: #c6c9ca;
    color: black;
}
textarea:focus{
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-name: textareaColorAnimation;
}
@keyframes textareaColorAnimation{
    0% {background-color: #c6c9ca;}
    100% {background-color: #ec8cff;}
}
/*Submit animation & code*/
input[type="submit"]{
    height: 50px;
    width: 150px;
    color: black;
    background-color: #c6c9ca;
    font-size: larger;
}
input[type="submit"]:hover{
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-name: submitColorAndSizeAnimation;
}
@keyframes submitColorAndSizeAnimation{
    0% {background-color: #c6c9ca;}
    16.7% {background-color: #ff8c8c;}
    33.4% {width: 300px; background-color: #f7ff8c;}
    50.1% {background-color: #8cffbc;}
    66.8% {width: 300px; height: 100px; background-color: #9fe7ff;}
    83.5% {background-color: #8ca7ff;}
    100% {background-color: #c6c9ca;}
}
/*Not working :[*/
label::first-letter{
    color: whitesmoke;
    background-color: none;
    border-radius: 2px;
    box-shadow: 3px 3px 0 red;
    padding: 6px 3px;
    float: left;
}
/*Borrowed from https://css-tricks.com/css-link-hover-effects/ ***/
a{
    background-image: linear-gradient(
        to right,
        #54b3d6,
        #54b3d6 50%,
        whitesmoke 50%
    );
    /*makes the gradient 1 color by resizing the gradient*/
    background-size: 200% 100%;
    background-position: -100%;
    /*no idea dude*/
    display: inline-block;
    padding: 5px 0;
    /*Makes the link color the color of the text*/
    background-clip: text;
    -webkit-background-clip: text;
    /*Makes text the color*/
    -webkit-text-fill-color: transparent;
    /*transition so it doesnt look disgusting*/
    transition: all 0.3s ease-in-out;
}
/*creates a before... thing that is later used in the animation*/
a:before {
    content: '';
    background: #54b3d6;
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    transition: all 0.3s ease-in-out;
  }
/*when you hover the link something happens?*/
a:hover{
    background-position: 0;
}
/*makes the before be 100% of the link*/
a:hover::before{
    width: 100%;
}