/* TODO define light and dark mode styles */
/* default is dark mode */

/* general styles */
*{
    box-sizing: border-box;
}
html{
    height: 100%;
    scroll-behavior: smooth;
}
body{
    margin: 0;
    padding-bottom: 16px;
    min-height: 100%;
    color: #e8e8e8;
    overflow: scroll;
}

/* font + size */
header, footer{
    font-family: "Hubot Sans", sans-serif;
    font-style: normal;
    font-size: 1.1em;
}
body{
    font-family: "Ubuntu Mono", sans-serif;
    font-style: normal;
    font-size: 1.15em;
}
h2 { font-size: 1.45em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.15em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.85em; }

/* hyperlinks */
a { 
    display: inline-block;
    color: #e6e6e6; 
}
a:visited { 
    color: #e6e6e6; 
}
a:hover { 
    color: #008000; 
    text-decoration: underline;
    transform:scale(1.05);
    transform-origin: center;
}


/* background colors*/
body { background-color: #1f1f1f; }
.content, header, footer { background-color: #040404; }

/* all content should be centered single-column */
header, .content, footer{
    align-self: center;
    margin: 0 auto;
    padding: 1em 3em;
    width: 85%;
    min-width: 1000px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    text-align: start;
}
header{
    position: relative;
    margin-top: 16px;
    padding-top: 1.5em;
    padding-bottom: 1em;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
footer{
    position: relative;
    padding-top: 1.5em;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
/* forms */
button, input, select, textarea{
    font-family: inherit;
    font-size: 100%;
}
input, select, textarea{
    width: 150px;
    padding: 0;
    margin: 0;
}
label{
    background-color: #040404;
    color: #e8e8e8;
}
button{
    background-color: #0C0C0C;
    color:#e8e8e8;
    border: none;
    border-radius: 8px;
    font-size: .8em;
    padding: 0.33em 0.66em;
    box-shadow: none;
    cursor: pointer;
}


button:hover{
    background-color: #1e1e1e;
    transform: scale(1.05);

}
/* navbar */
.navbar{
	display: flex;
    justify-content: space-between;
}
.navbar-links{
	display: flex;
    gap: 2em;
    align-self: center;
    font-size: 1.2em;
}
#site-logo{
    height: 84px;
    width: auto;
    transition: filter 0.3s ease;
}
/* easter egg */
#site-logo-anchor{ cursor: help; }
#site-logo-anchor:hover #site-logo, #site-logo-anchor:hover #site-logo{
    filter: drop-shadow(0 0 8px rgba(238, 238, 238, 0.3))
           drop-shadow(0 0 16px rgba(238, 238, 238, 0.1));
}

/* nice breathing glow animation for the bottom of the navbar */
/* thank you chat */
header::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg, 
        transparent, 
        #006900,
        #00C000,
        #006900,
        transparent 
    );

    background-size: 200% 100%;
    animation: flow 8s linear infinite, breathe 4s ease-in-out infinite;
}

/* intro + site overview */
.intro-container{
    display: flex;
    align-items: stretch;
    gap: 2em;
    padding: 1em 0;
    margin: 1em 0;
}
.intro-subcontainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    align-self: center;
    margin: 0;
}
.intro-subcontainer > *{
    margin: 0.33em;
}
#headshot{
    height: 100%;
    width: auto;
    max-width: calc(5.5 * 64px);
    background-color: #f8f7f7;
    border-radius: 16px;
}
.hello-box{
    display: flex;
    align-items: center;
    /* need a fixed height or the animation messes with it */
    height: 48px; 
}
.hello-cycle-text{
    display: inline-block;
    position: relative;
    color: white;
    font-family: monospace;
    font-size: 2.5em;
}
.hello-cycle-text:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: #040404;
    border-left: 2px solid lightgrey;
    animation: type 3s steps(12) infinite; 
}

/* main content styles */
.body-section{
    margin: 2em 0;
}
.body-section:first-child{
    margin-top: 0;
}
.body-section:last-child{
    margin-bottom: 0;
}
.page-subheader, .section-header{
    animation: glow 8s ease-in-out infinite;
}
.body-section p{
    margin: 1.5em 0; 
    margin-left: 2em;
    line-height: 1.6em;
    max-width: 92%;
}
.bio-list p {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    margin-left: 4.5em;
    max-width: 82%;
    /* hacky but it works */
    padding-left: 2em;
    text-indent: -1.5em;
}
.bio-list p:first-child{
    /* hacky but it works */
    margin-top: -1em;
}
.bio-list p:last-child{
    margin-bottom: 2em;
}

/* pseudo lists */
.li-prefix, .sub-li-prefix{
    margin-right: 0.66em;
}
.li-prefix{
    font-size: 1em;
    color: #008000;
}
.sub-li-prefix{
    font-size: 0.8em;
    color: #008000;
}

