body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

h1 {
    margin: 20px 0;
}

hr {
    width: 90%;
    color: #089cfe;
    margin: 10px auto;
}

#board {
    width: 90vw; /* 90% of viewport width */
    height: 90vw; /* 90% of viewport width to keep it square */
    max-width: 400px; /* Maximum width to avoid it getting too large */
    max-height: 400px; /* Maximum height to avoid it getting too large */
    background-color: #3eace3;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    border: 6px solid transparent;
    /* border-image: url('wave.svg') 30 stretch; */
    border-image-slice: 1;
}
#board::before,
#board::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

#board::before {
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 20%, transparent 60%);
    clip-path: polygon(0% 20%, 20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%);
}

#board::after {
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.2) 20%, transparent 60%);
    clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%);
    transform: rotate(-2deg);
}

.tile {
    width: 22vw; /* 22% of viewport width */
    height: 22vw; /* 22% of viewport width to keep it square */
    max-width: 90px; /* Maximum width to avoid it getting too large */
    max-height: 90px; /* Maximum height to avoid it getting too large */
    border: 5px solid #bbada0;
    font-size: 4vw; /* Font size relative to viewport width */
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* colored tiles */
.x2 { background-color: #f7f6f3; color: #000000; }
.x4 { background-color: #cfd362; color: #000000; }
.x8 { background-color: #f4b17a; color:  #000000; }
.x16 { background-color: #f59575; color: rgb(0, 0, 0); }
.x32 { background-color: #f57c5f; color: rgb(0, 0, 0); }
.x64 { background-color: #f65d3b; color:  #000000; }
.x128 { background-color: #edce71; color:  #000000; }
.x256 { background-color: #edcc63; color:  #000000; }
.x512 { background-color: #edc651; color: rgb(0, 0, 0); }
.x1024 { background-color: #eec744; color:  #000000; }
.x2048 { background-color: #ecc230; color: rgb(0, 0, 0); }
.x4096 { background-color: #fe3d3d; color:  #000000; }
.x8192 { background-color: #ff2020; color: rgb(0, 0, 0); }

/* Styling the control icons */
.controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.control-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.control-icon {
    font-size: 30px;
    margin: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.control-icon:hover {
    color: #fe084e; /* Change color on hover */
}

#up {
    margin-bottom: 5px;
    font-size: 7vw;
}

#down {
    margin-top: 5px;
    font-size: 7vw;
}

#left {
    margin-right: 50px;
    font-size: 7vw;
}

#right {
    margin-left: 50px;
    font-size: 7vw;
}
/* Media Query for devices with max-width of 768px */
@media (max-width: 768px) {
    #board {
        width: 90vw;
        height: 90vw;
    }

    .tile {
        width: 20vw;
        height: 20vw;
        font-size: 5vw;
    }

    .control-icon {
        font-size: 10vw;
    }
}