html { 
  overflow-y: scroll; 
  cursor: url(https://cursors2.totallyfreecursors.com/thumbnails/brown1.gif), auto;
}
/*#f7f2de*/
:root{

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

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


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


@font-face {
  font-family: Nintendo-DS-BIOS;
  src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
  }
@font-face {
   font-family: Star-Crush;
  src: url(./star-crush/Star_Crush.ttf);
  }

  #Nintendo-DS-BIOS {
    font-family: Nintendo-DS-BIOS;
    }

 

  #Nintendo-DS-BIOS {
    font-family: Nintendo-DS-BIOS;
    }

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

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

    background: url(./swirly.jpg);
    
    display: grid;
    grid-template:
    "header  header  header"
    "nav     main    sidebar"
    "nav2    main   sidebar2"
    "nav3    main   sidebar3"
    "nav4    main   sidebar4"
    "footer  footer  footer" /
     20%    60%    20%;
    gap: 0px;
      
      > header {
        grid-area: header;
      }
}

.header {
    display: grid;
    grid-template: 
      "...... ........... ......" 1fr
      "auto "title-bar" auto"
      "...... ........... ......";
  }

  .title-bar {
    grid-area: title-bar;


    background-color: #424438;
    background: url(https://64.media.tumblr.com/3121856332829ee998225951bc41127e/c33ef4067bcde5db-2a/s250x400/a0d0822d24db2c0722060e182a72ae6cd0a85eb4.jpg);
    background-repeat: repeat;
    background-size: 50%, 100%;

    box-shadow: rgb(242, 75, 75);

    border-style: var(--border-style);
    border-color: rgb(39, 34, 34);
    border-width: var(--border-width);

    text-shadow: .5px .5px 3px #ffd000;

    border-radius: 5px;
    position: relative;
    height: 20px;
    margin-bottom: 10px;

    p {
      font-family: Star-Crush;
      font-size: 30px;
      position: absolute;
      margin: auto;
      left: 430px;
      top: 10px;
      font-style: italic;
      color: #dfe1d7;

    }
    
    padding: 10px;
  }

#contenttext {
    text-align: center;
    margin: 50px;

    display: table;
    background-color:rgba(88, 92, 62, 0.1);
    background-position: 100px 100px;
}



.prim-links {
    grid-area: nav;
    background-color: var(--background-color);
    
    box-shadow: var(--box-shadow);
    border-style: var(--border-style);
    border-color: var(--border-color);
    border-width: 2px 0px 2px 2px;
    border-radius: 10px 0px 0px 0px;


    ul {
        display: inline;
        list-style: none;
        text-align: center;

    }
  
    a {
        color: #1d180f;
        font-size: 20px;
        text-decoration: wavy;   
    }
    a:hover {
      font-style: italic;
    }

}


.left-col2 {
  grid-area: nav2;

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

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

  padding: 5px;
  text-shadow: .5px .5px 3px #898573;

  box-shadow: var(--box-shadow);
  font-size: 10px;

  img {
    display: flex;
    width: 100px;
    margin: auto;
  }

  p {
    margin-top: 5px;
    text-align: center;
    font-size: 130%;
  }
}

.left-col3 {
  grid-area: nav3;
  background-color: var(--background-color);

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

  background-clip:padding-box;


  text-shadow: .5px .5px 3px #898573;
  text-align: center;

  box-shadow: var(--box-shadow);
  font-size: 10px;

  p {
    overflow: scroll;
  }
}

.star-counter {
  grid-area: nav4;
  text-align: center;
}


.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: 0px 0px 10px 10px;

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

    padding: 1px;

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

.right-col1 {
    grid-area: sidebar;
    max-height: 100%;

    padding-top: 20px;

    border-style: var(--border-style);
    border-radius: 0px 10px 0px 0px;

    border-width: 2px 2px 2px 0px;
    border-color: #181d05;
    text-align: center;

    background: url(./profile.jpg);
    background-size: 200%;

    background-clip:padding-box;
    box-shadow: .5px .5px 10px #090b02 inset;

    font-size: 17px;

  
  .col-contents {


  ul {
      list-style: none;

      display: flex;
   }

    a {
      color: #3d3830;
      font-size: 15px;
      overflow: hidden;
    }
  }
}

.right-col2 {
    grid-area: sidebar2;
    background-color: var(--background-color);

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

    text-align: center;

    background-clip:padding-box;


    box-shadow: var(--box-shadow);
    font-size: 16px;
    color: #3d3830;

    a {
      color:#3d3830;
    }

}

.right-col3 {
    grid-area: sidebar3;
    background-color: var(--background-color);

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

    text-align: center;

    background-clip:padding-box;


    box-shadow: var(--box-shadow);
    font-size: 16px;
    color: #3d3830;

}