/* set the global pallet */
:root{
  --bg: #140e1eff;
  --bg-foot: #222;
  --accent: #588157ff;
  --bg-nav: #d5e5feff;
  --text: #c6ebc3ff;
  --nav-text: #120f04ff;
  --nav-hover: #ffffffff;
  --nav-select: #a3c6fdff;
}

@media (prefers-color-scheme: light){/* if for some reason they like light mode */
  :root{
		--bg: #d5e5feff;
  	--bg-nav: #140e1eff;
  	--text: #120f04ff;
  	--nav-text: #c6ebc3ff;
    --nav-hover: #2d233eff;
    --nav-select: #020104ff;
  }
}

/*  basic layout */
body{
	background-color: var(--bg-foot);
  color: var(--text);
}

.main-scroll{
	background-color: var(--bg);
  border-radius: 0% 0% 50% 50% / 0% 0% 50px 50px;
  margin-left: 24px;
  margin-right: -24px;
  padding:  60px calc(1em + 24px) 50px calc(1em + 24px);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  & section{
  	max-width: 40em; 
    margin: 1em;
  }
  & h1{
  	font-size: 2.5em;
    margin: 0.1em;
  }
  & h2{
  	font-size: 1.8em;
    margin: 0.1em;
  }
}

.edge-image{
  float: right;
  text-align: center;
  & img{
  	max-width: 20em;
  	max-height: 20em;
    shape-outside: url(https://projects.codecraftworks.com/web/AQdwj7Z9PwxqSiPwWvbu/assets/Ship.png);
  }
}

#contact-info{
  color: white;
  margin: 1em auto;
  padding-left: 48px;
  max-width: 30em;
  text-align: center;
}


/* Nav menu */
#skip{
	position: fixed;
  top: 0;
  left: 0; 
  background-color: white;
  color: black;
  height: 0;
  font-size: 1.5em;
  z-index: 1;
  overflow: clip;
  &:link, &:visited{
  	color: black;
  }
  &:focus{
    height: 1em;
    padding: 0.2em;
  }
}
.f-nav{/*big nav box/header*/
  position: fixed;
  width: 48px;
  height: 100%;
  top: 0;
  left: 0;
	display: flex;
  flex-direction: row;
  color: var(--nav-text);
}

.nav-box{/*the <nav> part of the nav menu*/
	background-color: var(--bg-nav);
  width: 48px;
  display: flex;
  flex-direction: column;
}

.nav-item{/*use for nav links containing an icon and a text block*/
  display: flex;
  flex-wrap: nowrap;
  text-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  overflow: clip;
  margin: 0.3em 0;
  width: 48px;
	transition: width 0.2s ease-out;
  font-size: 1.3em;
  background-color: var(--bg-nav);
  padding: 0em;
  & label{
  	margin: auto 0.5em auto 0;
    padding: 0em;
  }
  & img{
  	width: 48px;
    margin: auto 0;
  }
  &:hover{
  	background-color: var(--nav-hover);
  }
  &:focus-within{
  	background-color: var(--nav-select);
  }
  &:link{
  	color: var(--nav-text);
    text-decoration: none;
  }
  &:visited{
  	color: var(--nav-text);
    text-decoration: underine;
  }
}

#logo{
  position: relative;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  background-color: white;
  border-radius: 0 0 30px 0;
  margin-right: 1em
}

#menu-tab {
  margin-top: 1em;
  width: 48px;
  height: 58px;
  background-color: var(--bg-nav);
	& img{
    transition: all 0.15s ease-out;
    width: 48px;
    height: 38px;
    margin-top: 10px;
  }
}

#toggle-size{
	display: none;
}

#toggle-size:checked ~ .nav-box,  *.nav-box:focus-within{/*trigger animations to expand*/
  & a{
  	width: 100vw;
  }
  & label img{
  	transform: rotate(-180deg);
  }
}

@media (min-width: 64em){/*wait, we arn't a phone?*/
  .f-nav{
    width: 100%;
    height: 90px;
  }
  
  .nav-box{
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }
  
  #menu-tab{
  	display: none;
  }
  
  .nav-item{
    width: auto;
    margin: auto 0.3em 0 0;
    height: 55px;
    padding: 0.1em;
    outline: solid 1px var(--accent);
    & img{
      height: 45px;
    }
  }
  
  #toggle-size:checked ~ .nav-box,  *.nav-box:focus-within{
    & .nav-item{
      width: auto;
    }
  }
  
  .main-scroll{
    margin-left: -5%;
    margin-right: -5%;
    padding: calc(90px + 1em) calc(5% + 1em) 50px calc(5% + 1em);
  }
  
  #contact-info{
  	padding-left: 0;
  }
}

/*stager animation*/
#nav-a{
	transition-delay: 0s;
  max-width: 80vw;
}
#nav-b{
	transition-delay: 0.02s;
  max-width: 75vw;
}
#nav-c{
	transition-delay: 0.04s;
  max-width: 70vw;
}
#nav-d{
	transition-delay: 0.06s;
  max-width: 65vw;
}

@media (prefers-reduced-motion){/* Turn off menu animation */
  #menu-tab img, .nav-item{
  	transition: all 0s;
  }
  #nav-a, #nav-b, #nav-c{
  	transition-delay: 0s;
  }
}