@font-face {
    font-family: comic;
    src: url(assests/COMIC.TTF);
}

#votingContainer {
    display: flex;
    width: 60vh;
    height: 95vh;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

@keyframes vote {
    0% {
        transform: scale(1.00);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1.00);
    }
}

#upvote {
    width: 30vh;
    height: 30vh;
    background-image: url("assests/up.png");
    background-size: cover;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#upvote:active {
    animation: vote 0.1s linear;
}

#downvote {
    width: 30vh;
    height: 30vh;
    background-image: url("assests/down.png");
    background-size: cover;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#downvote:active {
    animation: vote 0.1s linear;
}

body {
    margin: 0;
    text-align: center;
    font-family: comic;
    font-size: 2vh;
    overflow: hidden;
}

#mainContainer {
    display: flex;
    position: absolute;
    width: 100vw;
    height: 100vh;

    background-color: rgb(172, 172, 172);

    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#roomFinder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#roomCode {
	font-size: 1.5vh;
	font-family: comic;
    text-align: center;
}

#join {
	font-size: 1.5vh;
	font-family: comic;
}


#votingContainer {
    display: none;
}

#credits {
    position: absolute;
    bottom: 0.5vh;
    left: 50%;
    transform: translate(-50%, 0);

    font-size: 1.5vh;
    color: rgb(80, 80, 80);

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
}