body {
    background-color: black;
    width: 100% /*18*/
}

.control-panel {
    border: solid 3px rgb(31, 183, 188);
    border-radius: 10px;
    background-color: rgb(39, 31, 31);
    min-height: 90vh;
    width: 100% /*18*/
    d
}

.controlpanel-title {
    color: rgb(5, 46, 48);
    font-size: 1.5em;
    text-align: center;
}

.panels {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 96vw;
}


.green-panel {
    border: solid 3px rgb(31, 183, 188);
    border-radius: 20px;
    background-color: rgb(32, 99, 106);
    min-height: 90vh;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.grey-panel {
    border: solid 3px rgb(2, 22, 22);
    border-radius: 20px;
    background-color: rgb(167, 181, 187);
    min-height: 27vh;
    width: 90%;
    text-align: center;
    margin: 5px;
}

.optronic-box {
    border: solid 3px rgb(9, 52, 54);
    border-radius: 20px;
    background-color: rgb(167, 181, 187);
    min-height: 30vh;
    width: 90%;
    text-align: center;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.optronic-screen {
    border: solid 3px black;
    border-radius: 100px;
    height: 40vh;
    width: 90%;
    text-align: center;
    color: #d2dbe0;
    padding-bottom: 5px;
    background-image: url(./img/orca.jpg);
    background-size: cover;
    /* Makes the image cover the entire area */
    background-position: center;
    /* Centers the image */
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
        /* Smooth transition */
}

.radar-box {
    border: solid 3px rgb(9, 52, 54);
    border-radius: 20px;
    background-color: rgb(167, 181, 187);
    min-height: 30vh;
    width: 90%;
    text-align: center;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.radar {
    position: relative;/* Ensures dots stay inside */
    border-radius: 100px;
    height: 40vh;
    width: 90%;
    text-align: center;
    color: #d2dbe0;
    padding-bottom: 5px;
    background-image: url(./img/radar_empty.png);
    background-size: cover;
    /* Makes the image cover the entire area */
    background-position: center;
    /* Centers the image */
    background-repeat: no-repeat;
    overflow: hidden;
        /* Prevents dots from escaping */
}

.radar-control {
    border-top: solid 3px rgb(4, 24, 26);
    border-radius: 20px;
    background-color: rgb(167, 184, 187);
    min-height: 5vh;
    width: 99%;
    text-align: center;
}

.terminal-box {
    border: solid 3px rgb(2, 22, 22);
    border-radius: 20px;
    background-color: rgb(5, 25, 33);
    min-height: 20vh;
    width: 90%;
    text-align: center;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.terminal-screen {
    border: solid 3px rgb(7, 40, 45);
    border-radius: 20px;
    background-color: rgb(163, 216, 29);
    min-height: 15vh;
    width: 90%;
    text-align: center;
    margin: 5px;
}

.dropdown-panel {
    border: solid 4px rgb(2, 22, 22);
    border-radius: 20px;
    background-color: rgb(167, 181, 187);
    min-height: 10vh;
    width: 90%;
    text-align: center;
    margin: 1px 5px 5px 5px;


}

h1 {
    color: rgb(31, 183, 188);
    font-size: 1.2em;
    text-align: center;
}

h2 {
    color: rgb(6, 54, 56);
    font-size: 1em;
    text-align: center;
    margin: 5px;
}

.command-console {
    color: #97c8df;
    margin: 5px 0px 0px 0px;
}

h3 {
    color: rgb(6, 54, 56);
    font-size: 0.8em;
    text-align: center;
}

button {
    background-color: rgb(32, 99, 106);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(23, 55, 62);
    border-radius: 10px;
    padding: 10px 5px;
    margin: 5px;
    cursor: pointer;
    font-size: 0.7em;
    min-width: 5vw;
}

.torpedo-button {
    *background-color: rgb(32, 99, 106);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(23, 55, 62);
    border-radius: 10px;
    padding: 10px 5px;
    margin: 5px;
    cursor: pointer;
    font-size: 0.7em;
    min-width: 7vw;
}


.equipment-button {
    background-color: rgb(32, 99, 106);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(23, 55, 62);
    border-radius: 10px;
    padding: 10px 5px;
    margin: 5px;
    cursor: pointer;
    font-size: 0.7em;
    min-width: 4.5vw;
}

.fuel-button {
    background-color: rgb(32, 99, 106);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(23, 55, 62);
    border-radius: 10px;
    padding: 10px 5px;
    margin: 5px;
    cursor: pointer;
    font-size: 0.7em;
    min-width: 8vw;
}

.button-optronic {
    background-color: rgb(32, 99, 106);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(23, 55, 62);
    border-radius: 10px;
    padding: 10px 5px;
    margin: 5px;
    cursor: pointer;
    font-size: 0.7em;
    min-width: 15vw;
}
.sonar-button {
    background-color: rgb(32, 99, 106);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(23, 55, 62);
    border-radius: 10px;
    padding: 10px 5px;
    margin: 5px;
    cursor: pointer;
    font-size: 0.7em;
    min-width: 15vw;
}

.log-button {
    background-color: rgb(32, 99, 106);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(23, 55, 62);
    border-radius: 10px;
    padding: 10px 5px;
    margin: 5px;
    cursor: pointer;
    font-size: 0.7em;
    min-width: 8vw;
}

.coordinate {
    position: absolute;
    color: red;
    font-size: 16px;
    font-weight: bold;
    animation: fadeOut 10s forwards;
}

button:hover {
    background-color: rgb(23, 55, 62);
}


@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* blinking red dot for the sonar */
.sonar-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: opacity 0.5s ease-in-out;
}

/* Blinking effect for allies */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blinking {
    animation: blink 1s infinite;
}



/* Media Query for Mobile */
@media (max-width: 768px) {
    .panels {
        flex-direction: column; /* Stack the main panels vertically */
        height: auto; /* Adjust height for content */
    }

    .green-panel {
        width: 90%; /* Make panels full width on mobile */
        min-height: auto; /* Adjust height for content */
        margin: 10px 0; /* Add spacing between panels */
        min-width: 300px; 
    }

    .green-panel:nth-child(2){
        display: flex;
        flex-direction: column;
    }

    .optronic-box,
    .radar-box{