/*
AngelAuraMC Landing Stylesheet

mreowww :3

v2025.0729.0
*/

/* small css reset because something was causing issues and im too dumb to figure out what it was */
body {
    margin: 0px 0px 0px 0px;
    background-color: #6d6d6d;
}

/* Prevent font scaling in landscape mode on mobile devices while still allowing user zoom */
@media screen and (orientation: landscape) {
    html {
        -webkit-text-size-adjust: 100%;
    }
}

/* Styling for all device sizes */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #1a1a1a;
    color: #ffffff;
}

a {
    color: #9649b8;
    font-weight: bold;
}

p {
    padding-left: 10px;
    padding-right: 10px;
}

body:before {
    z-index: -9; /* Appear under everything */
    content: '';
	position: fixed;
    top: -2vh;
    left: -2vw;
	width: 104vw;
	height: 104vh;
    background-image: url('landing-assets/packscreenshotblur.png');
    background-size: 100% 100%; /* for older browsers to scale the bg to the viewport */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

#master {
    z-index: 1;
    text-align: center;
    border-bottom: 4px solid #9649b8;
    min-height: 100vh;
    height: 100%;
}

#verticalcontainer {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    width: calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left));
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* Style the entire thatstella7922 text and profile picture container */
#master #verticalcontainer #abovelinks {
    display: block;
    margin-top: 15vh;
    margin-bottom: 3vh;
    font-size: 49px;
    text-shadow: 0.03em 0.03em 0.1em rgb(79, 64, 77);
}

/* Styling for AAMC wordmark image */
#master #verticalcontainer #abovelinks #wordmark {
    height: calc(1em + 50px);
    object-fit: cover;
    transform: none; /* if the browser doesn't have support for initial */
    transform: initial;
    filter: brightness(0) invert(50%) sepia(64%) saturate(682%) hue-rotate(241deg) brightness(100%) contrast(93%) drop-shadow(0 0 0.75rem #0b0b0b);
}

/* Styling for AAMC logo image */
#master #verticalcontainer #abovelinks #profilepicture {
    /* fallback for ancient browsers is in the img tag in HTML */
    width: calc(1em + 40px);
    height: calc(1em + 40px);
    object-fit: cover;
    margin: 0 0 0 0;
    transform: translateY(20px);
    filter: drop-shadow(0.03em 0.03em 0.1em rgb(79, 64, 77)); /* Shadow for the profile picture */
}


/*

Links Styling

*/
/* Maximum width for the social link div */
/* This is done so that the social link buttons and quotes text don't span across the entire width of the viewport in the case of a wide viewport */
#master #horizontalcontainer .social-links {
    max-width: 600px;
    display: inline-block;
    text-shadow: 0.1em 0.1em 0.4em #000000; /* Shadow for all social link div text */
}
/* Arrangement for the social links */
#master #horizontalcontainer .social-links .social-link-buttons p {
    padding: 0;
    margin: auto;
    display: inline-block;
}
/* Arrangement for the social section label */
#master #horizontalcontainer .social-links  {
    margin-top: 5vh;
    margin-bottom: 0;
}
/* Styling for the social links */
#master #horizontalcontainer .social-links .social-link-buttons p {
    background-color: transparent;
    border: none;
    color: white;
    padding: 9px 15px;
    margin: 4px;
    cursor: pointer;
    font-size: 100%;
}
/* Override styling for the social link anchor elements so they are not pink or underlined */
#master #horizontalcontainer .social-links .social-link-buttons p a {
    color: white;
    font-weight: normal;
    text-decoration: underline;
}

/* Arrangement for the website buttons */
#master #horizontalcontainer .links .button {
    padding: 0;
    margin: auto;
    display: inline-block;
}
/* Styling for the website link buttons (buttons pt2) */
#master #verticalcontainer #horizontalcontainer .links .button {
    /* basically make a button */
    background-color: #9649b8;
    border-radius: 25px;
    border: none;
    color: white;
    padding: 5px 25px;
    margin: 4px;
    text-decoration: none;
    cursor: pointer;
    font-size: 100%;
    font-weight: normal;
}

