body {
  background-image: url(https://i.pinimg.com/736x/98/c5/28/98c528cc888950ce4b55425ad627885e.jpg);
}



/* 1. Unvisited link */
a:link {
  color: #f43f86;
}

/* 2. Visited link */
a:visited {
  color: #fff099;
}

/* 3. Mouse over link */
a:hover {
  color: #f68fad;
}

/* 4. Active (clicked) link */
a:active {
  color: #42bfd4;
}


@font-face {
  font-family: Pixel; /* set name */
  src: url(https://files.catbox.moe/t8i891.ttf); /* url of the font */
}

.box {
    max-width: 1000px;
      margin: 60px auto;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 300px minmax(0, 1fr);
  justify-content: center;
}
header, nav, icon, main, section, footer {
    border: black 2px solid;
}
header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
    background: url("https://files.catbox.moe/072bll.gif");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
    height: 200px;
  color: white;
  font-family:'yipes';
  margin: 20px;
  padding: 15px;
    box-shadow:
        0 -4px 0 0 #7b237a,
    0 4px 0 0 #7b237a,
    -4px 0 0 0 #7b237a,
    4px 0 0 0 #7b237a;
    outline: 2px solid #ffe4b1;
   
}
nav {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  height: max-content;
        background: url(https://files.catbox.moe/6np0aa.png);

text-align: center;
    box-shadow:
        0 -4px 0 0 #6e0355,
    0 4px 0 0 #6e0355,
    -4px 0 0 0 #6e0355,
    4px 0 0 0 #6e0355;
    outline: 2px solid #ffe4b1;
text-shadow: 4px 1px  #1f0738; /* X-offset, Y-offset, blur-radius, color */
  justify-content: center; /* Centers horizontally */
  align-items: center;   
}/* Centers vertically */
          /* Ensures container takes up full screen height */
    .inner {
    text-shadow: none;
    width: 253px;
  background-color: #f4ffff;
    border-radius: 4px;
  background: #f4ffff;
  display: inline-table;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
    margin-bottom: 10px;
      /* Hex Code */
}
 .inner2 {
    text-shadow: none;
    width: 253px;
  background-color: #f4ffff;
    border-radius: 4px;
  background: #f4ffff;
  display: inline-table;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
    margin-bottom: 10px;
      /* Hex Code */
}
    .music {
    
    text-shadow: none;
    width: 253px;
  background-color: #f4ffff;
    border-radius: 4px;
  background: #f4ffff;
  display: inline-table;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
    margin-bottom: 10px;
      /* Hex Code */
}
 

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  height: max-content;
            background: url(https://i.pinimg.com/originals/90/9e/25/909e25893881b145777c4c02b69a788a.gif);

text-align: center;
    box-shadow:
        0 -4px 0 0 #6e0355,
    0 4px 0 0 #6e0355,
    -4px 0 0 0 #6e0355,
    4px 0 0 0 #6e0355;
    outline: 2px solid #ffe4b1;
text-shadow: 4px 1px  #1f0738; /* X-offset, Y-offset, blur-radius, color */
   justify-content: center; /* Centers horizontally */
  align-items: center;       /* Centers vertically */
          /* Ensures container takes up full screen height */
}
    .main {
    text-shadow: none;
    width: 253px;
  background-color: #f4ffff;
    border-radius: 4px;
  background: #f4ffff;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
        margin-bottom: 10px;
margin-left: 24px;
        margin-top: 15px;
   
 
}
.about {
      background-color: #4cc8d1;
    border-radius: 4px;
  background: #4cc8d1;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
        margin-bottom: 20px;
    margin-left: 22px
        
    
    
}
    .second {
    text-shadow: none;
    width: 253px;
  background-color: #f4ffff;
    border-radius: 4px;
  background: #f4ffff;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
    margin-bottom: 10px;
  margin-left: 24px;
        margin-top: 15px;
}
.interact {
      background-color: #4cc8d1;
    border-radius: 4px;
  background: #4cc8d1;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
        margin-bottom: 20px;
    margin-left: 22px
}
    .extras {
    text-shadow: none;
    width: 253px;
  background-color: #f4ffff;
    border-radius: 4px;
  background: #f4ffff;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
        margin-bottom: 10px;
margin-left: 24px;
        margin-top: 15px;
   
 
}

.extrainf {
      background-color: #4cc8d1;
    border-radius: 4px;
  background: #4cc8d1;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
        margin-bottom: 20px;
    margin-left: 22px
}
    .links {
    text-shadow: none;
    width: 253px;
  background-color: #f4ffff;
    border-radius: 4px;
  background: #f4ffff;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
        margin-bottom: 10px;
margin-left: 24px;
        margin-top: 15px;
   
 
}
footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
        background: url(https://files.catbox.moe/6np0aa.png);

text-align: center;
    box-shadow:
        0 -4px 0 0 #6e0355,
    0 4px 0 0 #6e0355,
    -4px 0 0 0 #6e0355,
    4px 0 0 0 #6e0355;
    outline: 2px solid #ffe4b1;
text-shadow: 4px 1px  #1f0738; /* X-offset, Y-offset, blur-radius, color */
  justify-content: center; /* Centers horizontally */
  align-items: center;   
}/* Centers vertically */
    .footerbox {
    text-shadow: none;
    width: 253px;
  background-color: #f4ffff;
    border-radius: 4px;
  background: #f4ffff;
  text-decoration: none;
  padding: 1px;
  line-height: 20px;
      border: solid #ea80b3 2px;
  box-shadow:
    inset -2px -2px #6d0050, inset 1px 1px #6d0050, inset -4px 3px #5a5997,
    inset 2px  #dfdfdf; outline: 3px solid #6d0050; 
        margin-bottom: 10px;
margin-left: 24px;
        margin-top: 15px;
   
 
}