:root{

  /* container/border attributes */
  --border-radius: 10px;
  --border-radius-left: 0px;
  --border-width: 2px;
  --border-style: solid;
  --border-color: #2f3125;
  --background-color: #9a9e87;

  --box-shadow: .5px .5px 10px #5e624f inset;
  /* alt color: #6e6352 */


  /* text */
  --font-size: 20px;
  --text-shadow: .5px .5px 3px #8985739f;
  --text-align: center;

    a {
        color: #3c3f2b;
        text-decoration: wavy;   
    }
    a:hover {
      font-style: italic;
    }
}

body {
  font-family: Nintendo-DS-BIOS;

    max-width: 600px;
    margin: auto;
    margin-top: 5%;

    background: url(./blotchy.jpg);
    display: grid;
    grid-template:
    "header  header  header"
    "nav     main    sidebar"
    "...  footer  ..." /
     20%    60%    20%;
    gap: 0px;
      
      > header {
        grid-area: header;
      }
}

.main-body {
    grid-area: main;
    text-align: left;

    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--border-color);
    border-radius: 10px;

    background-color: var(--background-color);

    padding: 20px;

    box-shadow: var(--box-shadow);
    

}

.abt-text {
    max-width: 200px;
    margin-top: -150px;
}

.body-grid{

    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 5px;
    margin: auto;
    margin-bottom: -30px;

}

.footer {
    grid-area: footer;

    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--border-color);
    border-radius: 10px;

    background-color: var(--background-color);
    background-clip: padding-box;

    padding: 5px;

    box-shadow: var(--box-shadow);

    text-align: center;
    margin: 10px 40% 10px 40%;

        a {
        color: #3d3830;
        text-decoration: wavy;   
    }
    a:hover {
      font-style: italic;
    }
}