@font-face {
    font-family: MainFont;
    src: url('Roboto-Regular.ttf');
}

* {
    font-family: MainFont;
    table-align: center;
	text-align: center;
    color: white;

    /* -webkit-text-stroke: 1px black; */

    /*
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000;
    */

    text-shadow: #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, 
    #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, 
    #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, 
    #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, 
    #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, 
    #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px;
}

body {
	overflow: hidden;
	margin: 0px;
	user-select: none;
    font-size: 25px;
    background-color: white;
}

button {
    font-size: 25px;
    border: solid 3px black;
    border-radius: 15px;
    cursor: pointer;
    margin: 3px;
}

h1, h2 {
    margin: 5px 0;
}

br {
    margin: 5px;
}

.table_center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.pos-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pos-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.grid {
    display: grid;
    padding: 10px;
    grid-template-columns: auto auto auto auto auto;
    gap: 15px;
    width: 555px;
    height: 442px;
}

.grid-dice {
    position: relative;
    width: 90px;
    height: 90px;
    border: dashed 4px gray;
    border-radius: 20px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.2s;
}

.picked_dice {
    position: relative;
    width: 40px;
    height: 40px;
    border: dashed 2px gray;
    border-radius: 10px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.2s;
}

.grid-dice > div,.picked_dice > div {
    font-weight: bold;
}

.grid-dice.picked {
    transform: scale(1.15);
}

.picked_dice > div,
.grid-dice > div {
    z-index: 1;
}

.picked_dice > img,
.grid-dice > img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.grid-dice > div > .energy {
    position: absolute;
    bottom: 3px;
    right: 6px;
    font-size: 18px;
    color: aqua;
}

#p_grid .grid-dice:not(.empty) {
    cursor: pointer;
}

.picked_dice.normal,
.grid-dice.normal {
    border-style: solid;
    border-color: #444;
    background-color: #aaa;
}

.picked_dice.attack,
.grid-dice.attack {
    border-style: solid;
    border-color: #440000;
    background-color: #c00;
}

.picked_dice.heal,
.grid-dice.heal {
    border-style: solid;
    border-color: #004400;
    background-color: #0a0;
}

.picked_dice.scrambler,
.grid-dice.scrambler {
    border-style: solid;
    border-color: #004;
    background-color: #00c;
}

#conclusion {
    border: solid 4px black;
    background-color: #fafad2;
    padding: 5px;
    z-index: 2;
    transition: top 2s;
    top: -50%;
}

.green {
    color: lime;
}

.red {
    color: red;
}

.card {
    cursor: pointer;
    width: 900px;
    transition-duration: 0.4s;
}

.card:hover {
    transform: scale(1.1);
}

.card > div {
    width: 400px;
    height: 100px;
    margin: 5px 0;
    border: solid 4px black;
}

.card_p {
    border-radius: 25px 0 0 25px;
    border-right-style: dashed !important;
    background-color: #ccc;
}

.card_e {
    border-radius: 0 25px 25px 0;
    border-left-style: dashed !important;
    background-color: #666;
}

#round {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

#enemy_div {
    transition: transform 2s;
    transform: translateX(100%);
}

#player_div {
    transition: transform 2s;
    transform: translateX(-100%);
}

#main_menu {
    transition: transform 2s;
    position: absolute;
    width: 100%;
    height: 100%;
}

#game {
    transition: transform 2s;
    transform: translateY(100%);
    position: absolute;
    width: 100%;
    height: 100%;
}

#main_menu button {
    padding: 10px 20px;
}

#main_menu span {
    font-size: 20px;
}

.popup_text {
    position: absolute;
    animation: text_popup 2s ease-out;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 1;
}

@keyframes text_popup {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(40px) translateX(-50%);
    }
}

@keyframes text_popup_up {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) translateX(-50%);
    }
}