:root {
    --background-dark-grey: #212121;
    --purdue-old-gold: #CFB991;
    --old-gold-solid-gradient: linear-gradient(white -30%, var(--purdue-old-gold) 10%, var(--purdue-old-gold) 90%, black 140%);
}

/* start reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
p {
    margin: 0;
}

img,
picture,
video,
svg {
    display: block;
    max-inline-size: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* end reset */

body {
    height: 100vh;

    background-image: url(./image/BoilermakerOS_Wallpaper_Old_Gold.png);
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: var(--background-dark-grey);

    font-family: sans-serif;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;

    user-select: none;
}

.window {
    /* border-style: solid;
    border-color: grey; */
    border-width: 0.1em;
    box-shadow: var(--background-dark-grey) 0em 0.2em 0.5em;

    border-radius: 0.5em;
    background-color: whitesmoke;
    width: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}

.window-header {
    background: var(--old-gold-solid-gradient);
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    padding: 0.5rem;
    user-select: none;
    font-size: 0.8em;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.window-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    user-select: text;
}

.window-button-close {
    background-image: url(image/Window_Close_Unlit.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 1.1rem;
    width: 1.1rem;
}

.window-button-close:hover {
    background-image: url(image/Window_Close_Lit.png);
}

#desktop {
    flex-grow: 1;
}

#desktop-apps {
    padding: 2em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1.5em;
}

.desktop-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}

.app-icon {
    width: 4em;
    height: 4em;
}

.app-title {
    color: whitesmoke;
    font-size: 0.9em;
    text-shadow: black 0em 0.1em 0.2em;
}

#bottom-bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* background-color: var(--purdue-old-gold); */
    background: var(--old-gold-solid-gradient);
    padding: 0.5rem;
    user-select: none;
}