@font-face {
    font-family:sound;
    src: url('Fast_Hand.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:sound2;
    src: url('Equalize.ttf');
    font-weight: normal;
    font-style: normal;
}

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

@keyframes show {
    0% {opacity: 0%;};
    100% {opacity: 75%;};
}   

@keyframes hide {
    0% {opacity: 75%};
    100% {opacity: 0%;};
}


@keyframes summonme {
    0% {transform: translateY(0);}
    100% {transform: translateY(100vh);}
}
html {
    background-color: #3C3C3C;
    width:100%;
    height:100%;
    overflow-x: hidden;
}

body {
    margin: 0 0 0 0;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-color: transparent
}

a:visited {
    color:white;
}

#headerc {
    background-color: #2C2C2C;
    width:100%;
    height:7vh;
    display: flex;
    flex-wrap: nowrap;
}

.headercontent {
    color:white;
    background-color: transparent;
}

#title {
    font-size: 2vh;
    position:relative;
}

@media only screen and (max-width:450px) {
    #title {
        font-size: 80%;
        position:relative;
    }
}

.songimage {
    position:relative;
    object-fit: fill;
    width:10vw;
    height:20vh;
    background-color: black;
    text-align: center;
    opacity:0;
}

#show {
    opacity:100%;
}

#gone {
    opacity: 0%;
    height:0px;
    width:0px;
    position:absolute;
    left:999999px;
}

#everyoneelse {
    font-family: Arial, Helvetica, sans-serif;
}

#titlecontent {
    font-family:montserrat;
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

.chartspicked {
    width:70vw;
    height:100%;
    display:flex;
    overflow-y: auto;
    flex-direction: row;
    flex-wrap: wrap;
}

.settings {
    position:absolute;
    left:70.5vw;
    top:8vh;
}

.songtext {
    position:relative;
    color:white;
    top:0;
    width:100%;
    background-color: rgba(0,0,0,50%);
    font-size: 14px;
}

.cardsongimage {
    position:absolute;
    left:0;
    top:0;
    object-fit: fill;
    height:100%;
    width:100%;
}

h1 {
    color:white;
}

#banme {
    position:absolute;
    width:100%;
    height:100%;
    z-index: 2;
    left:0;
    top:0;
    background-color:red;
    opacity:0%;
    border: none;
    border-radius: 0%;
}

#banme:hover {
    background-color: red;
    opacity:75%;
}



.banned {
    opacity:75%;
    z-index: 2;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color: red;
    border: none;
    border-radius: 0%;
}

.hidden {
    position:absolute;
    opacity: 0%;
}

.amnttopull label {
    color:white;
    font-size: 32px;
}

.checkboxes {
    width:32px;
    height:32px;
}

#tiebreaker {
    height:5vh;
    width:100%;
    margin-top: 75%;
    border:none;
    background-color:#00F1FF;
    font-size: 32px;
}

.supercooltiebreakerthing {
    width:100%;
    height:100%;
    position:absolute;
    top:-100vh;
    background-color: rgba(0, 0, 0, 70%);
    z-index: 3;
}

#summon {
    animation-name:summonme;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.tiebreakerwheel {
    position:relative;
    left:50%;
    transform: translate(-50%);
    width:75%;
    height:100%;
    background-color: aliceblue;
}

.tiebreakerwheelheader {
    background-color:#00F1FF;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    position:relative;
    z-index: 4;
}

.tiebreakerwheelfill {
    position:relative;
    height: 100%;
    width:100%
}

.leftarrow {
    color:black
}

.triangleR {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #555;
	border-bottom: 25px solid transparent;
    margin-left: 17%;
    position: absolute;
    z-index: 4;
    top:50%;
}

.triangleL {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #555;
	border-bottom: 25px solid transparent;
    position:absolute;
    top:50%;
    left:94%;
    margin-left: -4px;
    z-index: 4;
}

.bigassredline {
    height:50px;
    width:100%;
    position:absolute;
    top:50%;
    background-color: red;
    opacity: 50%;
    z-index: 3;
}

.wheel {
    width:90%;
    height:90%;
    clip-path: circle();
    background-color: #555;
    position:absolute;
    left:50%;
    translate: -50% -50%;
    top:50%;
    object-fit: contain;
}

.tiebreakerwheelcontent {
    width:100%;
    height:100%;
}

.tiebreakercontainer {
    height:50%;
    width:50%;
}

.penis {
    position:relative;
    left:50%;
    top:45%;
    height:100%;
    width:100%;
}

.clickme {
    position:absolute;
    text-align: center;
    width:128px;
    height:128px;
    background-color: white;
}

.clickmetext {
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

#randomizebutton {
    background-color: #00F1FF;
    border-radius: 0%;
    border:none;
    height:48px;
    font-size: 32px;
    width:45%;
}

#amount {
    height:44px;
    font-size: 32px;
    width:50%;
}

#ruleset {
    height:44px;
    font-size: 16px;
    width:50%;
}

@media only screen and (max-width:450px) {
    #tiebreaker {
        position:absolute;
        left:100px; /*mobile users deserve no fun*/
        top:0;
        height:0;
        width:0;
        opacity: 0%;
    }

    .supercooltiebreakerthing {
        height:0%;
        position:absolute;
        width:0%;
        top:0;
        left:100px;
        z-index: 1;
        overflow-x: hidden;
    }

    .settings {
        position:sticky;
        left:0px;
        top:80%;
    }

    .chartspicked {
        display: flex;
    }

    .songimage {
        width:100%;
    }

    html {
        overflow-x: hidden;
    }
    
    #everyoneelse {
        height: 100%;
    }

    #gone {
        left:0px
    }

}

p {
    color: white;
}

h2 {
    color:white;
}

.hiddenlog {
    font-size: 0%;
    opacity:0;
    height:0;
    width:0;
}

#logs {
    height:44px;
    font-size: 16px;
    width:50%;
}

.lognoti {
    background-color: #2C2C2C;
    opacity:0
}