#bootPage {
    background-color: #1B1B1B;
    width: 100%;
    height: 100%;
    cursor: none;

    button {
        background-color: black;
        width: 100%;
        height: 100%;
    }
}

#biosContainer {
    padding: 3vmin;
    color: whitesmoke;
    font-family: "Perfect DOS";
    font-size: 3vmin;
    min-width: 1311px;
    display: grid;
    grid-template: 15vmin 12vmin 9vmin 24vmin 30vmin 3vmin/auto 60vmin;

}

#biosContainer> :first-child {
    display: grid;
    grid-template: 3vmin 3vmin /6.5vmin 153vmin;

    >img {
        grid-row: 1/3;
        height: 6vmin;
        width: 6vmin;
    }

    >p {
        grid-column: 2;
    }
}

#biosError {
    grid-column: 1/3;
    color: red;
}

#biosLoading {
    grid-row: 6;
}

#biosContainer>*:not(#energy):not(#biosError) {
    grid-column: 1
}

#energy {
    top: 0;
    width: 100%;
    grid-column: 2;
    grid-row: 1/4;
}


/*bios text font*/
@font-face {
    font-family: "Perfect DOS";
    src: url("../fonts/Perfect_DOS_VGA_437.ttf")
}

/* fade in animation for #bootScreen when .hidden is removed */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#bootScreen {
    animation: fadeIn 3s;
    width: 100%;
    height: 100%;
    color: whitesmoke;
    font-family: "Franklin Gothic Small", "Arial", Arial, sans-serif;
    font-size: 3vmin;
    display: grid;
    grid-template: 60lvh 30lvh 10lvh / auto;
    align-items: end;

}

#bootTop {
    grid-template: auto auto auto /auto auto auto;
    display: grid;

    align-items: end;
    justify-content: center;
    align-content: center;

    img {
        width: 20vmin;
        height: 20vmin;
    }

    span {
        text-align: end;
        align-self: end;
    }

    span:nth-of-type(2) {
        grid-column: 1/3;
        font-size: 8vmin;
    }

    span:nth-of-type(3) {
        align-self: self-start;
        text-align: start;
        color: orangered;
        font-size: 4.5vmin;
        font-weight: bold;
    }

    span:nth-of-type(4) {
        grid-row: 3;
        grid-column: 1/3;
        text-align: start;
        padding-left: 1.5vmin;
        font-size: 4.8vmin;
        font-weight: 100;
    }
}

#bootBar {
    margin: 0 auto;
    align-self: center;
    width: -moz-fit-content;
    width: fit-content;
    border: 0.25vmin solid rgb(174, 174, 174);
    border-radius: 0.3vmin;
    display: grid;
    grid-template: 2.5vmin/2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin 2vmin;

    >p {
        border: 0.3vmin;
        border: 0.3vmin solid #1B1B1B;
        text-align: center;
        font-size: 2vmin;
        color: #1B1B1B
    }
}

#bootBarFill1 {
    background: rgb(40,56,199);
    background: linear-gradient(0deg, rgba(40,56,199,1) 20%, rgba(135,159,240,1) 80%, rgba(40,56,199,1) 100%);
}
#bootBarFill2 {
    background: rgb(40,56,199);
background: linear-gradient(0deg, rgba(40,56,199,1) 40%, rgba(135,159,240,1) 80%, rgba(40,56,199,1) 100%);
}
#bootBarFill3 {
    background: rgb(40,56,199);
background: linear-gradient(0deg, rgba(40,56,199,1) 60%, rgba(135,159,240,1) 80%, rgba(40,56,199,1) 100%);
}


#bootBottom {
    grid-row:3;
    margin: 2vmin;

    span {
        font-size: 2vmin;
    }

    span:nth-of-type(2) {
        text-align: end;
        display: block;
    }

}