/* GLOBAL STANDARD TAGS */

html, body {
    background-color: rgb(13,13,25) ;
    cursor: url("../images/cursor.png"), auto !important; 
    font-family: 'SquadaOne', Impact, sans-serif !important;
    
    touch-action: none;
    overflow: hidden;
    overscroll-behavior: none;

}
body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;

    height:100%;
    width: 100%;
    max-height: 100vh;
    max-width: 100vw;

    margin-top:20vh;
}
button {
    text-decoration: none;
}
a {
    text-decoration: none;
}

@font-face {
    font-family: 'SquadaOne';
    src: url(../fonts/Squada_One/SquadaOne-Regular.ttf) format('truetype');
}

h1 {
    color: gold;
}
/* IDS */




/* CLASSES */

.under_construction {
    width: 300px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}

.main {

    /* position */
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;

    /* hides anything outside of box of button */
    overflow: hidden;

    /* background color + text color */
    background-color: gold;
    color: purple;
    
    /* border */
    border: none;
    border-radius: 5px;

    /* shadow */
    box-shadow: 3px 3px 5px purple;

    /* font */
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    font-size: 3vw;
    white-space: nowrap;

    /* size */
    width: 25vw;
    height:.5vh;
    padding: 3vw;

    /* transition */
    transition-duration: .3s;
}




/* CONDITIONALS */ 

@media only screen and (max-width: 767px) {

    .main {
        height: 4vh;
        width: 80vw;
        margin-top: 1%;
        margin-bottom: 1%;

        font-size: 2em;
        
    }
    h1 {
        text-align: center;
    }
    
}

.main::before {

    /* size */
    width: 100vw;
    height:100vh;

    /* color */
    background-color: orange;
    mix-blend-mode:darken;

    /* border */
    border-radius: 40%;

    /* position */
    left: -320%;
    top: -5%;
    position: absolute;

    /* transition */
    transition-duration: .5s;

    /* ??? */
    content: "";
}

.main:hover::before {
    transition-duration: .5s;
    transform: translate(50%,-40%);
    
}

.main:focus {
    transform: translate(5px,5px);
    transition-duration: .3s;
}