@font-face {
    font-family: PiratesBay;
    src: url(assets/fonts/piratesbay.ttf);
}
body {background-image: url('assets/background-img.jpg');}
html, body {overscroll-behavior: none;}
.role_token {height: 150px; width: 150px; position: absolute; background-repeat: no-repeat; background-size: cover; left: 0px; border-radius: 100%;}
.bottom_buttons {position: absolute; bottom: 10px; width: 100px; height: 100px; border-radius: 20px; background-position: center; background-repeat: no-repeat; background-size: contain;}
.info_tokens    {display:inline-block; width: 80px; height: 80px; background-position: center; background-repeat: no-repeat; background-size: contain; margin: 5px;}
.reminder   {height: 75px; width: 75px; position: absolute; background-repeat: no-repeat; background-size: cover; left: 0px; border-radius: 100%;}
.token_text {position: absolute;width: 100%; top:150px; height: 35px; text-align: center; font-size: 20pt; font-family: PiratesBay; pointer-events: none;}
.info_name_feild {height: 40px; width: 470px; position: absolute; top: 180px; right: 0px; color:black; font-size: 20pt; background-color: #afafaf;}

.night_order_tab {width: 90px; height: 90px; display: inline-block; background-position: center; background-repeat: no-repeat; background-size: contain; border-bottom: 2px solid black; cursor: pointer; position:static; transform: translateX(0px); transition: all ease-in-out 0.2s; text-align: left; min-height: 90px; overflow: hidden;}
.night_order_img {width: 90px; height: 90px; display: inline; pointer-events: none; position: absolute; left: 0px; top: 0px;}
.night_order_span {width: 399px; height: calc(max-content + 10px); display: inline-block; transform: translateX(81px); padding: 10px; font-size: 15pt; font-family: PiratesBay; color: white; pointer-events: none;}

.night_select {width: 96px; height: 41px; position: absolute; text-align: center; font-family: PiratesBay; font-size: 28pt; border: black 2px solid; background-image: url("assets/vines.png"); color: #afafaf; cursor: pointer; user-select: none;}
.trashcan {position: absolute; bottom: 5px; left: 5px; width: 70px; height: 70px; opacity: 0.4; transition: opacity linear 0.1s; cursor: pointer; border-radius: 10px; background-image: url("assets/delete.png"); background-position: center; background-repeat: no-repeat; background-size: contain;}
.trashcan:hover {opacity: 0.7;}
.token_death {width: 50px; pointer-events: none; position: absolute; left: 50px; top: 7px;}
.token_vote {width: 100px; pointer-events: none; position: absolute; left: 25px; top: 25px;}