html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* reset end */

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat/Montserrat-VariableFont_wght.woff2') format('woff2');
    font-display: swap;
}

/* fade animation */
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* fadeout animation for preloader */
@keyframes fadeoutandmove {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 0;
        transform: translateX(0);
    }
    51% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

:root {
    /* light */
    --background-color: #f8eade;
    --text-color: #280e12;
    --text-shadow-color: #280e12;
    --primary-color: #eccb5f;
    --secondary-color: #f3d4be;
    --secondary-color-half-opacity: #f3d4becc;
    --accent-color: #75152a;
    --shadow-color: 29deg 21% 57%;
    --brightness: 100%;
    /* transition variable to graduate the change, starts at 0ms to then be changed to 400ms when slider is pressed. This is to prevent the background from starting at white before going to the default background colour due to the transition being loaded at start*/
    --global-transition: 0ms;
    /* for typewriter effect*/
    --typewriterSpeed: 2s;
    --typewriterCharacters: /* inserted through js */;
    }

/* font is applied directly to buttons because going through the body tag doesn't seem to work */
button {
    font-family: 'Montserrat', sans-serif;
}

body {
    color: var(--text-color);
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--background-color);
    transition: var(--global-transition);
    margin: 10px;
}

h1 {
    font-weight: 600;
    font-size: 3rem;
}

p {
    font-size: 1rem;
    line-height: 1.5;
}

h5 {
    line-height: 1.5;
}

/* preloader */

#content {
    display: none;
}

#preloaderWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    position: fixed;
    top: 0;
    left: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    /* 200s animation is changed to 2s default when page is ready, to avoid flash of preloader when internet is fast */
    animation: fadeoutandmove 200s ease-in forwards;
}

#preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotate 1.5s ease-in-out infinite;
    width: 120px;
    height: 120px;
    padding: 15px;
    border-radius: 100px;
    border: solid 2px black;
    background-color: var(--primary-color);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
  
@keyframes shiftUpDown {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateY(-10%);
    }
}

#landingPageFullName {
    text-align: center;
    max-width: fit-content;
    /* flex: 1; allows the text in the container to wrap */
    flex: 1; 
    user-select: none;
}

#fullName {
    margin-bottom: 10px;
    opacity: 0;
    animation-name: fade;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

#logline {
    font-size: 2em;
    opacity: 0;
    animation-name: fade;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

#landingPage {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin: 2rem;
}

#landingPageImage {
    max-width: 85vw;
    max-height: 90vh;
    border-radius: 200px;
    opacity: 0;
    animation-name: fade;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    border: solid 10px var(--secondary-color);
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
    transition: var(--global-transition)
}

#landingPage2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 25rem;
    margin-bottom: 25rem;
    font-size: 2.5rem;
}

#aboutMeText {
    font-size: 1.5rem;
    text-align: center;
    max-width: 550px;
}

/* highlight color and skew for 'sophie' in text 'call me sophie */
mark {
    --mark-color: var(--primary-color);
    --mark-skew: 0.25rem;
    --mark-height: 1rem;
    /* --mark-overlap: 0.1rem; */
    
    margin-inline: calc(var(--mark-overlap) * -1);
    padding-inline: var(--mark-overlap);
    background-color: transparent;
    color: var(--text-color);
    background-image:
        linear-gradient(
            to bottom right,
            transparent 50%,
            var(--primary-color) 50% 100%
        ),
        linear-gradient(
            to right,
            var(--primary-color),
            var(--primary-color)
        ),
        linear-gradient(
            to top left,
            transparent 50%,
            var(--primary-color) 50%
        );
    background-size:
        0em 0em,
        0% 0em,
        0em 0em;
    background-position:
        left center,
        left center,
        left center;
    background-repeat: 
        no-repeat;
    animation: highlight 1s ease-in forwards 2.5s;
    animation-play-state: paused;
    text-shadow: 
    0px 0px 0 var(--background-color),  
    0px 0px 0 var(--background-color),
    0px  0px 0 var(--background-color),
    3px  3px 0 var(--background-color);
  }

/* highlight animation from left to right */
@keyframes highlight {
0% {
    background-size:
    0em 0em,
    0% 1em,
    0em 0em;
}
100% {
    background-size:
    0.25em 1em,
    5em 1em,
    0.25em 1em;
    }
}

/* call me sophie text. initially starts as hidden until page is scrolled down */
#justSophie {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    white-space: pre-wrap;
    font-family: "Source Sans Pro", monospace; /* monospace required for typewriter effect to work */
    opacity: 0; /* to prevent flashing */
    position: relative;
    max-width: max-content;
    user-select: none;
    margin-bottom: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 4rem;
}

#smiley2, #aboutMeText {
    transform: translateY(60px);
    opacity: 0;
    margin-bottom: 20px;
}

/* for smiley */
.animateUp {
    animation:
        fadeInUp 3s ease-in-out forwards;
}

@keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

/* for justsophie text */
.animate::before,
.animate::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* for justsophie text */
.animate::before {
  background: var(--background-color);
  animation: 
    typewriter var(--typewriterSpeed)
    steps(var(--typewriterCharacters)) .1s forwards;
}
/* for justsophie text */
.animate::after {
  width: 0.125em;
  background: var(--text-color);
  animation: 
    typewriter var(--typewriterSpeed)
    steps(var(--typewriterCharacters)) .1s forwards,
    blink 750ms steps(var(--typewriterCharacters)) infinite;
    animation-play-state: running;
}

