@import url('https://fonts.cdnfonts.com/css/minecraft-3');

:root {
    color-scheme: dark;
    --text: #978f8f;
    --base: #000000;
    --mantle: #ffffff;
    --crust: #181825;
    --back: rgba(3,3,25,0.8);
}

@media only screen and (max-width: 500px) {
    div {
        transform: scale(0.9);
    }
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: black; }
}

body {
    background: var(--base);
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-family: 'Minecraft', sans-serif;
    margin: 0;
}

.serverContainer {
    background-color: var(--back);
    display: flex;
    border-radius: 10px;
    border: 1px solid var(--mantle);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.done {
    flex-direction: row;
    align-self: center;
}

.done h1, h2, h3, h4, h5, h6 {
    display: flex;
    justify-content: center;
    padding: 4vh;
    flex-direction: row;
}

#serverTitle {
    font-family: 'Minecraft', sans-serif;
}

.button-container {
    display: flex;
    top: 100px;
    width: 300px;
    gap: 40px;
    justify-content: center;
    padding-bottom: 20px;
}

.button {
    background-color: #ffbb50;
    font-family: 'Minecraft', sans-serif;
    font-size: 1.25em;
    margin: 0;
    color: var(--mantle);
    width: 100px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a {
    width: 100px;
    height: 40px;
    z-index: 100;
}

#console-box-container {
    display: none;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#console-box {

    transition: background-color 2s ease;
}

#console-box.active {
    /*background-color: #EEEEEE;  perhaps later i can make something where if the console is active, it's like a discord ping kinda (1) or (534) thing? that's neat*/
}

.console-button-text span {
    text-orientation: upright;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text);
    font-family: 'Minecraft', sans-serif;
    font-size: 2em;
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0%, 100% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px); /* wave left-right */
    }
}
.console-button-text span:nth-child(1) { animation-delay: 0s; }
.console-button-text span:nth-child(2) { animation-delay: 0.1s; }
.console-button-text span:nth-child(3) { animation-delay: 0.2s; }
.console-button-text span:nth-child(4) { animation-delay: 0.3s; }
.console-button-text span:nth-child(5) { animation-delay: 0.4s; }
.console-button-text span:nth-child(6) { animation-delay: 0.5s; }
.console-button-text span:nth-child(7) { animation-delay: 0.6s; }

#theactualconsole {
    flex: 1;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    color: rgba(0, 255, 0, 0.93);
    font-family: monospace;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 868px;
    width: 0;
    border: 1px solid var(--mantle);
    transition: width 0.4s cubic-bezier(0.6, -0.28, 0.74, 0.05);
}

#theactualconsole.open {
    width: 450px;
}

.log-line {
    display: block;
    white-space: pre-wrap;
    border: 1px solid var(--mantle);
}

.stdout {
    color: rgba(0, 255, 0, 0.93);
}

.stderr {
    color: rgba(255, 85, 85, 0.93);
}