.board {
    display: flex;
    justify-content: center;
    height: 90vw;
}

.box {
    border: 2px solid black;
    width: 20vw;
    height: 20vw;
    margin: 4px;
    text-align: center;
    background-size: contain;
    background-color: azure;
    box-shadow: 0px 0px 5px 0.3px rgb(50, 26, 158);
    
}

h1 {
    text-align: center;
    font-size: 10vw;
    background-color: antiquewhite;
    margin: auto;
    margin-bottom: 10px;
    width: 95vw;
    border-radius: 100px;
    border: 3px solid white;
    animation: title2 infinite 5s;
}
@keyframes title2 {
    0% {border-color: red;}
    25% {border-color: rgb(9, 138, 37);}
    50% {border-color: rgb(255, 0, 242);}
    75% {border-color: blue;}
    100% {border-color: red;}
}
h2 {
    text-align: center;
    font-style: bold;
    color: rgb(203, 149, 0);
    background-color: antiquewhite;
    width: 70vw;
    margin: auto;
    margin-bottom: 10px;
    border-radius: 50px;
}
.two {
    color: red
}
.zero {
    color: rgb(0, 160, 19)
}
.four {
    color: rgb(255, 0, 242)
}
.eight {
    color: rgb(0, 60, 255)
}
body {
    background-image: url("assets/color-stripesBG.png");
    height: 80vh;
}
.btn {
    display: flex;
    justify-content:center;
}
.clear {
    width: 30vw;
    height: 8vh;
    margin-top: 10%;
    border-radius: 10%;
    border: solid rgb(43, 44, 43) 3px;
    background-color: rgb(255, 255, 255);
    font-size: 5vw;
    position: relative;


}
.clear:hover {
    box-shadow: 3px 5px 10px 1px rgb(32, 120, 32);
    background-color: rgb(124, 239, 109);
    cursor:pointer;
}
.clear:active {
    left: 5px;
    top: 5px;
    background-color: rgb(225, 255, 183);
}

.combineButtons {
    display: flex;
    justify-content: center;
    margin-top: 3vh;

}
.mobileButton {
    /* position: absolute;
    top: -10000px; */
    background-size: contain;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin-left: 20px;

}
#combineUp {
    background-image: url('./assets/combine_up.png');
    border: solid 3px orange;
    position: relative;
}
#combineLeft {
    background-image: url('./assets/combine_left.png');
    border: solid 3px blue;
    position: relative;
}
#combineRight {
    background-image: url('./assets/combine_right.png');
    border: solid 3px rgb(0, 164, 8);
    position: relative;
}
#combineDown {
    background-image: url('./assets/combine_down.png');
    border: solid 3px rgb(255, 0, 76);
    position: relative;
}
#combineDown:active {
    top: 5px
}
#combineRight:active {
    left: 5px
}
#combineLeft:active {
    right: 5px
}
#combineUp:active {
    bottom: 5px
}
#combineDown:hover {
    box-shadow: 0px 0px 3px 2px rgb(247, 9, 108);
    cursor:pointer;
}
#combineRight:hover {
    box-shadow: 0px 0px 5px 3px rgb(24, 124, 6);
    cursor:pointer;
}
#combineLeft:hover {
    box-shadow: 0px 0px 3px 2px rgb(5, 31, 160);
    cursor:pointer;
}
#combineUp:hover {
    box-shadow: 0px 0px 3px 2px yellow;
    cursor:pointer;
}

@media screen and (min-width: 700px){
    .box {
        width: 15vh;
        height: 15vh;
    }
    .clear {
        height: 10vh;
        width: 20vh;
        font-size: 5vh;
        margin-bottom: 5vh;
    }
    .board {
        height: 75vh;
    }
    body {
        height: 130vh;
    }
    h2 {
        width: 35vw;
    }
    h1 {
        font-size: 5vw
    }
}

@media screen and (max-width: 700px) {
    .mobileButton {
        width: 20vw;
        height: 20vw;
        box-shadow: -5px 8px 15px 2px rgb(66, 66, 67);
    }
}