/* Palette */
:root{
  --black: rgb(51, 51, 51);
  --gray-dark: rgb(92, 92, 92);
  --gray:  rgb(156, 158, 157);
  --gray-light: rgb(199, 199, 199);
  --light: rgb(235, 235, 235);
  --gold:  rgb(232, 223, 146);
  --blue:  rgb(158, 210, 206);
  --green: rgb(158, 240, 206);
}


* { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    margin: 0px;
}


section.nav_bar,
div.nav_left,
figure.icon {
    display: flex;
    flex-wrap: wrap;
}

body {
    background-color: var(--black);
    padding: 0px;
    margin: 0px;
}


header {
    background-color: var(--gray);
    width: 100%;
    height: 10vh;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;

    section.nav_bar {
        height: 100%;
        width: inherit;
        align-items: center;
        justify-content: space-between;
        padding: 0.4rem 1.5rem;
        box-shadow: 0px 10px 20px rgb(0, 0, 0, .20);

        nav.nav_left {
            height: 100%;
        }

        nav.nav_right {
            height: 100%;
            
            ul.nav_list {
                list-style-type: none;  
            }
        }
   
        figure.icon {
            height: 100%;
            width: auto;
            align-items: center;
            justify-content: center;
            gap: 1rem;

            img.icon {
                height: 80%;
                width: auto;
            }
            
            figcaption.icon {
                color: var(--light);
                font-size: clamp(1rem, 2vw, 1.5rem);
                text-align: center;
            }
        }

    }
}








figure.home {
    width: 100%;
    background-color: var(--gray-dark);

}


img.home {
    width: 100%;
    filter: blur(0px);
    transition: filter 1s ease-out;
}

img.home:hover {
    filter: blur(1px);
}