@font-face {
    font-family: "ibmvga";
    src: url(./Fonts/ibmvga2x.woff) format(woff);
}

@font-face{
    font-family: "hack";
    src: url(./Fonts/Hack_Reg.ttf) format(woff);
}

@font-face {
    font-family: "elite";
    src: url(./Fonts/SpecialElite.ttf) format(woff);
}

body{
    width: 100vw;
    height: 100vh;
    margin: auto;
    background-color: #212121;
}



.supertotesawesome{
    background-color: #DCDCDC;
    color: white;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 450px;
    height: 250px;
    border-width: 2px;
    border-color: #272727;
    border-style: dashed;

    h1{
        font-family: "ibmvga";
        margin-top: -4%;
        margin-left: auto;
        margin-right: auto;
        background-color: #FF3D3D;
        width: 400px;
        text-align: center;
    }

    p{
        color: black;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10pt;
        font-family: "hack";
    }

    a{     
        padding-top: 10px;
        text-decoration-line: none;
    }   
}

.background{
    z-index: -1;
    width: 100vw;
    height: 100vh;
    position: absolute;
    font-family: ibmvga;
    font-size: 30pt;
    color: #292929;

    h1{
        margin-top: -20px;
    }
}

.enter{
    background-color: #1D1D1D;
    font-size: 30pt;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    height: 50px;
    font-family: "elite";
    margin-right: auto;
    margin-left: auto;
    border-color: white;
    border-style: dashed;
    border-width: 2px;
    transform: rotateZ(-2deg);

    a{
        color: #DCDCDC;
    }
}

.enter:hover{
    background-color: #DCDCDC;
    border-color: #1D1D1D;
    animation-name: jitters;
    animation-iteration-count: infinite;
    animation-duration: 0.65s;
    animation-timing-function: steps(1);

    a{
        color: #1D1D1D;
    }
}

@keyframes jitters{ /* j- j- j- jeez m- m- m- m- man! */
		0%	{ 
            transform: skew(-8deg) translate(0px, 0px) scalex(1) scaley(1.03) rotate(3deg);
        }
		10%	{ 
            transform: skew(0.3deg) translate(-1px, 0px) scalex(1.07) scaley(1) rotate(2deg); 
        }
		20%	{ 
            transform: skew(3deg) translate(3px, 0px) scalex(1) scaley(1) rotate(-3deg); 
        }
		30%	{ 
            transform: skew(-2deg) translate(0px, 2px) scalex(1.08) scaley(1) rotate(4deg); 
        }
		40%	{ 
            transform: skew(-0.6deg) translate(1px, -5px) scalex(1) scaley(1.004) rotate(5deg); 
        }
		50%	{ 
            transform: skew(-0.8deg) translate(0px, 0px) scalex(1.1) scaley(1) rotate(6deg); 
        }
		60%	{ 
            transform: skew(0deg) translate(-3px, 0px) scalex(1) scaley(1) rotate(1deg); 
        }
		70%	{ 
            transform: skew(0.1deg) translate(-1px, -4px) scalex(0.95) scaley(1) rotate(-5deg); 
        }
		80%	{ 
            transform: skew(2deg) translate(3px, 0px) scalex(1) scaley(1.03) rotate(4deg); 
        }
		90%	{ 
            transform: skew(6deg) translate(0px, 0px) scalex(1.08) scaley(1) rotate(-7deg); 
        }
		100%	{ 
            transform: skew(-0.5deg) translate(1px, 5px) scalex(1) scaley(1.12) rotate(2deg); 
        }
}