/*
? @document-start
===================
| BASE CSS STYLES |
==================================================================================================================================

? @author:                 William J. Horn
? @document-name:          base.css
? @document-created:       03/24/2022
? @document-modified:      03/24/2022
? @document-version:       v1.0.0

==================================================================================================================================

? @document-info
==================
| ABOUT DOCUMENT |
==================================================================================================================================

Coming soon

==================================================================================================================================

? @document-changelog
======================
| DOCUMENT CHANGELOG |
==================================================================================================================================

Coming soon

==================================================================================================================================

? @document-todo
=================
| DOCUMENT TODO |
==================================================================================================================================

-   

==================================================================================================================================
*/

/* ---------------- */
/* Global Variables */
/* ---------------- */

:root {
    /* base text colors */
    --baseTextColor: #afafaf;
    --baseButtonTextColor: white;
    --baseInputTextColor: white;
    --baseLinkTextColor: white;
    --baseHeadingTextColor: white;

    /* base background colors */
    --basePageBackgroundColor: #303030;
    --baseButtonBackgroundColor: #616161;
    --baseInputBackgroundColor: #454545;

    /* default font size */
    --baseFontSize: 1.4rem; /* 1.4rem base */

    /* base fonts */
    --baseTextFont: monospace;
}

/* ------------------- */
/* Global Declarations */
/* ------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /* debug border */
    /* border: 1px solid red !important; */

    /* applied default text colors */
    color: var(--baseTextColor);

    /* applied default fonts */
    font-family: var(--baseTextFont); 
    /* font-family: 'Press Start 2P', cursive; */
    /* font-family: monospace; */
}

html {
    overflow: hidden;
}

p, a, li {
    font-size: var(--baseFontSize);
}

a {
    text-decoration: none;
    color: var(--baseLinkTextColor);
}

li {
    list-style: none;
}

/* all li children should automatically fill their parent */
li > * {
    width: 100%;
    height: 100%;
}

body {
    background-color: var(--basePageBackgroundColor);
}

h1, h2, h3, 
h4, h5, h6 {
    text-align: center;
    color: var(--baseHeadingTextColor);
    padding-bottom: 10px;
    font-size: calc(var(--baseFontSize) + 0.4rem);
}

h1 {
    font-size: calc(var(--baseFontSize) + 1.6rem);
    padding-bottom: 15px;
    padding-top: 15px;
}

button {
    border: none;
    padding: 5px 10px;
    background-color: var(--baseButtonBackgroundColor);
    color: var(--baseButtonTextColor);
    font-size: var(--baseFontSize);
    font-weight: 600;
}

label {
    font-size: 1.4rem;
}

input {
    border: none;
    color: var(--baseInputTextColor);
    background-color: var(--baseInputBackgroundColor);
    font-weight: 900;
    outline: none;
    padding: 5px;
    font-size: var(--baseFontSize);
    width: 100%;
}

::placeholder {
    color: #dcdcdc;
}