.screen{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.console{
    display: flex;
    flex-direction: column;
    position: absolute;
    /*height: 0%;*/
    height: 0%;
    width: 0%;
    /*aspect-ratio: 4/3;*/
    border: .1vw solid #262626;
    box-sizing: border-box;
    border-radius: .3vw;
    font-family: "Google Sans Code", monospace;
    font-size: 1vw;
    overflow: hidden;

    transition: height .3s ease-in-out,
                width .3s ease-in-out;
    z-index: 4;
}

.console-top-bar{
    display: flex;
    width: 100%;
    height: 6%;
    background-color: black;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    
    transition: height .2s linear,
                width .2s linear;
}

.console-content{
    display: flex;
    width: 100%;
    height: 94%;
    background-color: #0C0C0C;

    
    transition: height .35s linear,
                width .35s linear;
}

.console-top-bar-left, .console-top-bar-right{
    display: flex;
    height: 100%;
    align-items: center;
    box-sizing: border-box;
    user-select: none;
}

.console-top-bar-left{
    justify-content: left;
    width: 75%;
    gap: 3%;
    font-size: 1vw;
    padding-left: 1.5%;
    box-sizing: border-box;
}

.console-top-bar-right{
    justify-content: right;
    font-size: 1vw;
    width: 25%;
}

.console-top-bar-right span{
    display: flex;
    height: 100%;
    width: 33%;
    justify-content: center;
    align-items: center;
    transition: background-color .2s ease-in;
    &:hover{
        background-color: #1A1A1A;
        cursor: pointer;
    }
}

.console-top-bar-right span.active{
    transition: background-color .2s ease-in;
    &:hover{
        background-color: #E81123;
        cursor: pointer;
    }
}

.console-icon{
    display: flex;
    height: 60%;
    aspect-ratio: 1;
}

.console-text{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 97%;
    white-space: pre;
}

.console-scroll{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 3%;
    background-color: #171717;
}

.console-scroll-upper-arrow, .console-scroll-lower-arrow{
    display: flex;
    width: 100%;
    height: 5%;
    justify-content: center;
    align-items: center;
    color: #4D4D4D;
}

.console-scroll-drag-bar{
    display: flex;
    width: 100%;
    height: 90%;
    padding: 0 1% 0 1%;
    box-sizing: border-box;
}

.console-scroll-drag{
    display: flex;
    width: 100%;
    height: 10%;
    background-color: #4D4D4D;
}

i{
    font-size: 1vw;
}

a{
    color: white;
    transition: color 0.1s ease-in-out;
    user-select: none;
    &.visited{
        color: white;
    }
    &:hover{
        color: red;
        cursor: pointer;
    }
    text-decoration: none;
}