:root {
    --charcoal-brown: #30362fff;
    --olive-bark: #625834ff;
    --golden-bronze: #a59132ff;
    --light-yellow: #fffbdbff;
    --chocolate: #da7422ff;
}

@font-face {
    font-family: nunito;
    src: url(fonts/Nunito-Regular.ttf)
}

@font-face {
    font-family: pixelout;
    src: url(fonts/pixelout.ttf);
}

.nunito-header {
    font-family: pixelout;
    color: #52B69A;
    letter-spacing: 4px;
}

.nunito-body {
    font-family: nunito;
    color: #3d9b80;
}

.background {
    background-color: var(--charcoal-brown);
    min-height: 100vh;
    margin:0px;
    padding:20px;
}

/* 9-slice pixel frame. Source: 48x48 image, 3x3 grid of 16px tiles */
.main-card {
    border: 64px solid transparent;                 /* the border has to exist for the image to show */
    border-image-source: url("images/9 SLICE/full2.png");
    border-image-slice: 16 fill;                    /* cut every 16 image px; "fill" also draws the middle tile */
    border-image-width: 64px;                       /* 4x scale: 16px tile drawn at 64px */
    border-image-repeat: round;                     /* repeat edge tiles a whole number of times */
    image-rendering: pixelated;                     /* keep pixels sharp when scaled */
    padding: 8px;

    background-image: url("images/9 SLICE/bg-dark.png");
    background-size: 20vw;
}

/*This is the main container for the whole website. Holds all of the main components.*/
.aux-box {
    --aux-scale: 2;                                     
    --aux-top: calc(6px * var(--aux-scale));
    --aux-right: calc(32px * var(--aux-scale));
    --aux-bottom: calc(9px * var(--aux-scale));
    --aux-left: calc(24px * var(--aux-scale));

    border-style: solid;
    border-color: transparent;
    border-width: var(--aux-top) var(--aux-right) var(--aux-bottom) var(--aux-left);
    border-image-source: url("images/9 SLICE/AuxBox.png");
    border-image-slice: 6 32 9 24 fill;
    border-image-width: var(--aux-top) var(--aux-right) var(--aux-bottom) var(--aux-left);
    border-image-repeat: round;
    image-rendering: pixelated;

    width: fit-content;
}

.aux-box p {
    margin:5px;
}