* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables Tutorial https://www.youtube.com/watch?v=5wLrz_zUwoU */
:root {
    --clr-border: #090D0F; /* 9 13 15 */
    --clr-text: #1F2528; /* 31 37 40 */
    --clr-cloak-light: #3F474C; /* 63 71 76 */
    --clr-background-dark: #DCE2E6; /* 220 226 230 invert-cloak-dark*/
    --clr-text-fade-out: #E2EAEC; /* 226 234 236 background-shade*/
    --clr-background-wave: #EBF4F5; /* 235 244 245 */
    --clr-background-mid: #F3F5F5; /* 243 245 245 */
    --clr-background: #FAFCFC; /* 250 252 252 */
    --clr-background-transparent: rgba(250, 252, 252, 0.4); /* 250 252 252 */
    --clr-primary: #4D8DC1; /* 77 141 193 */
}

body {
    font-family: 'Lato', sans-serif;
    background-image: url("../img/snow_waves_bg.svg");
    position: static;
    /* https://www.w3schools.com/cssref/pr_background-image.php */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--clr-background-mid);
    min-height: 100vh;
    width: 100%;
}

.container {
    width: 100%;
    margin: 0 auto;
}


.sticky {
    /* https://www.w3schools.com/css/css_positioning.asp */
    position: sticky;
    
}

.icon {
    width: 1rem;
    height: auto;
}

/* specific role classes*/
/* header (top) */
.top-header {
    top: 0;
    /* Blur elements behind the nav bar https://www.w3schools.com/cssref/css3_pr_backdrop-filter.php*/
    background-color: var(--clr-background-transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 10;
}

.top-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 1rem 2rem;
    gap: 0.5rem 2rem;
}

.top-branding {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.top-branding:hover, .top-branding:focus {
    transform: translateY(-0.125rem);
}

.top-branding:hover p, .top-branding:focus p{
    color: var(--clr-primary);
}

.top-branding:hover .top-logo, .top-branding:focus .top-logo{
    animation: hop 0.6s ease-out;
}

.top-nav {
    display: flex;
    width: fit-content;
    align-items: center;
}

.top-nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1rem 0;
    list-style-type: none;
}

.top-logo{
    width: 3.812rem;
    height: auto;
    transition: transform 0.3s ease;
}

/* Animation CSS documentation: https://www.w3schools.com/cssref/atrule_keyframes.php*/
@keyframes hop {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-0.8rem); }
    50%  { transform: translateY(0); }
    65%  { transform: translateY(-0.5rem); }
    80%  { transform: translateY(0); }
    90%  { transform: translateY(-0.25rem); }
    100% { transform: translateY(0); }
  }

.top-name {
    font-size: 2.438rem;
}

/* main */

/* footer (low) */
.low-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
    width: 100%;
    padding: 2rem 2rem;
    gap: 2rem 2rem;
}

.low-contact {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.icon-link {
    display: inline-flex;
    padding: 0.5rem;
    /* outlines https://www.w3schools.com/css/css_outline.asp*/
    outline-width: 0.125rem;
    outline-color: var(--clr-text);
    outline-style: solid;
    background-color: var(--clr-background);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.icon-link:hover, .icon-link:focus{
    outline-color: var(--clr-primary);
    transform: translateY(-0.125rem);
}

.icon-link:hover img, .icon-link:focus img{
    filter: invert(50%) sepia(6%) saturate(3541%) hue-rotate(165deg) brightness(101%) contrast(90%);
}
/* Font usage */

h1, h2, h3, h4, h5, h6, a{
    font-family: 'Sometype Mono';
    color: var(--clr-text);
}

/* Text element size */
h1 {
    font-size: 3.812rem;
}

h2 {
    font-size: 3.062rem;
}

h3 {
    font-size: 2.438rem;
}

h4 {
    font-size: 1.938rem;
}

h5 {
    font-size: 1.562rem;
}

h6 {
    font-size: 1.250rem;
}

a {
    font-weight: bold;
    transition: all 0.3s ease;
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--clr-primary);
    transform: translateY(-0.125rem);
}

p, ul, li {
    font-family: 'Nunito Sans';
    color: var(--clr-text);
}

ul {
    padding-left: 2rem;
}

li::marker{
    color: var(--clr-primary);
}

/* Header Breaks */

@media (width < 28.75rem) {
    .top-header{
        position: static;
    }

    .top-branding {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .top-name {
        padding: 0;
        font-size: 1.625rem;
    }

    .top-nav{
        width: 100%;
    }

    .top-nav ul {
        width: 100%;
        justify-content:space-around;
    }
}

/* When below a number of rem, reduce text to major second*/
@media (width < 28.75rem) or (height < 35rem) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.812rem;
    }
    
    h3 {
        font-size: 1.625rem;
    }
    
    h4 {
        font-size: 1.438rem;
    }
    
    h5 {
        font-size: 1.250rem;
    }

    h6 {
        font-size: 1.125rem;
    }

    .sticky {
        /* https://www.w3schools.com/css/css_positioning.asp */
        position: static;
        
    }
}