:root { --circuit-color: #fc1bfccc; }

* {
    margin: 0;
    padding: 0;
    font-family: montserrat;
    font-weight: normal;
}

/* Make Montserrat the default font for all pages. */
@font-face {
    font-family: montserrat;
    src: url(../fonts/MontserratAlt1-SemiBold.ttf);
}

body { background-color: #040511; }

/*px --> vw conversion: 0.0703125x*/

/* Top Menu area, containing the logo and nav links. */
header {
    display: flex;
    margin: 1% 2%;
    justify-content: space-between;
    align-items: center;
}

/*Lunarflame Logo Image*/
header img, .home-header nav img { width: 28.125vw; }

/* Top Menu Buttons (HOME, ABOUT, PROJECTS, BLOG)  */
.nav-links, .social-links { flex: 1; }

/* Top Menu Buttons */
header > nav { text-align: right; }

/* Item in Top Menu nav list. */
.nav-links li, .social-links li {
    list-style: none;
    display: inline-block;
    margin: 8px 12px;
    position: relative;
}

/* Anchor for Top Menu nav list item */
.nav-links li a {
    color: white;
    text-decoration: none;
}

/* Project Leo Link Button */
.hero-btn {
    display: inline-block;
    text-decoration: none;
    position: relative;
}

/* Hero Button gets a background fill-in when hovered over. */
.hero-btn:hover { transition: 1s; }

.hero-btn.main:hover {
    background: linear-gradient(0.25turn, #7403C07E, #4B0DBE79);
}

/* Header, Footer, and General Structure ------------------------------------------------------- */

.background {
    position: relative;
    background-image: linear-gradient(#130A44, #040511 20%);
    overflow: hidden;
}

/*Primary Titles*/
.page-body h1 {
    font-size: 4.5vw;
    color: #f3bafd;
    margin-top: 5%;
}

/*Secondary Titles*/
.page-body h2 {
    font-size: 3.9vw;
    color: #ed88ff;
    margin-top: 5%;
}

/*Paragraph Content*/
.page-body p {
    font-size: 1.55vw;
    color: white;
    line-height: 150%;
}

/*Image on any Website Page*/
.page-image { max-width: 70%; }

/*Horizontal Break*/
hr {
    width: 75%;
    border: 1px solid blueviolet;
    margin: 20px auto;
}

/* div container for copyright section */
.copyright {
    position: relative;
    background-color: black;
    text-align: right;
    padding: 15px;
}

/*Copyright text*/
.copyright h1 {
    font-size: 1.69vw;
    color: #6d5a85;
    padding: 0% 3%;
}

/* Nav links for copyright section */
.copyright nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Icon containers for external links */
.icon {
    border-radius: 8px;
    margin: 0px;
    display: inline-block;
    padding: 15px 20px;
    transition: all ease 0.3s;
    color: white;
}

/* Icon container images*/
.social-links i {
    font-size: 140%;
    color: white;
    transition: all ease 0.3s;
}

/* div class for list of external links */
.social-links { display: flex; }

/* Carousel ----------------------------------------------------------------------------------- */

/* Container for the carousel images. */
.carousel {
    background-color: #00010c9f;
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
    scrollbar-color: #fc0fc0 rgb(3, 0, 21);
}

/* An individual image in a scroll container */
.carousel img {
    padding: 10px;
    max-width: 50%;
    max-height: 18vw;
    align-items: center;
}

/* Dropdowns ----------------------------------------------------------------------------------- */

.drop-btn {
    background-color: transparent;
    border-color: transparent;
}

.dropdown {
    position: relative;
    display: inline-block;
    align-content: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #25124d;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 5;
    transform: translateX(11%);
    padding: 0 20px;
}

.dropdown-content a {
    padding: 0% 20%;
    text-decoration: none;
    color: inherit;
}

.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .drop-btn { background-color: rgba(255, 255, 255, 0.1);}

/* Other --------------------------------------------------------------------------------------- */

.typewriter-v2 span { display: none; }

/* Styles for the zoomed-in image overlay */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
}

/* Styles for the zoomed-in image */
#zoom-in {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    z-index: 101;
}

/* Mobile UI ----------------------------------------------------------------------------------- */
@media(max-width: 700px) {

    /*Lunarflame Logo Image*/
    header img { width: 200px; }

    /* Item in Top Menu nav list */
    .nav-links li { 
        display: block;
        margin: 5vw 0px;
    }

    /* Anchor for Top Menu nav list item */
    .nav-links a { font-size: 5vw; }

    /* Anchor for Social Links list item */
    .social-links a {
        text-decoration: none;
        font-size: 8vw;
    }

    /* Top Menu Buttons go to the side bar on the Mobile View. */
    .nav-links {
        position: fixed;
        background: linear-gradient(#03002e, #0a0068);
        height: 100vh;
        width: 50vw;
        top: 0;
        right: -50vw;
        text-align: left;
        z-index: 10;
        transition: 1s;
    }

    /* Social Links go under the Nav Links on the Mobile View. */
    .social-links {
        position: fixed;
        width: 50vw;
        right: -50vw;
        text-align: left;
        top: 40vh;
        z-index: 11;
        background-color: transparent;
        transition: 1s;
    }

    /* Show sidebar on mobile view. */
    header i.bx {
        display: block;
        color: white;
        margin: 10px;
        font-size: 10vw;
        cursor: pointer;
    }

    /* Nav Links list */
    .nav-links ul { 
        margin: 4vh 4vh;
        text-align: center;
    }

    /* Social Links list */
    .social-links ul { 
        margin: 6vh 4vh;
        text-align: center;
    }

    /* Social Links icons turn pink when hovered over. */
    .social-links i:hover { color: #eb96f7; }

    /* Nav Links icons turn pink when hovered over. */
    .nav-links a:hover { color: #eb96f7; }

    .hero-btn { padding: 3vw 8vw; }

    /* Gives a dark blue gradient to every page with content. */
    .page-body {
        width: 100%;
        min-height: 84vh;
        text-align: center;
    }

    /*Primary Titles*/
    .page-body h1 {
        font-size: 7.5vw;
        padding-top: 10%;
    }

    /*Paragraph Content*/
    .page-body p {
        font-size: 3vw;
        margin: 5%;
    }

    /* Footer for all site pages */
    footer { display: none; }

    /* Footer Titles */
    footer h1 { font-size: 2.25vw; }

    /* Copyright Text */
    .copyright h1 {
        font-size: 2.25vw;
        padding: 2%;
        line-height: 110%;
    }

    .panner { display: none; }
    .pointer { display: none; }
}

/* Desktop UI ---------------------------------------------------------------------------------- */

@media(min-width: 701px) {

    * {
        cursor: none;
        scrollbar-color: #0A52F2 #03002e;
    }

    /* Gives a dark blue gradient to every page with content. */
    .page-body {
        width: 100%;
        min-height: 78vh;
        text-align: center;
    }

    header, .page-body {
        position: relative;
        z-index: 3;
    }

    /* Hide sidebar on desktop view */
    header i.bx { display: none; }

    /* Item in Top Menu nav list. */
    .nav-links li::after {
        content: '';
        width: 0%;
        height: 4px;
        background-color: blueviolet;
        display: block;
        margin: auto;
        transition: 0.5s;
    }

    /* Anchor for Item in Top Menu nav list. */
    .nav-links a, .social-links a { font-size: 1.68vw; }

    .hero-btn { padding: 1.15vw 3.75vw; }

    /* Icon container backgrounds should only show on the desktop view. */
    .icon { background-color: #490596; }

    /* Icon container background darkens when hovered over. */
    .icon:hover {
        background-color: #2b005c;
        box-shadow: 0px 0px 50px #00000000;
    }

    /* Footer for all site pages */
    footer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        position: relative;
        padding: 50px 6vw;
        background-image: linear-gradient(#0c002b50, #09003f9c);
    }

    /* Footer Titles */
    footer h1 {
        color: #ad72ff;
        font-size: 3.5vw;
        margin-bottom: 5%;
    }

    /* Footer Subtext*/
    footer h2 {
        color: white;
        font-size: 1.26vw;
        line-height: 175%;
    }

    /* Links under Contact Us Form */
    footer > .contact-us a { text-decoration: none; }

    /* Footer Subtext v2 */
    footer h3  {
        color: #9192fc;
        font-size: 1.35vw;
        line-height: 175%;
        padding: 0;
    }

    /* Subtext link turns dark blue when hovered over. */
    footer h3:hover { color: #5663f0; }

    .copyright-text:hover { color: #46325e;}

    .panner {
        position: fixed;
        left: calc(50% - 75px);
        background: lighten(#333, 10%);
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
        margin: 3em auto;
    }

    .pointer {
        --mouse-color: white;

        content: '';
        background: var(--mouse-color);
        width: 20px;
        height: 20px;
        transform: rotate(45deg);
        position: fixed;
        z-index: 110;
        display: block;
        outline-color: var(--mouse-color);
        outline-style: solid;
        outline-width: 2px;
        animation: cursor 1s infinite;
        box-shadow: 0px 0px 20px var(--mouse-color);
        pointer-events: none;
    }
}

/* --------------------------------------------------------------------------------------------- */

@keyframes cursor {
    from { outline-offset: 0px; }

    to {
        outline-offset: 10px;
        outline-color: transparent;
    }
}

@keyframes lights {
    0% {
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.2),
            0 0 0.125em hsla(320, 100%, 60%, 0.3),
            -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
            1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
    30% { 
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 60%, 0.5),
            -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
            0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }
    40% { 
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 90%, 0.5),
            -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
            0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
    }
    70% {
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 60%, 0.5),
            0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
            -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }
    100% {
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.2),
            0 0 0.125em hsla(320, 100%, 60%, 0.3),
            1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
            -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
}

.light {
    margin: auto;
    font-weight: 300;
    animation: lights 5s 750ms linear infinite;
 }

 /*--------------------------------------------------------------------------------------------- */

.gradient, .icon-row .icon i:hover {
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 12s linear infinite;
}

.gradient#v1, .icon#v1 i:hover {
    background-image: linear-gradient(
        -225deg,
        #FA7FFF 0%,
        #B98EFC 20%,
        #B55DE8 40%,
        #8DA0FE 60%,
        #C490FF 80%,
        #FA7FFF 100%
    );
    text-shadow: 0 0 60px #8da0feD1;
}

.gradient#v2, .icon#v2 i:hover {
    background-image: linear-gradient(
        -225deg,
        #01AEF3 0%,
        #464CE7 20%,
        #A818D4 40%,
        #D80D9A 60%,
        #6A5FC7 80%,
        #01AEF3 100%
    );
    text-shadow: 0 0 60px #464BE7E3;
}

.gradient#v3, .icon#v3 i:hover {
    background-image: linear-gradient(
        -225deg,
        #F10080 0%,
        #8B0D88 20%,
        #5E2390 40%,
        #034EA2 60%,
        #8D0D88 80%,
        #F10080 100%
    );
    text-shadow: 0 0 60px #3204E7DE;
}

.gradient#v4, .icon#v4 i:hover {
    background-image: linear-gradient(
        -225deg,
        #F54952 0%,
        #660F56 20%,
        #280659 40%,
        #422680 60%,
        #660F56 80%,
        #F54952 100%
    );
    text-shadow: 0 0 60px #0a53f287;
}

.gradient#v5, .icon#v5 i:hover {
    background-image: linear-gradient(
        -225deg,
        #14F2E0 0%,
        #6E9EEB 20%,
        #9A75F0 40%,
        #F320FA 60%,
        #9A75F0 80%,
        #14F2E0 100%
    );
    text-shadow: 0 0 60px #070EE8BF;
}

@keyframes gradient {
    to { background-position: 200% center; }
}

/* --------------------------------------------------------------------------------------------- */

/* Button Animations */

.button.fill:hover, .button.fill:focus {
    box-shadow: inset 0 0 0 2em var(--hover);
}

.button.pulse:hover, .button.pulse:focus {
    animation: pulse 1s;
    box-shadow: 0 0 0 2em transparent;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 var(--hover); }
}

