@charset "UTF-8";
/**
 * Set charset of stylesheet
 * Must be first line
 * with no comments or spaces
 */

/**
 * Mobile First CSS
 * Rules at top impact all sizes
 * Fully style mobile before adding media queries
 * Media queries are for larger screens
 * Then override property/value as needed
 * No new rules after lat media query
 */

/** 
 * Change Box Model to Border Box
 * subtract padding and border from the width of the element 
 */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit
}

/**
 * Body Reset
 * remove default margin
 * set font-family
 */

body {
    background-color:rgb(55, 255, 0);;
    margin-right:450px;
    margin: 0;
    font-family: sans-serif;
}

/**
 * div.wrapper
 * grid container
 * one column on mobile
 * width 100% of viewport max width 1024px
 * gap between grid items 1rem (16px root element font size)
 * padding right and left (prevent content from touching edges)
 * padding top 48px (prevent content from being hidden by header)
 * margin 0 auto (center container)
 */
.wrapper {
    display: grid;
    width: auto;
    gap: 1rem;
    padding: 48px 1rem 0;
    margin: 0 auto;
    background: rgb(55, 255, 0);
}

/**
 * Header
 * Set height to 128px
 * Background image
 * Flexbox
 * Flow items top to bottom
 * Justify content to center
 * position fixed
 * top right left 0 - position at top of viewport
 * padding left 48px - prevent content from touching edges
 * Background color with opacity
 * Backdrop filter
 * Box shadow
 */
 header {
    background-color:rgb(0, 85, 255);
    display : flex;
    border-radius : 10px;
    border : yellow solid 2px;
    margin : 15px;
    box-shadow : 0 2px 4px rgb(0, 0, 0, 0.8) inset;
    }
    header h1 {
    flex : 1 1 auto;
    margin : 0;
    color : #fff;
    line-height : 4;
    text-align : center;
    letter-spacing : 4px;
    text-shadow : 0 -2px 2px rgb(0, 0, 0, 0.6);
    background: url(images/earth.webp);
    border-top-left-radius : 10px;
    border-top-right-radius : 10px;
    border-bottom-left-radius : 10px;
    border-bottom-right-radius : 10px;
    }
    header h1 sup {
    font-size : 0.6em;
    }

/**
* Header h1
* Remove default margin
* Add padding
* Background color with opacity
* Backdrop filter
* Font size responsive using clamp function
* clamp() values created 
* - - based on existing/expected words per line 
* - - and trial/error
* - clamp(1rem,    5vw,     2rem)
* -       min      central  max
* -       20px     16-32px  32px
* - 320px viewport width central value is 320*.05 = 16px
* - 640px viewport width central value is 640*.05 = 32px
*/
header h1 {
    margin: 0;
    padding: 0 0 0 0;
    font-size: clamp(1rem, 5vw, 2rem);
}

/* START - .nav-main */
/**
* Nav Element
* position fixed
* top left 0
* line height 0 - remove space between inline elements (button)
*/
.nav-main {
    position: static;
     background-color:lightblue;
    margin: auto;
    top: 76px;
    left: 0;
    line-height: 0;
}

/**
 * Nav Main Menu Toggle
 * Button Element
 * no background
 * no border
 * cursor pointer - show pointer on hover
 */
.nav-main-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

/** 
 * SET SVG TRANSFORMS
 * based on individual elements not SVG box 
 */
.nav-main-menu-toggle svg * {
    transform-box: fill-box;
}

/** 
 * HAMBURGER MENU ICON 
 * 3 RECTANGLES
 * set transition properties
 * set transform origin x and y to center
 * - rotate and translate will be based on center
 */
.nav-main-menu-toggle rect:nth-child(1) {
    transition: all 2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform-origin: center;
}

.nav-main-menu-toggle rect:nth-child(2) {
    transition: all 2.25s linear;
    transform-origin: center;
}

.nav-main-menu-toggle rect:nth-child(3) {
    transition: all 2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform-origin: center;
}

