@font-face {
    font-family: 'Pixel';
    src: url('../font/Pixel.otf') format('truetype');
}

html {
    background-color: beige;
    font-family: monospace;
    cursor: url(../img/cursor/pixel.cur) 1 1, auto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.CustomNav,
.innerContainer1,
.innerContainer2,
.outerContainer {
    box-shadow: 0 8px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.CustomNav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    background-color: rgba(0, 0, 0, 0.76);
    border-radius: 25px;
    height: 80px;
}

.CustomNav a {
    position: absolute;
    right: 15px;
}

h1 {
    color: beige;
    font-family: 'Pixel', monospace;
    font-size: 45px;
    letter-spacing: 1px;
}

h2 {
    text-align: center;
    font-size: 50px;
    font-family: 'Pixel', monospace;
}

.outerContainer {
    width: 950px;
    background-color: rgb(202, 202, 182);
    height: fit-content;
    margin: 50px auto;
    padding: 20px 0px;
    border-radius: 30px;
    position: relative;
}

.innerContainer1,
.innerContainer2,
.innerContainer3 {
    height: 250px;
    width: 800px;
    margin: 20px auto;
    border-radius: 30px;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    flex-wrap: wrap;
    align-items: center;
}

.innerContainer1 {
    background-color: rgb(81, 148, 145);
}

.innerContainer2 {
    background-color: rgb(74, 76, 139);
}

.innerContainer3 {
    background-color: rgb(158, 99, 64);
}

#Rbtn,
#Tbtn,
#Wbtn {
    width: 100%;
    height: 100%;
    border: none;
    color: black;
    font-size: 30px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.7s, color 0.5s;
    background-color: rgba(255, 255, 255, 0.26);
    cursor: url(../img/cursor/pixel_link.cur) 8 1, auto;
    z-index: 10;
    position: absolute;
}

#Rbtn:hover,
#Tbtn:hover,
#Wbtn:hover {
    background-color: rgba(0, 0, 0, 0.26);
    color: white;
}

.X,
.O,
.RPS-image,
.Mole,
.Hammer {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 70px;
    opacity: 0.3;
    margin: 20px 10px;
    transition: transform 0.3s;
}

.RPS-image {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

.Mole {
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
}

.Hammer {
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
}

.Rrow,
.Trow,
.Wrow {
    margin: 10px;
}

.innerContainer1:hover .RPS-image,
.innerContainer3:hover .Mole,
.innerContainer3:hover .Hammer {
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
}

.innerContainer2:hover .X,
.innerContainer2:hover .O {
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
}

.innerContainer1:hover h2,
.innerContainer2:hover h2,
.innerContainer3:hover h2 {
    transition: transform 0.3s ease-in-out;
    transform: scale(1.1) rotate(3deg);
}