body{

    background-color: black;

}


#container{

    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    display: flex;
    justify-content: center;
    align-items: center;

}


/*----- loading animation -----*/
/* HTML: <div class="loader"></div> */


#frontPageLoader{

    position: relative;
    color: white;

}

#fakeConsoleContainer{

    position: absolute;
    left: 50%;
    top: 50%;

    width: 800px;
    height: 90%;

    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.6s ease-in-out;

}

#tabsContainer{

    margin-top: 20px;
    display: flex;

}

.tabButton{

    width: 120px;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;

    text-align: center;

    border: 2px solid white;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: white;

    user-select: none;

    font-family: "Roboto Mono", monospace;
    font-weight: bold;

    transition: width 0.5s ease-in-out, 
                background-color 0.2s ease-in-out,
                border 0.2s ease-in-out,
                color 0.2s ease-in-out;

}

.tabButton.active{

    width: 170px;
    color: black;
    background-color: white;
    border-bottom: 2px solid white;

}

#tab{

    position: relative;

    margin-top: 20px;

    width: 80px;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;

    text-align: center;

    border: 2px solid white;
    border-bottom: 2px solid transparent;

    color: black;
    background-color: white;

    user-select: none;

    font-family: "Roboto Mono", monospace;
    font-weight: bold;

}


#fakeConsole{

    left: 0;

    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;

    color: white;
    font-size: 18px;
    font-family: "Roboto Mono", monospace;

    overflow-y: auto;

    cursor: text;

    border: 2px solid white;

}

#fakeConsole div{

    margin-left: 10px;
    display: flex;

}

#fakeConsole input{

    background-color: black;
    font-family: "Roboto Mono", monospace;
    font-size: 18px;
    color: white;
    outline: none;
    border: none;
    box-shadow: none;
    background: none;

}

#logoContainer{

    position: absolute;
    left: 50%;
    top: 90px;

    transform: translateX(-50%);
    width: max-content;
    font-size: 30px;

    display: grid;
    place-items: center;

}

#logo{

    width: 70px;
    height: auto;

}

.normalText{

    font-family: "Roboto Mono", monospace;
    font-size: 30px;
    color: white;  

}

/* HTML: <div class="loader"></div> */
.loader  {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 50px;
  overflow: hidden;
  animation: l28 2s infinite;
}
.loader::before {
  content:"Loading...";
}

@keyframes l28{
   0%,10%  {transform:perspective(300px) rotate(0)      rotateY(0)      rotateX(0)} 
   30%,36% {transform:perspective(300px) rotate(.5turn) rotateY(0)      rotateX(0)}
   63%,69% {transform:perspective(300px) rotate(.5turn) rotateY(180deg) rotateX(0)}
   90%,100%{transform:perspective(300px) rotate(.5turn) rotateY(180deg) rotateX(180deg)}
}