header {
background: var(--secondary);
display: flex;
justify-content:space-between;
align-items: center;
text-align: center;
position: sticky;
z-index: 999;
width: 100%;
border-bottom:2px var(--primary) solid;
border-top-color:2px var(--primary) solid;
}

header a {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: normal;
border:none;
color: var(--primary);
text-transform: uppercase;
}

header a:hover{
color:var(--gold-light);
}
       
.logo {
display:flex;
align-items:center;
}
.symbol {
width:4.5rem;
height:4.5rem;
background-color: var(--primary);
margin-left:10px;
margin-top: 10px;
margin-bottom:10px;
}
.symbol a {
font: bold 4.3em 'Skia', sans-serif;
color:var(--secondary);
border:none;
margin:none;
padding:none;
}
.symbol a:hover{
color:var(--gold);
}

.gi{
text-align:center;
}

.gi a {
font: bold 1.3rem 'Playfair Display SC', serif;
}



    
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
} 
.nav-toggle-label {
position: absolute;
top: 0;
right: 0;
margin-right: 1em;
height: 100%;
display: flex;
align-items: center;
}
    
nav {
position: absolute;
top: 100%;
right: 0;
margin-right:40px;
background: var(--middle);
width: 50%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {border-top:2px var(--primary) solid;}   
nav li {
text-align:center;padding-top:20px;
}
nav li:last-of-type {border-bottom:none;padding-bottom:20px;}  
nav a {
opacity: 0;
transition: opacity 150ms ease-in-out;
}
    
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
    
.desktop{display:none;}
.mobile{display:block;}






@media screen and (min-width: 800px) {

.desktop{display:block;}
.mobile{display:none;}

nav {   
/* the following lines are not from my video, but add Edge support */
position: relative;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
margin-right:20px;
display: flex;
justify-content: flex-end;
align-items: center;
}

.nihongo{font-size:.66em;color:var(--gold-light)}

nav ul {display: flex;border:none;line-height:1.2em;}
nav li {margin-left: 1.3em;border:none;}
nav a {opacity: 1;position: relative;}
nav a::before {
content: '';
display: block;
height: 2px;
background:var(--gold-light);
position: absolute;
top: -0.33em;
left: 30%;
right: 1%;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {transform: scale(1,1);}

}