/** { box-sizing: border-box;
}*/
*:visited{
    color:var(--text);
}
*:link{
    color: var(--text);
    text-decoration: none;
}


:root {
    --hue1: 0;
    --hue2: 0;
    --sat: 0%;
    --text: white ;
    --primary: hsl(88, 90%, 50%);
    --secondary: hsl(88, 90%, 20%);
    --tertiary: orange;
    --background: black;
}
html{scroll-behavior: smooth;}
body {font-family:Arial, Helvetica, sans-serif; background-color: var(--background); }
header {
    font-family:"Michroma";
    padding: 10px;
    margin: 5px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: var(--primary);
    color: black;
}
footer {
    width: 100%;
    color: var(--text);
    text-align: center;
    font-size: 12px;
    font-family: "Michroma", sans-serif;
    padding: 5px;
    display: flex;
    flex-direction: column;
}
.contact:link {
    text-decoration: underline;
    font-size: large;
}

main{
    padding: 0px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;  
    color: var(--text);
    background-color: var(--background);
    color: var(--text);

}
h3 {font-family:"Michroma";
background-color: var(--primary);
color: black;
padding: 5px;
}

nav{
    flex-wrap: nowrap;
    font-family: "Michroma";
    display: flex;
    justify-content: flex-start;
    background-color: var(--secondary);
    position: sticky;
    top: 0;
    margin: 5px;
}
.sub-content-row{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    column-gap: 20px;
}
.sub-content-column{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    }
.nav-button {
    text-wrap: nowrap;
    color: black;
    background-color:var(--primary);
    padding: 10px;
    /*border-radius: 5px;*/
    /*outline: 2px solid var(--primary);*/
}

.nav-button:hover{
    color:var(--primary);
    background-color: var(--secondary);
}
.hidden {display: none;}

.header-logo {
    display: flex;
    justify-content: flex-start;
}