@font-face{
  font-family: Juneau;
  src: url(../fonts/Juneau.ttf);
}


:root {
    /* Light Mode (Standard) */
    --color-bg: rgb(220,225, 230);
    --color-text: #000000;
    --color: rgb(255,110,210);
    --color2:rgb(35,240,70);
    --color3:rgb(190,200,210);
    --color4:rgb(160,170,180);
    --color5:rgb(100, 105, 100);
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  }


body{
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:none;
  font-family: "Juneau", sans-serif;
  font-size: 1.7em; 
  line-height:1.1;
  font-weight:450;
  color:black;
  background-color:var(--color-bg);
  margin:0;
  padding:0;
  overflow-x:hidden;
}

::selection{
  background-color:var(--color);
}


a{
  text-decoration:none;
  color:inherit;
}

a:hover{
  color:var(--color);
}

header{
  position: sticky;
  top:0px;
  width: 100%;
  padding: 0;
  z-index: 999;
}

header nav{
  display: grid;
  grid-template-columns: 1fr 1fr; 
  width: 100%;
}

header nav .title {
  justify-self: start;
}

header nav .info {
  justify-self: left;  
}

header nav span:hover{
  color:#a2a2a2;
}

.about {
  display: none;
  width: 100%;
  margin: 10px 0;
}

.about.show{
  display: inline-block;
}

.about p{margin: 0;}

.main {
  display:flex;
  align-items:left;
  width:100%;
}