/* layout */
.item1 {
  grid-area: header;
  font-size: 20px;
  text-align: center;
}

.item2 {
  grid-area: menu;
  display:block;
  padding: 10px;
  overflow:hidden;
}

.item2 a {
  text-decoration: none;
  color:black;
  font-family: "Retrobyte";
  font-size: 20px;
}

.item2 li {
  border-bottom: 1px solid black; 
  padding: 10px; 
  list-style-type: none;
  }


.item2 li:last-child {
  border-bottom: none;
}

.item3 {
  grid-area: main;
  padding: 5px;
}

.item4 {
  grid-area: right;
  padding: 5px;
}

.item5 {
  grid-area:abcd;
  padding: 5px;
}

.item6 {
  grid-area: footer;
}

.item6 p{
  margin-left:5px;
}

.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main main right'
    'menu main main main main right'
    'menu main main main main abcd'
    'menu main main main main abcd'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: rgba(0,0,0,0);
  margin: 25px;
}

.grid-container > div {
  background-color: #2727f3;
  border: 3px black solid;
  box-shadow: 5px 5px black;
}

/* not layout*/
     h1 {
        font-family: "Gamilia Pixel Demo";
        color: #14147a;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        letter-spacing: 0.75px;
      }
      
      h2 {
        font-family: "Gamilia Pixel Demo";
        color: #14147a;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        letter-spacing: 1px;
      }
      
      h3 {
        font-family: "Gamilia Pixel Demo";
        color: #14147a;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        letter-spacing: 1.25px;
      }
      
      p {
        font-family: "Retrobyte";
        font-size: 20px;
        color: #14147a;
      }
      
      b {
        font-family: "Retrobyte";
        font-size: 20px;
        color: #19199a;
      }
      
      a {
        color: #14147a;
        text-decoration: underline wavy;
      }
      
      a:hover {
        color: #1d1daf;
        cursor: url(https://cur.cursors-4u.net/games/gam-12/gam1113.cur), auto !important;
      }
      
      
      
      
.link {
position: relative;
transition: clip-path 275ms ease;
}
.link:hover span::before, .link:focus span::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
cursor: url(https://cur.cursors-4u.net/games/gam-12/gam1113.cur), auto !important;
}
.link span {
position: relative;
display: inline-block;
}
.link span::before {
position: absolute;
content: attr(data-content);
text-decoration: underline;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
transition: clip-path 275ms ease;
}
span.dashed::before {
text-decoration-style: dashed;
}