html,body{
  font-size:100%;
  margin:0;
  padding:0;
  font-family:sans-serif;
}
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;
  &>a{
    font-family:londrina,sans-serif;
    font-size:200%;
    text-decoration:none;
    color:black;
    &:hover{
      text-decoration:underline;
      font-style:italic;
    }
  }
  aside{
    flex:1;
    text-align:right;
  }
  h1{
    margin:0 0 0 2rem;
    font-family:chewy;
  }
  .actions{
    margin-left:1rem;
    a,input{
      display:inline-block;
      border:1px solid #888;
      background-color:#63ff6d;
      padding:0 .5rem;
      height:2rem;
      border-radius:4px;
      transition:background .1s ease,border-radius .1s ease;
      text-decoration:none;
      color:black;
      cursor:pointer;
      &:hover{
        background-color:#a1ffa7;
        border-radius:16px;
      }
    }
  }
}
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;
}