.button.close:hover, .button.close:focus {
    box-shadow: 
        inset -3.5em 0 0 0 var(--hover), 
        inset 3.5em 0 0 0 var(--hover);
}

.button.raise:hover, .button.raise:focus {
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}

.button.up:hover, .button.up:focus {
    box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

.button.slide:hover, .button.slide:focus {
    box-shadow: inset 13em 0 0 0 var(--hover);
}

.button.offset {
    box-shadow: 
        0.3em 0.3em 0 0 var(--color), 
        inset 0.3em 0.3em 0 0 var(--color);
}

.button.offset:hover, .button.offset:focus {
    box-shadow: 
        0 0 0 0 var(--hover), 
        inset 6em 3.5em 0 0 var(--hover);
}

.button.fill {
    --color: #A972CB;
    --hover: #CB72A9;
}

.button.pulse {
    --color: white;
    --hover: #b16eef;
}

.button.close {
    --color: #ff7f82;
    --hover: #ff7fff;
}

.button.raise {
    --color: #9A0A0A;
    --hover: #580303;
}

.button.up {
    --color: #F3C757;
    --hover: #F08500;
}

.button.offset {
    --color: #00D4F9;
    --hover: #0091D6;
}

.button:hover, .button:focus {
    border-color: var(--hover);
    color: white;
}

.button {
    background: none;
    border: 2px solid;
    color: var(--color);
    transition: 0.25s;
}

/* --------------------------------------------------------------------------------------------- */

/* Nav Bar Animations */

.hover#light-blue::before { background: linear-gradient(to left, #30c0eb, #01AEF3); }
.hover#light-blue {
    background-image: linear-gradient(
        to right,
        #30c0eb,
        #01AEF3 50%,
        white 50%
    );
}