@keyframes typewriter {
  to {
    left: 100%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

#landingPage3 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 90vh;
    gap: 5px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.navButtonContainers {
    position: relative;
    height: 85vh;
    width: 530px;
    border-radius: 75px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1000ms ease-in;
    filter: brightness(var(--brightness));
    border: solid 5px var(--secondary-color);
    cursor: pointer;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

.navButtons:focus-visible {
    font-size: 2.25rem;
    text-shadow: var(--text-shadow-color) 1px 0 10px;
    color: var(--primary-color);
    opacity: 100%;
}

.linkImages {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    filter: saturate(75%);
    object-fit: cover;
    transition: filter 0.5 ease;
}

.buttonContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    text-align: center;
}

.navButtons {
    max-width: 400px;
    font-size: 2rem;
    transition: font-size 0.5s ease;
    background-color: transparent;
    border: none;
    text-shadow: var(--text-shadow-color) 1px 0 10px;
    color: #f3d4be;
    outline: 1px;
    opacity: 70%;
}

.nondragable {
    user-select: none;
    -webkit-user-drag: none;
}

/* when navbuttoncontainers are hovered over, it enlarges the text of the buttons (.navbuttons). The saturation and playing of the video is handled in JS */
.navButtonContainers:hover .navButtons {
    font-size: 2.25rem;
    text-shadow: var(--text-shadow-color) 1px 0 10px;
    color: var(--primary-color);
    opacity: 100%;
}

#writingLinkVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.4);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    filter: saturate(75%);
    transition: filter 0.5 ease;
}

#voiceLinkVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    filter: saturate(75%);
    filter: brightness(100%);
    transition: filter 0.5 ease;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--secondary-color);
    border-radius: 50px;
    margin: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

footer p {
    max-width: 300px;
    text-align: center;
    margin: 10px;
    font-size: 0.65rem;
}

/* to ensure use in portrait mode on mobile */
#warningMessage { 
    display: none; 
    font-family: 'Montserrat', sans-serif;
}

@media only screen and (max-height: 412px) and (orientation:landscape) {
    /* #wrapper {  */
        /* display: none;  */
    /* } */

    #warningMessage { 
        display: flex; 
        /* position: fixed; */
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        margin: 26vh;
        background-color: var(--background-color);
        text-align: center;
    }
}

/* ensure warning text in portrait mode on mobile */
@media only screen and (orientation:portrait) {
    #warningMessage { 
        display: none;
    }
}

@media screen and (max-width: 340px) {
    #justSophie {
        font-size: 3rem;
    }

    #aboutMeText {
        font-size: 1rem;
    }
}

/* for small screens */
@media screen and (max-width: 450px) {

    /* pushes landing page image down so hamburger menu doesn't overlap */
    #landingPage {
        margin: 5rem;
    }

    /* turns three different segments at the bottom to be stacked above and below rather than side by side */
    #landingPage3 {
        flex-direction: column;
        gap: 1rem;
    }

    /* changes their size */
    .navButtonContainers {
        max-width: 85vw;
        width: 300px;
        max-height: 280px;
        border-radius: 50px;
        transition: var(--global-transition)
    }

    /* keeps them fully saturated and images resized */
    #voiceLinkVideo {
        transform: translate(-50%, -47%) scale(.5);
        filter: brightness(100%);
    }

    #writingLinkVideo  {
        transform: translate(-50%, -50%) scale(.15);
        filter: brightness(100%);
    }

    .linkImages {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(100%);
    }

    /* changes their font */
    .navButtons {
        font-size: 1.75rem;
    }

    .navButtonContainers:hover .navButtons {
        font-size: 2rem;
    }

    /* for justsophie text */
    .animate::before {
        background: var(--background-color);
        animation: 
        typewriter var(--typewriterSpeed)
        steps(var(--typewriterCharacters)) 1s forwards;
    }

    /* for justsophie text PAUSED */
    .animate::after {
        width: 0em;
        animation-play-state: paused;
    }
}

@media screen and (min-width: 451px) and (max-width: 760px) {
    /* turns three different segments at the bottom to be stacked above and below rather than side by side */
    #landingPage3 {
        flex-direction: column;
        gap: 1rem;
    }

    .navButtonContainers {
        width: 430px;
        height: 280px;
    }

    #voiceLinkVideo {
        transform: translate(-50%, -45%) scale(.75);
        filter: brightness(90%);
        /* filter: saturate(100%); */
    }

    #writingLinkVideo  {
        transform: translate(-50%, -50%) scale(.2);
        filter: brightness(100%);
        /* filter: saturate(100%); */
    }

    .linkImages {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%) scale(2);
        max-width: 100%;
        max-height: 100%;
        width: fit-content;
        height: fit-content;
        filter: saturate(100%);
        object-fit: cover;
        filter: brightness(100%);
        transition: filter 0.5 ease;
    }

    .navButtons {
        opacity: 100%;
    }
}

/* Light mode styles */
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #f8eade;
        --text-color: #280e12;
        --text-shadow-color: #280e12;
        --primary-color: #eccb5f;
        --secondary-color: #f3d4be;
        --secondary-color-half-opacity: #f3d5becc;
        --accent-color: #75152a;
        --shadow-color: 29deg 21% 57%;
        --global-transition: 400ms;
    }
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #280e12;
        --text-color: #f8eade;
        --text-shadow-color: #280e12;
        --primary-color: #e6bf3d;
        --secondary-color: #150b04;
        --secondary-color-half-opacity: #150b04cc;
        --accent-color: #de4566;
        --shadow-color: 350deg 74% 2%;
        --brightness: 70%;
        --global-transition: 400ms;
    }
}