@font-face {
    font-family:"Ultrafont2";
    src:url("/static/content/fonts/ultrakill-font-2.woff2") format("woff2");
    font-weight:normal;
    font-style:normal;
}

#terminal {
    aspect-ratio: 4/3;
    padding: 0;
    font-family: "Ultrafont2";
    font-size: 1.2rem;
    color: #ffffff;
    border: none;
}

.smileos-header {
    height: 9%;
    border-image: url(/static/content/smileos/SmileOS_2_Header.webp) 3 fill / 9px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    font-size: 1.4rem;
    font-weight: 900;
    padding-left: 7px;
    padding-right: 7px;
    image-rendering: pixelated;
}

.smileos-header img {
    height: 100%;
    object-fit: contain;
}

#terminal-container {
    border-image: url(/static/content/smileos/SmileOS_2_Content.webp) 1 3 3 fill / 3px 9px 9px;
    height: 100%;
    display: grid;
    grid-template-areas:
        "logo window"
        "buttons window";
    grid-template-columns: 40% 1fr;
    grid-template-rows: 25% 1fr;
    padding: 15px;
    box-sizing: border-box;
    image-rendering: pixelated;
}

#smileos-logo {
    width: 250px;
    grid-area: logo;
    margin: auto;
    image-rendering: pixelated;
}

#terminal-window {
    height: 100%;
    grid-area: window;
}

#window-container {
    border-image: url(/static/content/smileos/SmileOS_2_Content.webp) 1 3 3 fill / 3px 9px 9px;
    height: 91%;
    padding: 35px;
    box-sizing: border-box;
    image-rendering: pixelated;
}

#window-content {
    border-image: url(/static/content/smileos/SmileOS_2_inset_panel.webp) 1 fill / 3px;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    image-rendering: pixelated;
}

.red {
    color: #ff4343;
}

#terminal-buttons {
    grid-area: buttons;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.terminal-button {
    border-image: url(/static/content/smileos/SmileOS_2_Button_transparent.png) 2 / 9px;
    background: url(/static/content/smileos/SmileOS_2_Button_Background.png);
    background-repeat: repeat-x;
    background-size: 100% 100%;
    border-radius: 15px;
    height: 75px;
    width: 270px;
    image-rendering: pixelated;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: "Ultrafont2";
    font-size: 1.2rem;
    color: #ffffff;
}

.terminal-button:hover {
    filter: contrast(110%);
}

.terminal-button:active {
    filter: contrast(125%);
}

#smileos-window-content img {
    width: 100%;
}