@font-face {
    font-family: W95FA;
    src: url(/W95FA.otf);
}

@font-face {
    font-family: WindowButtons;
    src: url(/GothicA1-Black.ttf);
}

@font-face {
    font-family: WindowsLogo;
    src: url(/LibreFranklin-VariableFont_wght.ttf);
}

:root {
    --gradient-dark: #31279C;
    --gradient-light: #E50040;
}

body {
    background-color: #181f28;
    font-family: W95FA;
}

.window {
    background-color: silver;
    border-width: 3px;
    border-style: outset;
}

.title-bar {
    background-image: linear-gradient(to right, var(--gradient-dark), var(--gradient-light));
    color: white;
    display: flex;
    padding: 3px 0;
    height: max-content;
}

.title-bar-text {
    margin: 5px;
}

.title-bar-buttons {
    color: black;
    margin: 5px;
    margin-left: auto;
}

.title-bar-buttons span {
    font-family: WindowButtons;
    border-width: 3px;
    border-style: outset;
    background-color: silver;
    padding: 0 2px;
    font-weight: bolder;
    padding-top: .2em;
}

.title-bar-buttons span:last-of-type{
    padding: .2em .2em  0 .2em;
}

.window-content {
    background-color: black;
    margin: 6px;
    border-width: 3px;
    border-style: inset;
    color: white;
    text-align: center;
}

#picture-window .window-content img {
    width: 100%;
    vertical-align: middle;
}

#youtube-window iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

#virus-window .blink{
    animation: blink 2s steps(1, end) infinite;
}

#terminal-window .window-content {
    padding: 9px;
}

#terminal-window .terminal-text {
    text-align: justify;
    font-size: small;
    white-space: pre-wrap;
    margin: 0;
}

#virus-window a:any-link, #terminal-window a:any-link {
    all: unset;
}

#virus-window a:hover, #terminal-window a:hover {
    color: #E5007E;
}

#popup-window .window-content {
    border-width: 0;
    background-color: silver;
    color: black;
}

#popup-window {
    width: fit-content;
}

#popup-window .window-content svg, #popup-window .window-content img {
    width: 30px;
    margin: 12px 12px 0px;
}

#desktop-icons img {
    height: 4em;
}

#desktop-icons svg {
    width: 3em;
    padding: .5em;
    height: auto;
}

#desktop-icons p {
    margin: 0;
    width: 8em;
    height: 2em;
    text-align: center;
    font-size: small;
    color: white;
    text-overflow: ellipsis;
}

#desktop-icons div {
    margin-bottom: 3vh;
}

#desktop-icons a {
    all: unset;
}

#taskbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: silver;
    border-width: 3px 0 0 0;
    border-style: outset;
    padding: 3px;
    margin: 0;
    display: flex;
}

#taskbar .quick-launch svg {
    width: 2em;
}

#taskbar .quick-launch a {
    all: unset;
}

#taskbar .quick-launch {
    align-self: center;
    border-style: outset;
    border-width: 0 1px;
    margin-left: 6px;
    padding: 0 3px;
}

#taskbar button, #popup-window button {
    all: unset;
    border-width: 3px;
    border-style: outset;
    background-color: silver;
    padding: 3px;
}

#taskbar button img {
    width: 2em;
    margin-right: 3px;
}

#taskbar button:active, #taskbar button:hover, #popup-window button:active {
    all: unset;
    border-width: 3px;
    border-style: inset;
    background-color: silver;
    padding: 3px;
}

#taskbar button, #taskbar button:active, #taskbar button:hover {
    display: flex;
    align-items:center;
    padding: 0 3px;
    font-weight: bold;
}

.dropup {
    display: inline-block;
}

.dropup:hover button {
    border-style: inset !important;
}

.dropup-content {
    display: none;
    position: absolute;
    bottom: 100%;
    transform: translate(0, 6px);
    background-color: silver;
    margin-bottom: 3px;
    border-width: 3px;
    border-style: outset;
}

.dropup-text {
    background-image: linear-gradient(to bottom, var(--gradient-dark), var(--gradient-light));
    color: white;
    font-family: WindowsLogo;
    font-size: 1.2em;
    display: flex;
    padding: 3px 0;
}

.dropup-text p {
    all: unset;
    writing-mode: vertical-rl;
    transform: rotate(-180deg); 
}

.dropup-text span {
    font-weight: bolder;
}

.dropup-options a, .dropup-options a:visited {
    all: unset;
}

.dropup-options div {
    display: flex;
}

.dropup-options div:hover {
    background-color: var(--gradient-dark);
    color: white;
}

.dropup-options svg {
    width: 2em;
    margin: 0 12px;
    align-self: center;
}

.dropup-options div:hover svg path {
    fill: white;
}

.dropup-options p {
    margin-right: 2em;
}

.dropup:hover .dropup-content {
    display: flex;
}

@media (min-width: 769px) {
    .window {
        position: absolute;
    }

    #title-window {
        width: 40%;
        z-index: 1;
        top: 45%;
        left: 70%;
        transform: translate(-70%, -45%);
    }

    #virus-window {
        width: 30%;
        z-index: 1;
        bottom: 20%;
        left: 40%;
        transform: translate(-40%, 20%);
    }
    
    #picture-window {
        width: 40vh;
        top: 10%;
        left: 40%;
        transform: translate(-40%, -10%);
    }

    #photo-window {
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
    }

    #youtube-window {
        width: 60vw;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
    }

    .sponsor-info {
        top: 75%;
        left: 80%;
        transform: translate(-80%, -75%);
        z-index: 2;
    }

    .tracker-info {
        top: 10%;
        left: 80%;
        transform: translate(-80%, -10%);
    }

    .contact-form {
        top: 60%;
        left: 85%;
        transform: translate(-85%, -60%);
        z-index: 1;
    }

    .ticket-info {
        bottom: 90%;
        right: 5%;
        transform: translate(5%, 90%);
        z-index: 2;
    }

    #taskbar {
        z-index: 3;
    }

    #file-explorer-window {
        width: 50%;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -30%);
    }

    #internet-explorer-window {
        width: 50%;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -30%);
    }

    #terminal-window {
        width: 40%;
        z-index: 1;
        bottom: 60%;
        left: 50%;
        transform: translate(-50%, 60%);
    }

    #terminal-window .window-content {
        max-height: 70vh;
        overflow-y: auto;
    }

    #desktop-icons {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 90vh;
        align-content: flex-start;
        text-align: center;
    }

    #desktop-icons div {
        margin-right: 3vw;
    }

}

@media (max-width: 768px) {

    #title-window, #picture-window, #table-window, #virus-window, #file-explorer-window, #text-window, #desktop-icons, #terminal-window, #user-management-window, #internet-explorer-window {
        width: 90%;
        margin: auto;
        margin-top: 5%;
    }

    #photo-window, #youtube-window {
        width: 90%;
        margin: auto;
        margin-top: 6em;
    }

    #popup-window {
        margin: auto;
        margin-top: 5%;
    }

    #desktop-icons {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: space-between;
    }

    #desktop-icons .icon:last-of-type, #terminal-window.text, #file-explorer-window.interviews/* , #picture-window */, #internet-explorer-window {
        margin-bottom: 6em !important;
    }

    #taskbar {
        z-index: 3;
    }

}

@keyframes blink {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }

  }