@font-face {
  font-family: "PressStart2P";
  src: url("../font/PressStart2P-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
    background: linear-gradient(-90deg, #070707, #202020);
} 

.section_title {
    display: grid;
    padding-top: 50px;

}

.section_title_text {
    justify-self: center;
    color: rgb(183, 222, 255);
    font-family: "PressStart2P", sans-serif;
    font-size: 175%;

}



.main {
    width: 100%;
    display: grid;
    margin-top: 25px;
    aspect-ratio: 3/1;
}

@media (min-width: 800px) {

    .box {
        overflow-y: auto;
        width: 80%;
        height: 90%;
        justify-self: center;
        align-self: center;
        border: solid 2px rgb(32, 32, 32);
        background-color: #14141450;
        padding: 15px;
        border-radius: 10px;
        scrollbar-color: rgb(61, 61, 61) transparent;
    }

    .serverrow {
        background-color: rgb(33, 33, 33);
        height: 11%;
        width: 95%;
        margin-top: 8px;
        justify-self: center;
        display: flex;
    }

    .row {
        display: flex;
        height: 14%;
        gap: 10px;
        align-items: center;
        border-bottom: 2px solid gray;
        color: white;
        font-size: 1.5vw;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        margin-bottom: 15px;
    }

    .item {
        border-left: rgb(105, 105, 105) solid 2px;
        height: 80%;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .firstitem {
        height: 80%;
        justify-content: center;
        align-items: center;
        display: flex; 
    }


    .name {
        width: 28%;
        font-size: 1.2vw;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: #ddd;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

    .status {
        width: 23%;
        font-size: 1.1vw;
        font-family: 'Courier New', Courier, monospace, sans-serif;
        font-weight: bold;
        letter-spacing: 1.3px;
        color: #ddd;
        height: 100%;
        display: flex;
        align-items: center;    
        justify-content: center;
    }

    .uptime {
        width: 50%;
        height: 100%;
        display: flex;
        gap: 1.5%;
        align-items: center;
    }

    .line {
        height: 50%;
        aspect-ratio: 1/6;
        border-radius: 5px;
        transition: 0.2s ease;
        cursor: pointer;
    }

    .goofy-gap {
        width: 10px;
    }

    .line-popup {
        visibility: hidden;
        width: 0;
        font-family: sans-serif;
        position: absolute;
        font-weight: bold;
        font-size: 0.8vw;
        letter-spacing: 1px;
    }
}

@media (max-width: 799px) {
        .box {
        overflow-y: auto;
        width: 90%;
        height: 90%;
        justify-self: center;
        align-self: center;
        border: solid 2px rgb(32, 32, 32);
        background-color: #14141450;
        padding: 15px;
        border-radius: 10px;
        scrollbar-color: rgb(61, 61, 61) transparent;
    }

    .serverrow {
        background-color: rgb(33, 33, 33);
        height: 30%;
        width: 100%;
        margin-top: 8px;
        justify-self: center;
        display: flex;
    }

    .row {
        display: flex;
        height: 14%;
        gap: -10px;
        align-items: center;
        border-bottom: 2px solid gray;
        color: white;
        font-size: 3.5vw;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        margin-bottom: 15px;
    }

    .item {
        border-left: rgb(105, 105, 105) solid 2px;
        height: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-bottom: 10px;
    }

    .firstitem {
        height: 100%;
        justify-content: center;
        align-items: center;
        display: flex; 
        margin-bottom: 10px;
    }


    .name {
        width: 28%;
        font-size: 3.2vw;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: #ddd;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

    .status {
        width: 18%;
        font-size: 2.5vw;
        font-family: 'Courier New', Courier, monospace, sans-serif;
        font-weight: bold;
        letter-spacing: 1.3px;
        color: #ddd;
        height: 100%;
        display: flex;
        align-items: center;    
        justify-content: center;
    }

    .uptime {
        width: 25%;
        height: 100%;
        display: flex;
        gap: 2.5%;
        align-items: center;
    }

    .line {
        height: 35%;
        aspect-ratio: 1/6;
        border-radius: 5px;
        transition: 0.2s ease;
        cursor: pointer;
    }

    .goofy-gap {
        min-width: 10px;
    }

    .line-popup {
        visibility: hidden;
        width: 0;
        font-family: sans-serif;
        position: absolute;
        font-weight: bold;
        font-size: 2.3vw;
        letter-spacing: 1px;
    }
}

.line:hover {
    scale: 1.2;
}

.line:hover .line-popup {
    visibility: visible;
    width: auto;
    z-index: 10;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    color: #ddd;
    background-color: #1b1b1b;
    border: 1px solid #444;
    padding: 7px;
    border-radius: 5px;
}