body {
  font-size: 16px;
  background-color: black;
  font-family: 'Josefin Sans', sans-serif;
  color: bisque;
  }

  .wrapperAll {
    text-align: center;
    color: bisque;
    background-color: black;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 5% auto 5%;
    grid-template-rows: auto auto auto;
    grid-template-areas:  "header header header" 
                          "leftSide middle rightSide" 
                          "footer footer footer";
    column-gap: 15px;
    margin: 0;
  }

    header {
      grid-area: header;      

    }

      .logo img {
        border: 5px solid rgb(20, 6, 20);
        width: 100%;
        height: auto;
        max-width: 600px;

      }

    .calcWrapper {
      display: flex;
      justify-self: center;
      justify-content: space-between;
      grid-area: middle;
      max-height: 335px;
      width: auto;
    }

  
      .manaInputWrapper {
        display: flex;
        flex-direction: column;
        padding: 1%;
        width: 200px;        
        border: 2px solid bisque;
        border-radius: 25px;
        background-color: rgb(29, 29, 29);
      }   

        form label {
          margin-top: 14px;
          display:flex;
          justify-content: center;
        }

        .manaIconInput {
          max-width: 18px;
          height: auto;
          margin-right: 5px;

        }
          
          input[type="number"] {
            width: 50px;
            color: bisque;
            background: rgb(58, 58, 58);
            padding: 2px;
            border-radius: 6px;
            text-align: center;
            border: none;
            font-size: 15px;
          }

          #submitButton {
            justify-self: flex-end;
            background-color: rgb(58, 58, 58);
            color: bisque;
            border-color: bisque;
            border-radius: 5px;
            font-size: 16px;
            width: 90px;
            height: 25px;
          }
        
        .result {
          background-color: rgb(29, 29, 29);
          display: flex;
          flex-direction: column;
          padding: 1%;
          width: 200px;
          border: 2px solid bisque;
          border-radius: 25px;
        }

        .result table{
          border-collapse:separate; 
          border-spacing: 8px 10px ;
          table-layout: fixed;
          width: 200px; 
        }
          
          .result tr{
            border-spacing: 12.5px;
          }

          .result th{
            display: table-cell;
            text-align: justify;
            margin-right: 10px;
            background-color: rgb(58, 58, 58);
            border-radius: 5px;
            text-align: justify;
            padding-left: 5px;
            
          }

          .result td{
            align-items: center;
            margin-top: 12.5px;
            background-color: rgb(58, 58, 58);
            border-radius: 5px;
          }
          
          .manaIconResult{
            max-width: 18px;
            height: auto;
            margin-top: 2px;
          }

      .leftSidebar {
        grid-area: leftSide;
      }

      .rightSidebar {
        grid-area: rightSide;
      }

      .footer {
        grid-area: footer;
        color: bisque;
        padding-bottom: 1em;
      }

        .footer a {
          color: bisque;
        }

        .navBar {
          color:bisque;
          display: flex;
          justify-content: center;
          align-items: center;
          align-content: space-between;
          flex-direction: row;
        }

          .navBar ul {
            list-style-type: none;
            display:flex;
            justify-content: space-between;
            border: 2px groove bisque;
            background-color: rgb(58, 58, 58, 0.5);
            border-radius: 25em;
            padding-right: 30px;
          }

          .navBar a {
            color: bisque;
            display: flex;
            margin: 1em 10px 0px 10px;
          }

@media (max-width: 700px) {

  .calcWrapper {
    display: flex;
    flex-direction: column;
  }
  
  .manaInputWrapper {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .result table {
    padding-bottom: 10px;
  }

  .footer {
    padding-top: 15px;
    margin-top: 265px;
    display: flex;
    flex-direction: column;
  }

  .navBar ul{
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    padding-bottom: 20px;
    max-width: 140px;

  }
}

@media (min-width: 701px) {
  .result {
    margin-left: 20px;
  }
}