/*
Base.css

Description:
Contains information about website resets, typography and spacing.
-------------------------------------------------------------------------
*/

/* 
-----------------------------------------
Global CSS Variables
-----------------------------------------
Description:

*/
:root {
    /* Common Theme Variables */
    --font-body: 'Times New Roman', Times, serif;
    --font-size-body: 14px;
    --font-heading: 'Times New Roman', Times, serif;
    --font-heading-size: 24px;
    --radius: 6px;
    /* Default Color Scheme */
    --bg: #ffffff;
    --primary-text-color: #000000;
    --contrast-color: #ffffff;
    --image-placeholder-color: #A6B0D2;
    --highlight-1: #096D28;
    --text-group-1: #63A0D7;
    --text-group-2: #A0C6E8;
    --text-group-3: #B7CDB7;
    --text-group-4: #263626;
    --text-underline-1: #ED7C2F;
    --hyperlink-color: #0000FF;
    --hyperlink-when-pressed: #FF0000;
    --hyperlink-when-visited: #800080;
    /* Opposite Color Scheme */
    --op-bg: #151A29;
    --op-primary-text-color: #ffffff;
    --op-contrast-color: #000000;
    --op-image-placeholder-color: #C2C9E0;
    --op-highlight-1: #59F28A;
    --op-text-group-1: #5B9BD5;
    --op-text-group-2: #183D5E;
    --op-text-group-3: #B7CDB7;
    --op-text-group-4: #263626;
    --op-text-underline-1: #A24A0E;
    --op-hyperlink-color: #40abe9;
    --op-hyperlink-when-pressed: #ad8282;
    --op-hyperlink-when-visited: #cb9fcb;
}

html, body, * {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        fill 0.3s ease,
        stroke 0.3s ease;
}

/*
-----------------------------------------------------------
CSS Class 'html-tag-class'
Applicable HTML Tags:
- html

Note
This is for settings applied to the highest level on a page
-----------------------------------------------------------
*/
.html-tag-class {
    background: var(--bg);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--primary-text-color);
}

/*
-----------------------------------------------------------
CSS Class 'a-tag-class'
Applicable HTML Tags:
- a
-----------------------------------------------------------
*/
.a-tag-class:link {
  color: var(--hyperlink-color);
  text-decoration: underline dotted;
}

/* Visited link */
.a-tag-class:visited {
  color: var(--hyperlink-when-visited);
}

/* While the link is being clicked (Pressed) */
.a-tag-class:active {
  color: var(--hyperlink-when-pressed);
}

/* Hover state (Optional, but standard for UX) */
.a-tag-class:hover {
  text-decoration: underline;
}
/*---------- end ------------------------------------------*/

/*
-----------------------------------------------------------
CSS Class 'Horizontal lines'
Applicable HTML Tags:
- div
-----------------------------------------------------------
*/
.hz-line-outer {
    /* Defines the width as a percentage of the parent container */
    width: 80%;
    /* Sets the height of the div to be a thin line */
    height: 0px;
    /* Creates the visible line using a top border */
    border-top: 1px solid var(--primary-text-color);
    /* Centers the div horizontally within its parent container */
    margin-left: auto;
    margin-right: auto;
    /* Optional: Adds some vertical spacing around the line */
    margin-top: 20px;
    margin-bottom: 20px;
}

/*---------- end ------------------------------------------*/

/*
-----------------------------------------------------------
CSS Class 'Theme Button Toggle'
Applicable HTML Tags:
- div
-----------------------------------------------------------
*/
.div-tag-dark-mode {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--op-bg);
    color: var(--op-primary-text-color);
    border: 5px solid var(--op-bg);
    border-radius: 40px;
    padding: 1px 10px;
    cursor: pointer;
}

/*---------- end ------------------------------------------*/


/*
-----------------------------------------------------------
CSS Class 'Website Title'
Applicable HTML Tags:
- div
-----------------------------------------------------------
*/
.div-tag-title {
    font-size: 48pt;
    font-family: 'Times New Roman', Times, serif;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Optional: for vertical spacing */
    margin-top: 40px;
}

/*---------- end ------------------------------------------*/

/*
-----------------------------------------------------------
CSS Class 'Website Not Found 404 Error'
Applicable HTML Tags:
- div
-----------------------------------------------------------
*/
.div-tag-body-title {
    font-size: 48pt;
    font-family: 'Times New Roman', Times, serif;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Optional: for vertical spacing */
    margin-top: 40px;
}

.div-tag-body-text {
    font-size: 18pt;
    font-family: 'Times New Roman', Times, serif;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    /* Optional: for vertical spacing */
    margin-top: 2px;
    position: center;
}

.div-tag-body-date {
    display: inline;
    font-style: italic;
    text-decoration: underline;
}

/*---------- end ------------------------------------------*/

/*
-----------------------------------------------------------
CSS Class 'Website Not Found 404 Error'
Applicable HTML Tags:
- div
-----------------------------------------------------------
*/
.div-tag-nf-title {
    font-size: 48pt;
    font-family: 'Times New Roman', Times, serif;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Optional: for vertical spacing */
    margin-top: 40px;
}

.div-tag-nf-text {
    font-size: 18pt;
    font-family: 'Times New Roman', Times, serif;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Optional: for vertical spacing */
    margin-top: 40px;
}

.div-tag-nf-link {
    font-size: 12pt;
    font-family: 'Times New Roman', Times, serif;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Optional: for vertical spacing */
    margin-top: 5px;
}
/*---------- end ------------------------------------------*/


/*
-----------------------------------------------------------
CSS Class 'Heart Graphic'
Applicable HTML Tags:
- div
-----------------------------------------------------------
*/
/* Centering container for heart graphics */
.heart-container {
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center; /* vertical center within the container */
    width: 100%;
    padding: 12px 0; /* optional spacing */
}

.heart {
    position: relative;
    width: 60px;
    height: 54px;
    background: red;
    display: inline-block;
    transform: rotate(-45deg);
    margin: 20px;
}

    .heart::before,
    .heart::after {
        content: "";
        position: absolute;
        width: 60px;
        height: 54px;
        background: red;
        border-radius: 50%;
    }

    .heart::before {
        top: -30px;
        left: 0;
    }

    .heart::after {
        left: 30px;
        top: 0;
    }
/*---------- end ------------------------------------------*/