/* 
@import url('https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&family=Square+Peg&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&family=Homemade+Apple&family=Square+Peg&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&family=Homemade+Apple&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Square+Peg&display=swap');
:root {
    /* greens */
    --light-green: #ABD7B7;
    --green: #DFEAD7;
    /* --font-green: #8ec29c;*/
    --font-green: #81b68f;
    --border-green: #A6B39D;
    --note-green: #E0E9D9;
    --fold-green: #cdd6c5;

    /* blues */
    --teal-blue: #4384A5;
    --light-border-blue: #1D5B7B;
    --border-blue: #154042;

    /* oranges */
    --light-orange: #DBA47E;
    --orange: #D78537;
    --burnt-orange: #753900;

    /* reds */
    --sunglass-red: #9A2F28;

    /* greys */
    --drop-shadow-grey: #818983; 
    --light-grey: #CACACA;

    /* highlights */
    --home-highlight: url("../images/stylistic/name_highlight.svg");
    --about-highlight: url("../images/stylistic/about_highlight.svg");
    --code-highlight: url("../images/stylistic/code_highlight.svg");
    --contact-highlight: url("../images/stylistic/contact_highlight.svg");
}

html{
    width: 100%;
    background-color: ivory;
}

body {
    height: 100%;
    font-family: 'Tinos', 'Times New Roman', serif;
    font-style: normal;
}

h1 {
    font-size: 40pt;
    font-family: 'Square Peg';
}

h2 {
    font-size: 40pt;
    font-family: 'Square Peg';
}

h3 {
    font-size: 30pt;
    font-family: 'Square Peg'; 
    /* add back up font */
}

p {
    font-size: 14pt;
    font-family: 'Tinos';
}

/* Nav Bar Styling */

nav {
    /* position: sticky; */
    top: 0px;
    z-index: 100;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    background-color: ivory;
    overflow: hidden;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

nav ul{
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-evenly;
    /* justify-content: flex-end; */
    list-style: none;
    /* gap; add spacing between list elements */
    margin-right: 5%;
    padding-inline-start: 10px;
}

nav a {
    color: var(--border-blue);
    font-size: 18pt;
    font-family: 'Homemade Apple';
    text-decoration: none;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    padding: 20px;
}

nav a.home-page-current{
    background-image: var(--home-highlight);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.home-page:hover{
    background-image: var(--home-highlight);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;   
}

nav a.about-page-current{
    background-image: var(--about-highlight);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.about-page:hover{
    background-image: var(--about-highlight);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
} 

nav a.code-page-current{
    background-image: var(--code-highlight);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.code-page:hover{
    color: var(--border-blue);
    background-image: var(--code-highlight);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
} 

nav a.contact-page-current{
    background-image: var(--contact-highlight);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.contact-page:hover{
    background-image: var(--contact-highlight);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
} 

/* Pending Page Styling */

.typed-container {
    position: absolute;
    margin-top: 13%;

    display: flex;
    justify-content: center;
    width: 90%;

}

.typed-text {
    font-family: 'IBM Plex Mono', Courier, monospace; 
    font-size: 14pt;
    color: #333;
    display: inline-block;
    /* letter-spacing: 1px; */
    border-right: 2px solid #333;
    padding-top: 0.1%;
    animation: blink 1s infinite;
    /* white-space-collapse: collapse; */
    /* text-wrap-mode: wrap; */
    text-align: justify;
    overflow: auto;
    max-width: 80%;
}

.typed-container::before {
    top: -5px;
    left: 15px;
    transform: rotate(-2deg);
}
  
.typed-container::after {
    bottom: -5px;
    right: 15px;
    transform: rotate(2deg);
}

@keyframes blink {
    0%, 100% { border-right-color: #333; }
    50% { border-right-color: transparent; }
}


/* Responsive Adjustments */

@media (max-width: 950px) {

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav a { 
        font-size: 13pt;
    }   

    .typed-container {
        margin-top: 13%;
    }

     .typed-text {
        border-right: none;
    }
}

@media (max-width: 775px) {

    .typed-container {
        margin-top: 15%;
    }

    .typed-text {
        font-size: 12pt;
        border-right: none;
    }
}

@media (max-width: 500px) {

    .typed-container {
        margin-top: 30%;
    }

    .typed-text {
        font-size: 12pt;
        border-right: none;
    }
}