.hover#blue::before { background: linear-gradient(to left, #010FCC, #000A83); }
.hover#blue {
    background-image: linear-gradient(
        to right,
        #010FCC,
        #000A83 50%,
        white 50%
    );
}

.hover#purple::before { background: linear-gradient(to left, #953DF5, #4E26E2); }
.hover#purple {
    background-image: linear-gradient(
        to right,
        #953DF5,
        #4E26E2 50%,
        white 50%
    );
}

.hover#pink::before { background: linear-gradient(to left, #F019E1, #FA7FFF); }
.hover#pink {
    background-image: linear-gradient(
        to right,
        #F019E1,
        #FA7FFF 50%,
        white 50%
    );
}

.hover {
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    margin: 5px 0;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.hover::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

.hover:hover { background-position: 0; }
.hover:hover::before { width: 100%; }

/* --------------------------------------------------------------------------------------------- */

/* Image Border */
@media(min-width: 701px) {
    .offset-border {
        /*--color: #30C0EB; /* the border color */
        --border: 10px;     /* the border thickness */
        --offset: 20px;     /* control the offset */
        --gap: 5px;         /* the gap on hover */
        
        --_c: var(--color) var(--border), #0000 0 calc(100% - var(--border)),var(--color) 0;
        --_o: calc(3 * var(--offset));

        padding: 
            calc(var(--gap) + var(--border))
            calc(var(--gap) + var(--border) + var(--offset))
            calc(var(--gap) + var(--border) + var(--offset))
            calc(var(--gap) + var(--border));

        background: 
            linear-gradient(var(--_c)) var(--_o) var(--_o), 
            linear-gradient(90deg,var(--_c)) var(--_o) var(--_o);

        background-size: calc(100% - var(--_o)) calc(100% - var(--_o));
        background-repeat: no-repeat;
        filter: grayscale(0.5);
        transition: 0.5s;
    }

    .offset-border#light-blue { --color:#30C0EB; }
    .offset-border#blue { --color: #010FCC; }
    .offset-border#pink { --color: #F019E1; }
    .offset-border#purple { --color: #953DF5; }

    .offset-border:hover {
        background-position: 0px 0px;
        background-size: calc(100% - var(--offset)) calc(100% - var(--offset));
        filter: grayscale(0);
    }

    .button.slide {
        --color: #8fc866;
        --hover: #66c887;
    }

    .orb {
        position: absolute;
        z-index: 0;
        height: auto;
    }

    .circuit {
        position: fixed;
        z-index: 0;
        width: 100%;
        height: 100%;
        mask-repeat: no-repeat;
        mask-size: 100%;

        background-image: linear-gradient(
            to right,
            #4c5fde0c 48%,
            var(--circuit-color) 50%,
            #4c5fde0c 52%
        );

        background-size: 300% auto;
        animation: 
            circuit-pulse 28s linear infinite,
            color-swap 55s linear infinite;
    }

    /* maskImage property is set in animations.js*/
    .circuit#v1 { top: 6%; }
    .circuit#v2 { top: 7%; }
}

@media(min-width: 1521px) {
    .circuit { top: 7%; }
}

@keyframes circuit-pulse {
    to { background-position: 300% center; }
}

@media(max-width: 700px) {
    .button.slide {
        --color: #131FAA;
        --hover: #6633C6;
    }

    .orb { display: none; }
    .circuit#v2 { display: none; }
}

@keyframes orb-pulse {
    0% { opacity: 0.05; }
    15% { opacity: 0.05; }
    50% { opacity: 0.8; }
    100% { opacity: 0.05; }
}

@keyframes color-swap {
    0% { --circuit-color: #fc1bfcb3; }
    100% { --circuit-color: #4c60deb3; }
}

/* --------------------------------------------------------------------------------------------- */

@keyframes clockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes counterclockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}