/* Fonts */

/* Strenuous Light Italics */
@font-face {font-family: "StrenuousW05-LightItalic"; src: url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.eot"); src: url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.woff") format("woff"), url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.svg#StrenuousW05-LightItalic") format("svg"); }
/* Silicone Light Italics */
@font-face {font-family: "SiliconeW00-LightItalic"; src: url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.eot"); src: url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.woff") format("woff"), url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.svg#SiliconeW00-LightItalic") format("svg"); }
/* LogoSans Regular */
@font-face {font-family: "LogoSans 8"; src: url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.eot"); src: url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.woff") format("woff"), url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.svg#LogoSans 8") format("svg"); }

/* body/etc */

.text-box {
    margin: auto;
    margin-top: 15vh;
    max-width: 80vw;
    background: rgb(252, 165, 58, 35%);
    border-radius: 45px;
    padding-top: 2vh;
    padding-bottom: 3vh
}   
/*
@keyframes bounce {
    0% {
        transform: translate(0,0)
    }
    50% {
        transform: translate()
    }
    100% {
        position: 0%
    }
}
      */
.top-border {
    
}

.welcome-text {
    color: #fca53a;
    text-align: center;
    font-family: "StrenuousW05-LightItalic", sans-serif
}

.button-row {
    align-items: center;
    justify-content: center;
    transform: translate(10%);
}
.x-mark {
    transform: translate(55%, -60%);
    font-size: 25px;
}

.button {
    width: 30%;
    height: 100px;
    margin-left: 5%;
    margin-right:5%;
    
    border-style: hidden;
    border-radius: 15px;
    background: rgb(252, 165, 58, 35%);
    color: #a62f0370;
    text-align: center;
    font-family: "LogoSans 8", sans-serif;
    font-weight: bolder;
}

.button:hover {
    background: rgb(252, 165, 58, 75%);
}

.button:active {
    border-style: solid;
    border-color: #fd502170;
    border-width: 10px
}

body {
    font-size: 1.8rem;
    max-height: 100vh;
   /* margin: 500px;
    border-radius: 500px; */
    /* grid and gradient */
    background-color: green;
    
    background-size: 
        100px 100px,
        100px 100px,
        400% 400%;
    background-image:
    linear-gradient(to right, #fca53a70 3px, transparent 1px),
    linear-gradient(to bottom, #fca53a70 3px, transparent 1px),
    linear-gradient(-45deg, #d92a1a90, #fc683290, #d92a1a);
   
    
    animation: gradient 7s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0 0, 0 0, 0% 50%;
    }
    50% {
        background-position: 0 0, 0 0, 100% 50%;
    }
    100% {
        background-position: 0 0, 0 0, 0% 50%;
    }
}
    
    /* dots and gradient */
    /*
    background-size:
        100px 100px,
        100% 100%;
    background-image:
    radial-gradient(circle, #000000 3px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(#d92a1a, #fc6832, #fca53a);
    */
}

h1 {
    
    font-family: "StrenuousW05-LightItalic", sans-serif;
    text-align: center;
    color: #fca53a
}

h3 {
    font-family: "LogoSans 8", sans-serif;
    text-align: center;
    color: #fdc075;
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 0px
}

p {
    font-family: "LogoSans 8", sans-serif;
    text-align: center;
    color: #fdc075;
    margin-top: 0px;
    margin-right: 50px;
    margin-left: 50px
}
button {
    font-size: 1.8rem
}

@media screen and (max-width: 920px) {
    .text-box {
    margin: auto;
    margin-top: 22vh;
    max-width: 80vw;
    background: rgb(252, 165, 58, 35%);
    border-radius: 5vw; /* alt: 45px */
    padding-top: 2vh;
    padding-bottom: 5vh
    }   
    .button {
    width: 30%;
    height: 12vw;
    margin-left: 5%;
    margin-right:5%;
    
    border-style: hidden;
    border-radius: 3vw; /* alt: 15px*/
    background: rgb(252, 165, 58, 35%);
    color: #a62f0370;
    text-align: center;
    font-family: "LogoSans 8", sans-serif;
    font-weight: bolder;
    }
    .button:hover {
    background: rgb(252, 165, 58, 75%);
    }
    .button:active {
    border-style: solid;
    border-color: #fd502170;
    border-width: 10px
    }
    body {
    font-size: 3vw;
    max-height: 100vh;
    }
    p {
    font-family: "LogoSans 8", sans-serif;
    text-align: center;
    color: #fdc075;
    margin-top: 0px;
    margin-right: 50px;
    margin-left: 50px
    }
    button {
    font-size: 4vw
    }
}