@font-face {
    font-family: myFirstFont;
    src: url(Congenial-Black.ttf);
}

body {
    font-family: myFirstFont;
    background-color: white;
    margin: 0 !important;
    padding: 0 !important;
    color: white;
}

#game {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bacgrounds {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: repeat-y;
    background-size: 100% 100%;
}

#bacground1 {
    z-index: 1;
}

#bacground2 {
    z-index: 2;
}

#bacground3 {
    z-index: 3;
}

#content {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
}

.button {
    position: absolute;
    font-family: myFirstFont;
    background-color: transparent;
    background-size: 100% 100%;
    border: none;
    display: flex;
    outline: none;
    color: white;
    transition: 0.5s;
    text-shadow: 4px 3px 6px rgba(0, 0, 0, 0.48);
}

.title {
    position: absolute;
    font-family: myFirstFont;
    background-color: transparent;
    background-size: 100% 100%;
    border: none;
    display: flex;
    outline: none;
    color: white;
    text-shadow: 4px 3px 6px rgba(0, 0, 0, 0.48);
}

.button:hover {
    filter: brightness(0.7);
    transition: 0.5s;
}

#playButton {
    font-size: 12vh;
    top: 70%;
    left: 33%;
    padding: 0vh 5vh 3vh 5vh;
}

#backButton {
    top: 3%;
    left: 1%;
    width: 16vh;
    height: 12vh;
}

#panelTitle {
    font-size: 4vh;
    top: 3%;
    right: 3%;
    width: 109vh;
    height: 12vh;
    padding: 0vh 0vh 3vh 0vh;
    user-select: none;
}

#timeButton {
    font-size: 7vh;
    top: 86%;
    left: 3%;
    width: 33vh;
    height: 15vh;
    padding: 0vh 0vh 3vh 0vh;
    user-select: none;
}

#pointButton {
    font-size: 7vh;
    top: 86%;
    right: 3%;
    width: 33vh;
    height: 15vh;
    padding: 0vh 0vh 3vh 0vh;
    user-select: none;
}

#ggTilte {
    top: 6%;
    left: 27%;
    width: 62vh;
    height: 22vh;
    user-select: none;
}

#resultTime {
    font-size: 13vh;
    top: 33%;
    left: 27%;
    width: 62vh;
    height: 23vh;
    padding: 0vh 0vh 5vh 0vh;
    user-select: none;
}

#resultPoint {
    font-size: 13vh;
    top: 59%;
    left: 27%;
    width: 62vh;
    height: 23vh;
    padding: 0vh 0vh 5vh 0vh;
    user-select: none;
}

#homeButton {
    top: 3%;
    right: 1%;
    width: 16vh;
    height: 12vh;
}

#panel {
    margin-top: 32vh;
    margin-left: 8vh;
    position: absolute;
    background-color: transparent;
}


.row {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -9.6vh;
    margin-left: 0;
}

.clicker {
    background-color: transparent;
    z-index: 10;
    outline: none;
    width: 22vh;
    border-radius: 50%;
    display: inline-block;
    float: left;
    border: none;
    margin: 0 0 0 0;
}


.clicker.rest {
    margin-left: 9vh;
}

.hexagon {
    z-index: 5;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    width: 100%;
}

.hexagon.flipped {
    transform: rotateY(180deg);
}

@keyframes hexagon {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    68% {
        transform: rotate(0deg);
        transform: scale(1);
    }
    71% {
        transform: rotate(0deg);
        transform: scale(1);
    }
    76% {
        transform: rotate(360deg);
        transform: scale(1.25);
    }
    85% {
        transform: rotate(360deg);
        transform: scale(1);
    }
    86% {
        transform: rotate(360deg);
        transform: scale(1);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes hexagon {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
    }
    75% {
        -webkit-transform: rotate(360deg) scale(1);
    }
    75.1% {
        -webkit-transform: rotate(0deg) scale(1);
    }
    80% {
        -webkit-transform: rotate(0deg) scale(1);
    }
    88% {
        -webkit-transform: rotate(0deg) scale(1.25);
    }
    96% {
        -webkit-transform: rotate(0deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(0deg) scale(1);
    }

}

.loadingtext {
    margin-top: 10px;
    color: #b82747;
    font-size: 22vh;
    text-align: center;
    -webkit-text-stroke: 4px white;
    text-shadow: 2px 2px 3px;
}

.loading-hexagon, .loading-hexagon:before, .loading-hexagon:after {
    display: block;
    position: absolute;
    width: 88px;
    height: 154px;
    border: 1px solid transparent;
    padding: 0;
    background: #b82747;
}

.loading-hexagon {
    -webkit-animation: hexagon 3.5s ease infinite;
    animation: hexagon 4s ease-in-out infinite;
    left: 0;
    top: 20vh;
    bottom: 0;
    right: 0;
    margin: auto;
}

.loading-hexagon:before {
    margin: -1px 0 0 -1px;
    width: 88px;
    height: 154px;
    content: '';
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.loading-hexagon:after {
    margin: -1px 0 0 -1px;
    width: 88px;
    height: 154px;
    content: '';
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.inner.loading-hexagon {
    z-index: 100;
    width: 74px;
    height: 129px;
}

.inner.loading-hexagon:before {
    width: 74px;
    height: 129px;
}

.inner.loading-hexagon:after {
    width: 74px;
    height: 129px;
}

.inner.loading-hexagon, .inner.loading-hexagon:before, .inner.loading-hexagon:after {
    background: white;
}


#pleaserotate-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 0;
    transform: translate(0, 0);
}

#pleaserotate-graphic {
    position: absolute;
    top: 0vh;
    left: 0vh;
    animation: 2s ease 0s infinite normal none running pleaserotateframes;
    transform-origin: 50% 50%;
    width: 70%;
}

#pleaserotate-message {
    font-size: 4vh;
    position: absolute;
    color: black;
    top: 70vh;
    width: 100%;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    text-transform: uppercase;
}