/*

:root {
    --primaryColor: #F59E0B;
    --secondaryColor: #6C63FF;
    --tertiaryColor: #10B981;
    --lightGray: #F8FAFC ;
    --mediumGray: #D1D5DB;
    --darkGray: #36454F;
    --white: #FFFFFF ;
    --black: #374151 ;
    --headers: 'Poppins';
    --text: 'Roboto';
    --accent: 'Playfair Display';
    --button: 'Montserrat';
}

*/

:root {
    --primaryColor:  #F4B400;
    --secondaryColor: #007BFF;
    --white: #F9F9F9;
    --mediumGray: #B0B0B0;
    --darkGray: #1C1C1C;
    --headers: 'Poppins';
    --button: 'Montserrat';
    --accent: 'Source Code Pro';
    --text: 'Roboto';
}

/*Boiler Plate CSS*/

* {
    border: none; padding: 0; margin: 0; 
    box-sizing: border-box;
    font-size: 16px;
}

body {
    background-image: linear-gradient(to bottom right, #1C1C1C, black, #1C1C1C);;
}

header {
    margin: 0 1.3rem;
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 5px solid var(--primaryColor);
    border-radius: 10px;
}

h1, h2, h3 {
    font-weight:600;
    font-family: var(--headers), serif;
}

h1 {
    letter-spacing: .3rem;
    font-size: 3rem;
    text-align: center;
}

h2 {
    text-align: center;
    font-size: 2rem;
} 

h3 {
    font-size: 1.5rem;
}

a {
    font-weight: 500;
    text-decoration: none;
    font-family: var(--button), serif;
}

p {
    font-size: 1rem;
    font-family: var(--text), serif;
}

ul * {
    color: var(--darkGray);
}

ul {
    margin: 4rem 1rem;
}

ul li {
    margin: 3rem 0rem;
}

.flexContainer {
    display: flex;
    height: 80vh;
    margin: 2.5vh;
}

.flexChild {
    max-width: 50%;
    flex-grow: 1;
    margin: 1.5rem;
    border-radius: 20px;
}

.flexChild > h2 {
    line-height: 6rem;
    border-bottom: 5px solid var(--darkGray);
    border-radius: 10px;
}

footer {
    color: var(--primaryColor);
    line-height: 2rem;
    margin: 1rem;
    text-align: center;
    font-size: 1.2rem;
    font-family: var(--accent), serif;
}

/*Specific Element CSS For Directory HomePage*/

.flexChild-1 {
    padding: 0rem 3rem;
    background-color: var(--primaryColor);
}

.flexChild-1 * {
    color: var(--darkGray);
}

.flexChild-2 {
    padding: 0rem 3rem;
    border: 5px solid var(--secondaryColor);
}

.flexChild-2 > h2 {
    border-bottom: 5px solid var(--secondaryColor);
}

.flexChild-2 * {
    color: var(--secondaryColor);
}

.flexChild-2 > .flexContainer {
    background-color: var(--secondaryColor);
    border-radius: 20px;
    max-height: 55vh;
}

.flexChild-2 > .flexContainer > .flexChild {
    flex-grow: 1;
}

.flexChild-2 a {
    text-align: center;
    display: block;
    margin: 1.5rem 0;
    color: var(--darkGray);
    font-size: 1.1rem;
}

header * {
    flex-grow: 1; 
}

header > h1 {
    font-size: 2.5rem;
    color: var(--primaryColor)
}

header > a {
    font-weight: 500;
    text-align: center;
    padding: 1rem;
    font-size: 1.5rem;
    color: var(--secondaryColor)
}

a:hover {
    color: var(--primaryColor)
}

header > a:nth-child(2) {
    margin-left: 5rem;
}

/*Specific Screen Size CSS*/

@media (max-width: 700px) {
* {
    font-size: 8px;
}

header h1 {
    font-size: 1.3rem;
}

header h2 {
    font-size: .9rem;
}

header > a:nth-child(2) {
    margin-left: 1rem;
}

.flexContainer {
    flex-direction: column;
    height: 140vh;
}

.flexChild {
    margin-bottom: 5vh;
    max-width: 100%;
    max-height: 60vh;
}

.flexChild-2 > .flexContainer {
    max-height: 45vh;
    flex-direction: row;
} 

}