/* Constants */
:root {
    /* Theme */
    --accent-color: rgb(18, 82, 162);
    --accent-color-active: rgb(56, 111, 179);
    --accent-color-disabled: rgb(100, 100, 100);

    --accent-color-secondary: rgb(26, 153, 56);
    --accent-color-secondary-active: rgb(106, 187, 124);
    --accent-colorsecondary--disabled: rgb(120, 120, 120);

    --primary-color: white;
    --text-color: black;
    --text-color-secondary: rgb(75, 75, 75);
    --container-color: rgb(220, 220, 220);
    --container-color-active: rgb(235, 235, 235);

    --control-background-color: rgb(215, 215, 215);
    --control-background-color-first: rgb(205, 205, 205);
    --control-background-color-second: rgb(205, 205, 205);
    --control-background-color-third: rgb(195, 195, 195);
    --control-background-color-third: rgb(180, 180, 180);
    --control-background-color-fifth: rgb(170, 170, 170);

    --info: #0099ff;
    --success: #00ff55;
    --warning: #ffdd00;
    --error: #ff4455;

    /* Special */
    --container-color-blur: #BBBBBBCC;

    --nav-under-background: rgb(250, 250, 250);

    /* System */
    --content-width: 1500px;
    --content-padding-top: 1em;
    --content-padding-bottom: 1em;
    --content-padding: calc(var(--content-padding-top) + var(--content-padding-bottom));

    /* Nav */
    --nav-img-size: 32px;
    --nav-padding: 12px;
    --nav-height: calc(var(--nav-padding) + var(--nav-padding) /*+ 0px*/ + var(--nav-img-size)); /* Padding, border, image */
    --nav-offset: 4px;
    --nav-height-total: calc(var(--nav-height) + var(--nav-offset) + var(--nav-offset));

    --generic-background: #6e6e6e65;
    --generic-white-border: gainsboro;

    /* Scrollbar */
    --scrollbar-width: 10px;
    --scrollbar-track-color: rgba(175, 175, 175, 0.5); 
    --scrollbar-color: rgb(75, 65, 95); 

    /* While these cannot be used in code, they are here for refrence */
    --medium-screen-value: 688px;
    --small-screen-value: 468px;
}

/* Global */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', Arial, sans-serif;
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 10px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

body { 
    font-weight: 500;
    color: var(--text-color);
    background-color: var(--primary-color);

    overflow: overlay;
}

a {
    color: var(--accent-color);
    font-weight: 700;

    border-bottom: 5px;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
a:active, a:hover {
    color: var(--accent-color-active);

    background-size: 100% 0.1em, 100% 0.1em;
    text-decoration: none;
}

hr {
    border: 1px solid #b8b8b8; 
    margin: 20px 0; 
}

button {
    outline: none;
}

a, button, select, textarea {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.178);
}

/* Utils */
.visible { opacity: 1; }
.invisible { opacity: 0; }

.hide { display: none; }

/* Page container */
.content-wrapper-container,
#page-contain {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

    width: inherit;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-contain {
    min-height: 80vh; /* generic so there is no blank space */
}

/* Content wrapper */
.content-wrapper-basic,
.content-wrapper {
    overflow-x: hidden;
    box-sizing: border-box;

    padding: 40px;

    width: calc(100vw - var(--scrollbar-width));

    padding-top: var(--content-padding-top);
    padding-bottom: var(--content-padding-bottom);

    /* For smaller screens, reduce padding to just 1em */
    @media screen and (max-width: 468px) {
        padding-left: 15px;
        padding-right: 15px;
        width: calc(100vw - 10px);
    }
}
.content-wrapper {
    max-width: var(--content-width);
}

.page-contain-background {
    /* background:
        linear-gradient(
        217deg,
        rgba(220, 50, 50, 0.75),
        rgba(255, 40, 40, 0.6),
        rgba(255, 0, 0, 0) 70.71%
        ),
        linear-gradient(
        127deg,
        rgba(210, 140, 60, 0.75),
        rgba(225, 190, 80, 0.6),
        rgba(210, 140, 60, 0) 70.71%
        ),
        linear-gradient(
        336deg,
        rgba(0, 255, 255, 0.85),
        rgba(0, 210, 255, 0.6),
        rgba(0, 255, 255, 0) 70.71%
        ); */
    background-color: var(--container-color-active);

    top: 0px;
    min-height: 100vh !important;

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.page-contain-background > * {
    position: relative;
    z-index: 1;
}


/* Headings */
.heading {
    font-size: 1.25em;
    text-align: left;
    font-weight: 700;
}
.category-heading {
    font-size: 1.5em;
    text-align: left;
    margin-top: 2em;
}
.centered-header {
    text-align: center;
    font-size: 2em;
    text-decoration: none;
}

/* Content & Text */
.content-text {
    font-size: 1em;
}
.subcontent-text {
    font-size: 1em;
    font-weight: 300;
}
.highlight-text { /* Make text have a rounded rectange under it */
    background-color: rgb(157, 204, 212, 0.75);
    border-radius: .25em;
    padding-left: .25em;
    padding-right: .25em;
}
.accent-color-text {
    color: var(--accent-color)
}
/* Password input styles */
.password-text {
    -webkit-text-security: disc;
   /*  text-security: disc; */
    /* fallback for browsers that don't support text-security */
    font-family: 'text-security-disc', 'Lato', Arial, sans-serif;
}

/* Horizonta scrollable text box */
.scroll-textbox {
    background-color: #a5a5a5ad;
    border-radius: 1em;
    padding: 1em;

    max-width: 70vw;
    max-height: 20em;
    overflow: scroll;
}

/* List */
.formatted-list li {
    padding: .1em;
}

/* Tag list */
#tag-list {
    list-style-type: none;
    padding: 0px;
}

#tag-list li {
    margin-top: 3px;
    background-color: var(--generic-background);
    padding: 5px;
    border-radius: 1em;
    margin: none;
    display: inline-block;
    margin-right: 10px;
}


/* Scroll up button */
#scrollup-button {
    position: fixed;

    cursor: pointer;
    box-shadow: 0px 0px 1px 0px var(--text-color);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;

    right: 20px;
    bottom: 40px;
    
    background-color: var(--container-color-active);
    border-radius: 0px;

    width: 55px;
    height: 55px;

    transition: all .2s ease-in-out;
}

/* Loader */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loader {
    border: 16px solid rgba(50, 100, 255, 1);
    
    border-top: 16px solid #f3f3f3;

    border-radius: 50%;
    max-width: 65px; min-width: 65px;
    max-height: 65px; min-height: 65px;
    animation: spin 1s linear infinite;
}
.loader-mini {
    border: 6px solid rgba(50, 100, 255, 1);
    
    border-top: 6px solid #f3f3f3;

    border-radius: 50%;
    max-width: 25px; min-width: 25px;
    max-height: 25px; min-height: 25px;
    animation: spin 1s linear infinite;
}

/* Device specific content */
@media screen and (min-width: 688px) {
.content-mobile {display: none !important;}
}

@media screen and (max-width: 688px) {
.content-desktop {display: none !important;}
}

@media screen and (min-width: 688px) {
.content-mobile {display: none !important;}
}

@media screen and (max-width: 688px) {
.content-desktop {display: none !important;}
}