:root{
  --p-color: #1a1359;
  --s-color: #000;
}

*{
  color: #b8b1ac;
  margin: 0;
  padding: 0;
}

body{
  display: grid;

  header{
    grid-column: 1 / 12;
    background-color: var(--p-color);
    margin: 8px 8px 24px 8px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    h1{
      grid-column: 1 / 4;
      font-size: 48px;
    }

    .topnav{
      text-align: center;
    }

    div{
      grid-column: 4 / 11;
    }

    img{
      grid-column: 12 / 13;
      display:block;
      margin: auto 6px auto auto;
      opacity: 1;
    }
    img:hover{
      opacity: 0.3;
    }

  }

  .main{
    grid-column: 1/10;
    min-height: 320px;
    margin: 4px;


  }

  .right-section{
    grid-column: 10/12;

  }

  footer{
    grid-column: 1 / 12;
    padding: 20px auto;
    p{
      text-align: center;
    }
  }
}