/**
 * JAVASCRIPT WILL ADD 
 * - aria-expanded="true" 
 * - to .nav-main-menu-toggle 
 * turn hamburger menu into X
 * turn units are same as rotate in degrees
 * scale will make middle rectangle disappear
 */
 .nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(1) {
    rotate: 45deg;
    translate: 0 10px;
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(2) {
    rotate: 0deg;
    translate: 0 10;
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(3) {
    rotate: -45deg;
    translate: 0 -10px;
}

/* END - .nav-main-menu-toggle */

/**
 * Nav Main Menu - the UL
 * transform translateX -100%
 * - move off screen
 * - negative move away from element
 * - positive move toward element
 * - translate percentage based on width of element
 * - not the parent element
 * position absolute
 * width 100vw
 * height 100vh
 * remove default margin and padding
 * remove list style
 * display flex
 * flex direction column
 * visibility hidden
 * - hide menu
 * - will be shown by javascript
 * box shadow
 * clip path will hide shadow on top
 * - zero pixels will clip shadow at box edge
 * - negative pixels will extend shadow beyond box edge
 */
#nav-main-menu {
    transform: translateX(-100%);
    transition: all 1s ease-in-out;
    position: static;
    width: auto;
    background: hsl(212.45deg 50% 100% / 70%);
    backdrop-filter: blur(5px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    box-shadow: 0px 0px 10px black;
    clip-path: inset(0px 0px -10px 0px);
}

/**
 * Show Nav Main Menu - the UL
 * :not() selector
 * if hidden attribute is not present
 * - show menu
 * - translateX 0 
 * - move on screen
 * transition all properties that change
 * - duration 1.8 seconds
 * - ease-in-out timing function
 */
#nav-main-menu:not([hidden]) {
    visibility: visible;
    transform: translateX(0);
    transition: all 1.8s ease-in-out;
}

/**
 * Anchor Elements
 * color inherit
 * - inherit color from parent element
 * display flex
 * - can set width and height
 * - entire element is clickable
 * line height 3
 * - 3 times the font size
 * padding 0 2em left and right
 * - 2em is 2 times the font size
 * transition all properties that change
 * - duration .25 seconds
 * - ease-in-out timing function
 */
#nav-main-menu li a {
    color: inherit;
    display: flex;
    line-height: 3;
    padding: 0 2em;
    transition: all .25s ease-in-out;
}

#nav-main-menu li a:hover,
#nav-main-menu li a:focus {
    background: whitesmoke;
}

/* END - .nav-main */


/**
 * Main Images
 * Default styles
 * Then modifier classes as needed
 */
.main-img {
    width: 100%;
    background-color: lightgray;
    padding: 10px;
    border: 1px solid darkgray;
}

/**
 * Footer
 * Flexbox
 * Flow items left to right 
 * Wrap items to next line if needed
 */
footer {
    display: flex;
    flex-wrap: wrap;
}

/**
 * Footer Links
 * Line height twice the font size
 * - Height properties only work on block level elements or grid/flex items
 */
footer a {
    color: darkblue;
    text-decoration: none;
    line-height: 2;
}

/**
 * :first-child first anchor in footer
 * auto margin right 
 * - push to right
 * - based on available space
 */
footer :first-child {
    margin-right: auto;
}

footer :last-child {
    margin-left: 1rem;
}

/**
 * Breakpoint @media rule
 * min-width 768px and larger
 * Override rules 
 * properties/values from above
 */
 @media screen and (min-width: 768px) {
    header {
        margin-left : 0;
        background: url(images/earth.webp);
        }
        header h1 {
        margin : 0.67em 0;
        line-height : 2;
        }
        .nav-main {
        position : static;
        top : auto;
        left : auto;
        z-index : auto;
        }
        .nav-main-menu-toggle {
        display : none;
        }
        #nav-main-menu {
        position : relative;
        visibility : visible;
        transform : translateX(0);
        transition : none;
        background : transparent;
        display : flex;
        flex-direction : row;
        }
        @media screen and (min-width: 768px) {
            header {
            margin-left : 0;
            }
            header h1 {
            margin : 0.67em 0;
            line-height : 2;
            }
            .nav-main {
            position : static;
            top : auto;
            left : auto;
            z-index : auto;
            line-height: 0;
            }
            .nav-main-menu-toggle {
            display : none;
            }
            #nav-main-menu {
            position : relative;
            visibility : visible;
            transform : translateX(0);
            transition : none;
            background : transparent;
            display : flex;
            flex-direction : row;
            }
            }
            
        }