:root {
    --primary-color: #000080;
    --secondary-color: #c0c0c0;
    --tertiary-color: #828086;
    --affirmation-color: #2a9f00;
    --negative-color: #aa1f00;
    --bg-color: #008181;

    --win95-border-color: #ffffff #434343 #434343 #ffffff;
    --win95-border-color-inverted: #434343 #ffffff #ffffff #434343;

    --maincolor: #000080;
    --gradient-color1: #221f11;
    --gradient-color2: #524620;
    --gradient-color3: #272505a6;
    --gradient-color4: #2c2a08a1;
    --gradient-color5: #292802b0;
    --gradient-color6: #c3252500;
    --gradient-color7: #c3252500;
    --gradient-color8: #c3252500;
    --angle: 2deg;
    --box-shadow-color: rgb(239 255 0 / 78%)
}

html {
    display: flex;
    font-size: clamp(12px, 2vh, 32px);
    font-family: "MS Sans Serif", Arial, sans-serif;
    width: 100%;
    height: 100%;
    color: var(--text-color);
    background: var(--bg-color);
    overflow: hidden;
}

body {
    position: fixed;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#app {
    display: flex;
    width: 100%;
    height: 100%;
}

.flex-fill,
.flex-fill-col {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.flex-fill-col {
    flex-direction: column;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-center-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.black-border {
    border: 1px solid black;
}

.debug-border {
    border: 1px solid red;
}

.border-black {
    border: 1px solid black;
}