/* subpage styles */
/* subpage as in..not the root page */
.header-container{
    margin-bottom: 0;
}
.page-header, .section-header{
    margin-bottom: 0;
}
.page-subheader, .section-subheader{
    margin-top: 0.5em;
    margin-left: 0.75em;
}
.page-header, .section-subheader{
    animation: none;
}
.section-subheader{
    opacity: 0.5;
}
.subpage-section{
    position: relative;
    margin: 3em 0;
    overflow-y: auto;
    scrollbar-width: none;
}
.scrollable{
    max-height: 800px;
    overflow-y: auto;
    scrollbar-width: none;
}
/* nice gradient to indicate a section on a subpage is scrollable */
/* had to use chat for this too */
/* TODO add JS to toggle scrollability when the height of the element exceeds the max height */
.subpage-section.is-scrollable {
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 85%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 85%,
        transparent 100%
    );
}
.subpage-section:first-child{
    margin-bottom: -3em;
}
.subpage-section:last-of-type{
    /* add an extra em between the last list item on the page and the footer */
    margin-bottom: 3em;
}
/* lists with less spacing, usually used on subpages */
.compact-list p{
    margin: .25em 0; 
    margin-left: 2em;
    max-width: 92%;
    font-size: 0.95em;
}
.compact-list .li-prefix{
    margin-right: 1em;
}
.compact-list p:first-of-type{
    /* hacky but it works */
    margin-top: -1em;
}

/* quick links section */
#quick-links-intro-anchor:hover{
    transform: none;
    color:#008000;
}
#quick-links{
    margin: 2em 0;
}
.quick-links-list p{
    line-height: 0.6em;
}

/* footer styles */
footer {
    position: relative;
    font-size: 1rem;
}
footer::after{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg, 
        transparent, 
        #006900,
        #008000,
        #006900,
        transparent 
    );

    background-size: 200% 100%;
    animation: flow 8s linear infinite, breathe 4s ease-in-out infinite;
    animation-delay: calc(750ms);
}
footer > *{
    margin: 0;
    text-align: left;
    align-items: end;
}
footer:first-child{
    margin-top: 16px 0;
}
footer:last-child{
    margin-bottom: 0 200px;;
}
.footer-links{
    display: flex;
    gap: 2em;
    align-self: start;
    align-items: center;
}
.footer-links a:hover{
    transform: scale(1.05);
}
.site-meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* i don't really like using negative margin, but it works */
    margin-top: -1em;
}
.copyright, .last-updated{
    opacity: 0.6;
}

.data-anchor{
    margin: 0 0.2em;
}
/* /quotes styles */
.quote-box{
    width: 90%;
    margin-bottom: 20px;
    padding: 5px 0;
    border-radius: 20px;
    font-weight: bolder;
}
.button-box{
    width: 90%;
    margin-left: 2em;
}

.contact-form-container{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    padding: 2em 0;
}

.project-description{
    margin: 2em 0;
}

.data-anchor{
    text-decoration-thickness: 1px;
}


/* contact form */
.contact-form{
    width: 90%;
    margin-left: 2em;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}
.contact-form label {
    font-size: 0.8em;
    font-weight: 600;
    margin-bottom: -0.6em;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.6em 0.8em;
    background-color: #0c0c0c;
    color: #e8e8e8;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    font-size: 0.9em;
}
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #008000;
    box-shadow: 0 0 6px rgba(0, 128, 0, 0.25);
}
.contact-form button {
    align-self: flex-start;
    margin-top: 0.5em;
    padding: 0.5em 1em;
    background-color: #0c0c0c;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    font-size: 0.85em;
}
.contact-form button:hover {
    border-color: #008000;
    box-shadow: 0 0 6px rgba(0, 128, 0, 0.25);
}

/* animations */
@keyframes type{
    0%{
        width: 100%;
    }
    30%, 70%{
        width: 0%;
    }
    100%{
        width: 100%;
    }

}
@keyframes breathe {
    0%, 100%{
        opacity: 0.4;
        filter: blur(0.5px);
    }
    50%{
        opacity: 1;
        filter: blur(1.5px);
    }
}
@keyframes flow{
    0% { 
        background-position: 100% 50%;
    }
    100%{ 
        background-position: -100% 50%;
    }
}
@keyframes glow {
    0%{
        text-shadow: 0 0 6px rgba(232, 232, 232, 0.05);
    }
    35%{
        text-shadow: 0 0 6px rgba(232, 232, 232, 0.2);
    }
    55%{
        text-shadow: 0 0 6px rgba(232, 232, 232, 0.35)
    }
    70%{
        text-shadow: 0 0 6px rgba(232, 232, 232, 0.2);
    }
    100%{
        text-shadow: 0 0 6px rgba(232, 232, 232, 0.05);
    }
}


/* fade-in animation for home page */
#home-navbar, .home-footer{
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}
#headshot {
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.2s forwards;
}
#hello-cycler {
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.4s forwards;
}
.bio, #quick-links{
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.6s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*TODO can deal with the transparent background not matching with the border of the headshot by just keeping the background transparent
 * but instead use a separate background color for the picture. e.g. if the site background is #000000, the pic background might be like #040404 or something
 * play around with it and see what you can do. it's a little to jarring using the default picture background on dark mode, but using just a transparent
 * pic also looks kinda weird. try to make it nice on the eyes */

/* TODO  for /quotes, .add a nice swipe animation that either rolls vertically, or just moves to the next quote smoothly */

/* TODO replace the photo on the home page */

/* TODO fix the padding/margin on the left for all elements. should be on the same vertical imaginary line, with the footer taking up the entirety of the bottom. */

/* TODO Generally just make sure the site is responsive for all screen sizes, accessible, etc etc. */

/* TODO add collapsibles to subsections in relevant subpages e.g chess, writing, etc

/* TODO might be a good idea to add some subheaders to each of the page sections? gives me some space for commenatary*/

/* TODO make sure you style the page subheaders as well...should be an indent */
/* TODO add a lightbulb asset that user can click on to toggle from dark <--> light
should be static, so maybe stick it to the top right and dim the opacity 50% or so. */

/* TODO make the site logo an anchor to an easter egg */