/*

Contentview Styling

*/
#master #verticalcontainer #contentview-container {
    display: grid;
}

/* Apply shadow to all contentview div text, on the p element only */
#master #verticalcontainer #contentview-container p {
    text-shadow: 0.1em 0.1em 0.4em #000000;
}

/* Maximum width for the contentview div */
/* This is done so that the contentview section doesn't span across the entire width of the viewport in the case of a wide viewport */
#master #verticalcontainer #contentview-container #contentview-items {
    max-width: 600px;
    display: inline-block;
}
/* Styling for all contentview headings */
#master #verticalcontainer #contentview-container #contentview-headings  {
    margin-top: 7vh;
    font-size: 18px;
    display: block;
}
/* Styling for not selected contentview headings */
#master #verticalcontainer #contentview-container #contentview-headings .contentview-notselected {
    font-weight: lighter;
    cursor: pointer;
    color:#b4b4b4
}
#master #verticalcontainer #contentview-container #contentview-headings .contentview-selected {
    font-weight: bold;
    cursor: normal;
    color: #FFFFFF;
}

/* Footer */
footer {
    z-index: 2;
    text-align: center;
    background-color: #1a1a1a;
}
#footer-sidebyside {
    display: inline-block;
}

/* Twemoji sizing */
img.emoji {
    height: 1.1em;
    width: 1.1em;
    vertical-align: -0.2em;
}


/* Fallback CSS for devices that don't support the "fancier" stuff below with translucency and blurs */
#master {
    /*fallback to plain black*/
    background-color: rgb(0, 0, 0);
    /*Translucent black if the browser supports it*/
    background-color: rgba(0, 0, 0, 0.15);
}

#backdrop-warning {
    display: block;
    margin: 5px;
    color: #ffffff;
    font-size: 14px;
}


/* Media query for checking if blending modes are supported */
@supports (mix-blend-mode: color-dodge) {
    #master #verticalcontainer #abovelinks #displayname {
        mix-blend-mode: color-dodge;
        color: #b3b3b3;
    }
    
    #master #verticalcontainer #abovelinks #wordmark {
        /* This filter makes the color dodge on the wordmark not clip into yellow, instead purple and blue.
           Provides a less harsh color clip and in my opinion the colors suit the logo */
        -webkit-filter: brightness(47%) sepia(70%) hue-rotate(180deg) contrast(1.7) saturate(1.4);
        -moz-filter: brightness(47%) sepia(70%) hue-rotate(180deg) contrast(1.7) saturate(1.4);
        -o-filter: brightness(47%) sepia(70%) hue-rotate(180deg) contrast(1.7) saturate(1.4);
        -ms-filter: brightness(47%) sepia(70%) hue-rotate(180deg) contrast(1.7) saturate(1.4);
        filter: brightness(47%) sepia(70%) hue-rotate(180deg) contrast(1.7) saturate(1.4);
        mix-blend-mode: color-dodge;
    }

    #backdrop-warning {
        display: none;
    }
}

/* This media query checks if the browser does the brightness filter */
@supports ((-webkit-filter: brightness(0.85)) or (-moz-filter: brightness(0.85)) or (-o-filter: brightness(0.85)) or (-ms-filter: brightness(0.85)) or (filter: brightness(0.85))) {
    #master {
        /* Unset fallback from above */
        background-color: initial;
    }

    body:before {
        /* dim the background */
        -webkit-filter: brightness(0.85);
        -moz-filter: brightness(0.85);
        -o-filter: brightness(0.85);
        -ms-filter: brightness(0.85);
        filter: brightness(0.85);
    }
    
    #backdrop-warning {
        display: none;
    }
}
  
