@font-face {
    font-family: vcr;
    src: url("font.ttf");
}

html, body {
    background-color: black;
    padding: 0;
    margin: 0;

    scroll-behavior: smooth;
}

p, a, h1, h2, h3, h4, h5, h6, button {
    font-family: vcr;
    color:white;
    text-align: center;
}

p {
    padding-left:10px;
    padding-right:10px;
}

div.testimonialcontent {
    display: inline-flex;
}

div.testimonialcontent p {
    text-align: left;
}

div.testimonial {
    border-color: #3B76BB;

    border-style: solid;
    border-width: 4px;
    margin:10px;

    text-align: left;
}

hr {
    border-width: 4px;
    border-style: solid;
}

@keyframes scaleLoop {
    0% {
        transform: scaleX(95%) scaleY(105%);
    }
    50% {
        transform: scaleX(105%) scaleY(95%);
    }
    100% {
        transform: scaleX(95%) scaleY(105%);
    }
}

img {
    border-color:#3B76BB;
    border-width: 4px;
    padding:4px;
    border-style: solid;

    max-height: 100px;
    max-width: 100px;
    margin: 10px;
    margin-top:0;
    width: auto;
    margin-top: auto;
    margin-bottom: auto;
}

img.noborder {
    border: none;
}

div.containmentbox {
    background-color: rgba(0,0,0,0.75);
    border-color: #07BEB8;
    border-radius: none;
    border-style: solid;
    border-width: 8px;

    box-shadow: 8px 8px #6F2DBD;

    max-width: 800px;
    width: 70%;
    min-width: 300px;

    margin: auto;

    margin-bottom: 20px;
    margin-top: 40px;
}

video, iframe {
    border-color: #3B76BB;
    border-radius: none;
    border-style: solid;
    border-width: 4px;
    margin: 10px;

    background-color: black;

    width: 85%;
    max-width: 500px;

    aspect-ratio: 11 / 9;
}

textarea {
    max-width: 80%;
}

.gray, .gray > a {
    color:gray;
}

input, textarea {
    background-color: rgba(0,0,0,0.75);
    border-color: #3B76BB;

    color: white;

    border-radius: 0px;
    border-style: solid;
    border-width: 4px;

    
    font-size: medium;

    font-family: vcr;

    width: 80%;
    padding: 10px;
    min-width: 250px;

    margin-bottom: 20px;
}

form {
    text-align: center;
}

button {
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

button.active {
    background-color: rgba(0,0,0,0.75);
    border-color: #07BEB8;

    color: white;

    border-radius: none;
    border-style: solid;
    border-width: 4px;

    box-shadow: 8px 8px #6F2DBD;
    
    font-size: x-large;
}

button.active:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px #6F2DBD;

    cursor: pointer;
}

button.active:active {
    transform: translate(2px, 2px);
    box-shadow: 6px 6px #6F2DBD;
}

button.inactive {
    background-color: black;
    border-color: #3B76BB;
    color:gray;

    border-radius: none;
    border-style: solid;
    border-width: 4px;
    
    font-size: x-large;

    opacity: 75%;
}

button.inactive:hover {
    cursor:not-allowed;
}

#content {
    position:absolute;
    top:0;
    width: 100%;
}

footer {
    bottom:0;
    position: absolute;
    width: 100%;
}

canvas {
    position: fixed;
}

@media only screen and (max-width:600px) {
    div.testimonialcontent {
        display: block;
    } 

    div.containmentbox {
        max-width: 90%;
        width: 90%;
        box-shadow: 4px 4px #6F2DBD;
    }

    div.testimonial {
        margin: 0;
        border-width: 0;
        border-top-width: 4px;
        border-color: rgba(59, 119, 187, 0.5);
    }
}

button.mini {
    font-size: larger;
}

@keyframes cycle {
    0% {
        filter: hue-rotate(0deg);
        scale: 100%;
    }

    50% {
        filter: hue-rotate(180deg);
        scale: 110%;
    }

    100% {
        filter: hue-rotate(360deg);
        scale: 100%;
    }
}

div.hidden {
    display: none;
}

.clrcycle {
    animation: cycle 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

video:fullscreen {
    border-radius: 0;
    border-style: none;
}

@keyframes shake {
    0% { transform: translate(0px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(0px, 1px) rotate(0deg); }
}

.ohno {
    display: block;
    animation: shake 2s infinite cubic-bezier(0.37, 0, 0.63, 1);
}

.nooutline {
    border: none !important;
}