body {
    margin: 0;
    color: white;
}

.backround{
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
}

p {
    font-size: 25px;
    margin: 0;
}

h3 {
    font-size: 25px;
}

button {
    font-size: 20px;
    padding: 10px;
    background-color: rgb(189, 103, 236);
    border: 0px;
    border-radius: 3px;
}

button:hover {
    background-color: plum;
}

.start {
    background-color: pink;
    font-size: 25px;
}

.start:hover {
   background-color: white;
   font-size: 30px;
}

.right {
    position: absolute;
    width: 40%;
    height: 90vh;
    background-color: rgba(165, 42, 42, 0.89);
    top: 50vh;
    left: 50vw;
    transform: translate(12%,-50%);
}

.controls {
    display: flex;
}

.controls p{
    margin-left: 4.8vw;
}

.controls div{
    background-color: white;
    top: 34px;
    width: 1.8vw;
    height: 1.8vw;
    position: absolute;
    border-radius: 100px;
}

.controls .blue{
    left: 3vw;
    background-color: blue;
}

.controls .purple{
    left: 8.6vw;
    background-color: purple;
}

.controls .red{
    left: 14.5vw;
    background-color: red;
}

.controls .orange{
    left: 20vw;
    background-color: orange;
}

.controls .yellow{
    left: 26vw;
    background-color: yellow;
}

.controls .green{
    left: 31.7vw;
    background-color: green;
}

.right h2 {
    margin-top: 1px;
    margin-bottom: 3px;
    margin-left: 3px;
}

.board {
    width: 91%;
    height: 88%;
    background-color: rgb(82, 48, 48);
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%,-50%);
    border-radius: 20px;
}

.guesses {
    width: 75%;
    height: 95%;
    background-color: burlywood;
    position: absolute;
    left: 40%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 15px;
}

.checks {
    width: 19%;
    height: 95%;
    background-color: rgb(95, 79, 58);
    position: absolute;
    left: 88.55%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 10px;
}

.gr1 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 92%;
}

.gr1 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr2 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 82%;
}

.gr2 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr3 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 72%;
}

.gr3 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr4 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 62%;
}

.gr4 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr5 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 52%;
}

.gr5 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr6 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 42%;
}

.gr6 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr7 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 32%;
}

.gr7 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr8 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 22%;
}

.gr8 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr9 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 12%;
}

.gr9 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}
.gr10 {
    border: 2px solid rgb(83, 57, 57);
    width: 95%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 2%;
}

.gr10 *{
    border: 2px solid rgb(83, 57, 57);
    width: 1.7vw;
    height: 1.7vw;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translate(0,-50%);
}

.gc1{
    left: 8%;
}

.gc2{
    left: 23%;
}

.gc3{
    left: 38%;
}

.gc4{
    left: 53%;
}

.gc5{
    left: 68%;
}

.gc6{
    left: 83%;
}

.cr1 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 92%;
}

.cr1 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr2 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 82%;
}

.cr2 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr3 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 72%;
}

.cr3 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr4 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 62%;
}

.cr4 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr5 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 52%;
}

.cr5 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr6 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 42%;
}

.cr6 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr7 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 32%;
}

.cr7 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr8 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 22%;
}

.cr8 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr9 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 12%;
}

.cr9 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}
.cr10 {
    border: 2px solid rgb(83, 57, 57);
    width: 94%;
    height: 6%;
    position: absolute;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%,0);
    top: 2%;
}

.cr10 *{
    border: 2px solid rgb(83, 57, 57);
    width: .7vw;
    height: .7vw;
    position: absolute;
    border-radius: 100%;
}

.cc1 {
    top: 10%;
    left: 5%;
}

.cc2 {
    top: 10%;
    left: 35%;
}

.cc3 {
    top: 10%;
    left: 65%;
}

.cc4 {
    top: 50%;
    left: 20%;
}

.cc5 {
    top: 50%;
    left: 50%;
}

.cc6 {
    top: 50%;
    left: 80%;
}

.arrow{
    width: 1vw;
    height: 1.5vw;
    background-color: whitesmoke;
    position: absolute;
    z-index: 1000;
}

.left{
    width: 50vw;
}

.text {
    padding: 2px;
    margin-bottom: 3px;
    border-radius: 20px;
    background-color: rgba(50, 50, 50, 0.527);
}