html {
    height: 100%;

    background: rgb(46, 46, 46);

    font-size: 2px;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;

    /* Children layout */
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

#sidebar {
    /*  Base Values  */
    --primary-color-h: 284;
    --primary-color-s: 30%;
    --primary-color-l: 45%;

    --contrastThreshold: 60%;

    /*  Calculations Based on Lightness  */
    --lightnessTransform: 10%;
    --darknessTransform: 15%;
    --primary-color-light-l: calc(var(--primary-color-l) + var(--lightnessTransform));
    --primary-color-dark-l: calc(var(--primary-color-l) - var(--darknessTransform));

    --color-primary: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
    --color-primary-dark: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-dark-l));
    --color-primary-light: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-light-l));

    --fontcolor: calc((var(--primary-color-l) - var(--contrastThreshold)) * -100);
    --fontshadowcolor: calc((var(--primary-color-l) - var(--contrastThreshold)) * 100);

    /*  Calculations Based on Hue  */
    --color-primary-complement: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));

    width: 30%;

    background: var(--color-primary);

    /* Children layout */
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}

#inputSelect {
    /* Children layout */
    display: flex;
    gap: 5px;
    flex-direction: row;
}

.sidebarOptionLabel {
    font-size: 20px;
    font-family: "Wendy One", sans-serif;
    color: white;
    padding: 4px;
    cursor: pointer;
}

.sidebarButton {
    background: var(--color-primary-complement);
    border-radius: 10px;
    border: none;

    font-size: 20px;
    font-family: "Wendy One", sans-serif;
    color: white;
    padding: 4px;
    cursor: pointer;
}

#inputDropdown {
    width: 100%;

    background: var(--color-primary-complement);
    border-radius: 10px;
    border: none;

    font-size: 20px;
    font-family: "Wendy One", sans-serif;
    color: white;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    padding: 4px;
    cursor: pointer;
    text-align: center;
    text-transform: capitalize;
}

#inputHomes {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--color-primary-complement) #00000000;
    height: 100%;

    /* Children layout */
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}

.inputPages {
    /* Children layout */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px;
    gap: 5px;
}

.homeButton {
    background: var(--color-primary-complement);
    border-radius: 10px;
    border: none;

    font-size: 16px;
    font-family: "Wendy One", sans-serif;
    color: white;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    padding: 4px;
    cursor: pointer;
}

.pageButton {
    background: gainsboro;
    border-radius: 4px;
    border: none;

    font-size: 12px;
    font-family: "Titillium Web", sans-serif;
    color: black;
    cursor: pointer;
    text-transform: capitalize;
}

#content {
    background: #b92a2a;
    width: 100%;
    scrollbar-color: #1d8fc0 #b92a2a;

    overflow-x: hidden;
    overflow-y: auto;

    /* Children layout */
    display: flex;
    justify-content: center;
    padding: 20px;
    gap: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.contentHome {
    background: #c24545;
    border-radius: 10px;

    /* Children layout */
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    align-items: center;
}

.homeHeader {
    font-size: 26px;
    font-family: "Wendy One", sans-serif;
    color: white;
    text-shadow: 1.5px 1.5px 0px rgba(0, 0, 0, 0.5);
}

.contentHomeContainer {
    width: 100%;

    /* Children layout */
    display: flex;
    justify-content: center;
    padding: 20px;
    gap: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
}