html,body{
  font-size:100%;
  margin:0;
  padding:0;
}
body{
  display:grid;
  min-height:100vh;
  background-color:#a09de8;
  grid-template-columns:10rem 1fr;
  grid-template-rows:2rem 1fr 2rem;
  grid-template-areas:
    'header header'
    'nav main'
    'footer footer';
}
body>header{
  grid-area:header;
  display:flex;
  line-height:2rem;
  padding:0 1rem;
  aside{
    flex:1;
    text-align:right;
  }
}
body>nav{
  grid-area:nav;
  display:flex;
  flex-direction:column;
  padding-top:1rem;

  a{
    display:inline-block;
    padding:1rem;
    color:white;
    text-decoration:none;
    &:hover{
      background-color:#8582d3;
    }
    &.current{
      background-color:#EF767A;
      position:relative;
      &:after{
        content:'>';
        position:absolute;
        right:1rem;
      }
    }
  }
}
body>footer{
  grid-area:footer;
}

main{
  grid-area:main;
  background-color:#ECFEFA;
  padding:1.5rem;
  box-shadow:0 0 3px #ff00eb;
  border-top-left-radius:1rem;
  border-bottom-left-radius:1rem;
  &>:first-child{
    margin-top:0;
  }
}


.flash{
  position:absolute;
  right:3rem;
  top:3rem;
}
.flash p{
  background-color:#eee;
  border:1px solid #888;
  padding:1rem;
  border-radius:3px;
  &.info{
    background-color:#29e329;
    border-color:#0e620e;
  }
}


.index{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;

  &>a{
    display:inline-block;
    width:12rem;
    height:4rem;
    background-color:#e8e8e8;
    border:1px solid #888;
    border-radius:3px;
    transition:background .1s;
    text-decoration:none;
    color:black;
    padding:1rem;

    &:hover{
      background-color:#eee;
    }
  }
}

#stackinfo{
  font-size:80%;
  margin:0;
  text-align:center;
  line-height:2rem;
}