/* Media query for screens wider than 800px */
@media screen and (min-width: 800px) {
    #master #verticalcontainer #abovelinks {
        display: flex;
        font-size: 78px;
    }

    /* Styling for my profile picture image */
    #master #verticalcontainer #abovelinks #profilepicture {
        width: calc(1em + 40px);
        height: calc(1em + 40px);
        object-fit: cover;
        margin: 0px 20px 0px 0;
        transform: none; /* if the browser doesn't have support for initial */
        transform: initial;
    }

    #horizontalcontainer {
        display: inline-flex;
    }

    /* Pad and ensure consistent size of the three divs */
    #master #verticalcontainer #horizontalcontainer #navigation {
        max-width: 50vw;
        padding-right: 15px;
    }
    #master #verticalcontainer #horizontalcontainer #contentview-container {
        max-width: 50vw;
        padding-right: 15px;
    }

    #master #verticalcontainer #horizontalcontainer #catvideo {
        max-width: 50vw;
        padding-right: 15px;
    }

    /* Move the ThatStella7922 text down */
    #master #verticalcontainer #abovelinks {
        margin-top: 5vh;
    }

    /* Left align the about heading on big screens */
    #master #verticalcontainer #contentview-container #contentview-headings,
    #master #verticalcontainer #contentview-container #contentview-headings #contentview-about-heading,
    #master #verticalcontainer #contentview-container #contentview-headings #contentview-projects-heading {
        margin-top: 0;
        display: flex;
    }

    /* Allow elements in the footer to sit side by side */
    #footer-sidebyside {
        display: inline-flex;
    }
}

/* Media query detects a max height of 600px to move the thatstella7922 text down a bit 
   (for long viewports i guess, it looks nicer to my eye) */
@media screen and (max-height: 680px) {
    /* Move the ThatStella7922 text down */
    #master #verticalcontainer #abovelinks {
        margin-top: 25vh;
    }
}

/* Media query for screens under 300px wide (this is mainly for my oneplus watch 3) */
@media screen and (max-width: 320px) {
    /* Font size reduction to prevent word break on my name */
    #master #verticalcontainer #abovelinks {
        font-size: 40px;
    }

    /* Reduce some of the space inbetween the social link buttons to make it fit a bit better */
    #master #horizontalcontainer .social-links .social-link-buttons p {
        padding: 5px 10px;
        margin: 0px;
        font-size: 100%;
    }
}

/* dark mode styling! */
@media (prefers-color-scheme: dark) {
    /* Set the body color to a very dark gray */
    body {
        background-color: #0b0b0b;
        color:#FFFFFF;
    }

    /* Make the image darker */
    body:before {
        -webkit-filter: brightness(0.3);
        -moz-filter: brightness(0.3);
        -o-filter: brightness(0.3);
        -ms-filter: brightness(0.3);
        filter: brightness(0.3);
    }

    /* Style the entire thatstella7922 text and profile picture container */
    #master #verticalcontainer #abovelinks {
        text-shadow: 0.03em 0.03em 0.13em rgba(255, 210, 247, 0.407);
    }

    /* Media query for checking if blending modes are supported
    This sets a different color in dark mode if blending is supported*/
    @supports (mix-blend-mode: color-dodge) {
        #master #verticalcontainer #abovelinks #displayname {
            mix-blend-mode: color-dodge;
            color: #d8d8d8;
        }

        #master #verticalcontainer #abovelinks #wordmark {
            /* This filter makes the color dodge on the wordmark not clip into yellow, instead purple and blue.
               The dark mode variant already did not clip into yellow at all but this provides a nicer hue to the color dodge */
            -webkit-filter: brightness(75%) sepia(50%) hue-rotate(180deg);
            -moz-filter: brightness(75%) sepia(50%) hue-rotate(180deg);
            -o-filter: brightness(75%) sepia(50%) hue-rotate(180deg);
            -ms-filter: brightness(75%) sepia(50%) hue-rotate(180deg);
            filter: brightness(75%) sepia(50%) hue-rotate(180deg);
            mix-blend-mode: color-dodge;
        }
    }
}