@import "colors.css";
:root {
    --logo-text-size:2rem;

    --nav-border-color:white;
    --nav-fill: var(--mossy-green);
    --nav-gradient: var(--dark-turqoise);
    --nav-background-color:#2E2C2F;
    --nav-background-color-2: #1c1c1c;
    --nav-text-color:white;
    --nav-gap:75px;
    --nav-font-size:1rem;
    --nav-padding:2rem;
    --page-highlight:var(--light-cyan);

    --theme-svg-color: white;

    --body-fill: var(--mossy-green);
    --body-gradient: var(--dark-turqoise);

    --main-fill:var(--mint-green);
    --main-gradient: var(--dark-mint-green);
    --main-height: 40rem;

    --intro-text-color: white;
    --two-color-outline: var(--celadon) 5px 5px, var(--tiffany-blue) -5px -5px;

    --header-height:5rem; 

    --footer-height:3.5rem;

    
}
:root.dark {
    --nav-border-color: var(--mint-cream);
    --nav-fill: var(--charcoal-black);
    --nav-gradient: var(--smokey-black);
    --nav-background-color: var(--charcoal-black);
    --nav-background-color-2: var(--smokey-black);
    --nav-text-color: var(--mint-cream);
    --page-highlight: var(--tiffany-blue);

    --body-fill: var(--charcoal-black);
    --body-gradient: var(--gunmetal);

    --main-fill: var(--dark-turqoise);
    --main-gradient: var(--charcoal);

    --intro-text-color: var(--mint-cream);
    --two-color-outline: var(--tiffany-blue) 5px 5px, var(--keppel) -5px -5px;
    
}

* {
    margin: 0;
    padding: 0;
    color:var(--olivine);
    font-family: Helvetica, Arial, sans-serif;
}
menu, nav+button{
    display: none;
}
body {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to left,var(--body-fill), var(--body-gradient));
    -background: linear-gradient(to right,var(--smokey-black), var(--charcoal));
    -background: linear-gradient(to left,var(--body-fill), var(--body-gradient));
   
}
header {
    display:flex;
    flex-direction: row;  
    height: var(--header-height);
    align-items: center;

}
nav {
    -background: linear-gradient(to left,var(--nav-fill), var(--nav-gradient));
    text-transform: uppercase;
    padding:var(--nav-padding);
    flex:1;
    
}
ul {
    display:flex;
    list-style-type: none;
    align-items: center;
    justify-content: flex-start;
    gap: var(--nav-gap);
    padding: 0px;
    margin: 0px;
}
ul a {
    display:inline-flex;
    align-items: center;
    text-decoration: none;
}
ul a:not(.logo a) {
    box-shadow: var(--two-color-outline);
    color: var(--nav-text-color);
    font-size: var(--nav-font-size);
    -background-color: var(--pale-red);
    padding: calc(var(--nav-font-size)/4);
}
li.logo {
    margin-right: auto;
}
.logo a {
    font-size: var(--logo-text-size);
    font-weight: bold;
    -letter-spacing: -0.5;
}
nav a[aria-current="page"] {
    background-color: var(--page-highlight);
    opacity: .67;
    font-weight: 600;
    
  }
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left,var(--main-fill), var(--main-gradient));
    -background: linear-gradient(to right,var(--charcoal-black),var(--gunmetal), var(--dark-mint-green),var(--pale-green));
    height: var(--main-height);
}
footer {
    -background: linear-gradient(to left,var(--nav-fill), var(--nav-gradient));
    display:flex;
    justify-content: center;
    height: var(--footer-height);
}
small {
    margin:auto;
}
#theme-menu-heading {
    color:var(--nav-text-color);

}
.theme-menu details {
    cursor: pointer;

}

.theme-options {

    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 0 0;
}

.theme-options li button {
    background: none;
    border: none;
    color: inherit;
    padding: 0.25rem 0;
    cursor: pointer;
    font-size: 1rem;
}

.theme-options li button {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
  }
 
li > button {
    background-color: transparent;
    border: none;
}  
.icon-sun,
.icon-moon {
    width: 1.5rem;
    height: 1.5rem;
    stroke: var(--theme-svg-color);
    fill: none;
    stroke-width: 1.8;
}
  
button[data-theme="light"]:hover .icon-sun {
    transform: rotate(20deg);
    transition: transform 0.2s ease;
}

button[data-theme="dark"]:hover .icon-moon {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}
  


@view-transition {
    navigation: auto;
}
   
   

   
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
    animation-name: crazy-out;
}

::view-transition-new(root) {
    animation-name: crazy-in;
}
@keyframes fade-out-up {
    from {
      opacity: 1;
      transform: translateY(0%);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
   }
   @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }
    to {
      opacity: 1;
      transform: translateY(0%);
    }
   }
   
@keyframes crazy-out {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
        filter: blur(6px);
    }
}

@keyframes crazy-in {
    from {
        opacity: 0;
        transform: scale(1.1) rotate(5deg);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}




@media (max-width: 760px){
    ul a:not(.logo a){
        display: none;
    }
    header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline-end:var(--nav-padding);
        
    }
    ul{
        gap:0;
    }
    nav+button{
        --bar-w: 25px;
        --bar-h: 5px;
        --bar-gap: 10px;
        --bar-color: var(--nav-text-color);
        --menu-width: calc(var(--bar-w) + 16px);
        --menu-height: calc(3 * var(--bar-h) + 2 * var(--bar-gap) + 16px);
        position: relative;
        display: inline-block;
        width: var(--menu-width);
        height: var(--menu-height);
        -border: 1px solid hsl(0 0% 100% / .2);
        -border-radius: .5rem;
        border:none;
        box-shadow: var(--two-color-outline);
        background: transparent;
        cursor: pointer;

    }
    nav+button::before, nav+button::after{
        content:"";
        position:absolute; 
        left: 50%;
        top: 50%;
        height:3px;
        width: var(--bar-w);
        height: var(--bar-h);
        background: var(--bar-color);
        transform: translate(-50%, -50%);
        transition: transform .25s ease, opacity .25s ease, top .25s ease;
    }
    nav+button::before{
        box-shadow:
            0 calc(-1 * (var(--bar-gap) + var(--bar-h))) 0 0 var(--bar-color),
            0 calc( 1 * (var(--bar-gap) + var(--bar-h))) 0 0 var(--bar-color);
    }
    nav+button::after{ opacity:0;}
    header > menu[popover]{
        display: none;   
        -position: fixed;           
        inset: auto 1rem auto auto; 
        -translate: 0 50%;
        top:5rem;
        right:0%;
    }
    menu[popover]:popover-open{
        display: flex;
        flex-direction:column;            
        margin: 0; 
        padding: 0.5rem 0;
        list-style: none;
        background: linear-gradient(to left,var(--nav-fill), var(--nav-gradient));
        border: 1px solid var(--nav-border-color);
        -border-radius: .6rem;
        box-shadow: 0 10px 25px rgba(0,0,0,.25);
    }
   
    menu[popover] > li > a{
        display: block;
        padding: .65rem 1rem;
        color: var(--nav-text-color);
        text-decoration: none;
    }
    menu > li > a:hover{
    background: hsl(0 0% 100% / .08);
    }
    header:has(menu[popover]:popover-open) > button[popovertarget]::before{
        box-shadow: none;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    header:has(menu[popover]:popover-open) > button[popovertarget]::after{
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    
}