/* Main Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hidden Class */
.hidden {
    display: none !important;
}

/* Padding (slight for text / icons stops cutoffs with text shadow) */
i, p, h1, h2, h3, h4 { 
    padding: 2px; 
}

a {
    color: var(--accent);
    text-decoration: none; 
    font-family: var(--text_font);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent2);
}

a:visited {
    color: var(--accent);
}

a:active {
    color: var(--accent2);
}

h1 {
    color: var(--accent);
    font-size: 1.5rem;
    font-family: var(--header_font);
    text-shadow: var(--text_shadow_lower);
}

h2 {
    color: var(--accent);
    text-align: center;
    font-size: 1.75rem;
    font-family: var(--header_font);
    text-shadow: var(--text_shadow_lower);
    margin-top: 1.5vh;
    text-transform: uppercase;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 0.5vh;
    height: 0.5vh;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar_track);
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
}

::-webkit-scrollbar-corner {
    background: var(--scrollbar_track);
}


/* Focus */
textarea:focus,
input:focus,
button:focus {
    outline: none;
}

/* Inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#app {
    min-height: 100vh;
    width: 100vw;
    background: var(--background_main);
    display: flex;
    flex-direction: column;
}


#main_header,
#main_content,
#main_footer { 
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main_header {
    background: var(--background_main);
    box-shadow: var(--shadow_large)
}

#main_footer {
    background: var(--background_main);
    border-top: var(--border_dark);
}

#main_content {
    flex-direction: column;
    justify-content: flex-start;
    padding: 2vh 0;
}

#tool_window,
#about_info,
#hero_section,
#brand_pillars {
    width: 80%;
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    font-family: var(--text_font);
}

#brand_pillars {
    margin-top: -2vh;
}

.tiles {
    width: 80%;
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    font-family: var(--text_font);
    flex-direction: column;
    margin-top: 2vh;
    border-top: var(--border_dark);
}

.tiles.top {
    border: none;
    margin-top: -1vh;
}

#about_info {
    padding: 2vh;
}


/* Responsive Brackets */
@media (min-width: 768px) {
    h2 {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }
}