@import "main.css";
.image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
html{
    font-family:Helvetica,sans-serif;
    text-align:center;
    color:#404040;
    text-shadow:2px 2px 3px #101010;
    font-size:min(3vw,3vh);
}
.bg-img {
    background-image: url('/static/images/ArcPong.jpg') ;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #000;
}
.bg-red {
    background-color: #800;
}
/*
:root{
    --bright-blue:#0052C8;
    --bright-red:#C85252;
    --primary-color:var(--bright-red);
}
body{
    min-height:(97vh,95vh);
    display:flex;
    flex-direction:column;
    background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
    background-size:400% 400%;
    animation:gradient 15s ease infinite;
}
h1{
    font-size:min(4vw,4vh);
    color:white;
    text-shadow:2px 2px 4px #101010;
}
h2{
    font-size:min(4vw,4vh);
    color:var(--primary-color);
    text-shadow:2px 2px 3px #ffffff,2px 2px 2px #000000;
}
p{font-size:min(3.5vw,3.5vh);}
.emp{font-size:min(3.5vw,3.5vh);}
.topnav{
    overflow:hidden;
    background-color:var(--primary-color);
    box-shadow:2px 2px 1vw gray;
    position:fixed;
    width:100%;
    z-index:100;
    top:0; 
    left:0;
}
.content{
    max-width:100vw;
    margin:0 auto;
}
.but-canvas{
    margin:min(3vw,3vh);
    background:#ffffff;
    border-radius:min(3vw,3vh);
    width:min(30vw,30vh);
    height:min(5vw,5vh);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:2px 2px 7px #404040;
}
.but-text{
    color:white;
    display:inline-block;
    vertical-align:middle;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    width:96%;
    height:80%;
    top:min(1vw,1vh);
    background:var(--primary-color);
    border-radius:min(2vw,2vh);
    letter-spacing:1px;
    outline:none;
}
.but-text:hover{
    text-shadow:0 0 3px #fff7f0,0 0 6px #fff7f0,0 0 9px #fff7f0,0 0 12px #fff7f0;
}
.botnav{
    background-color:var(--primary-color);
    margin-top:auto;
    width:100%;
    height:min(10vw,10vh);
    box-shadow:2px 2px 7px gray;
    box-shadow:0px -2px 7px white;
    position:fixed;
    z-index:100; 
    bottom:0; 
    left:0;
}
@keyframes gradient {
    0%{
    background-position:0% 50%;
    }
    50%{
    background-position:100% 50%;
    }
    100%{
    background-position:0% 50%;
    }
}
*/