@font-face {
  font-family: "MellyFont";
  src: url("Helvetica Neue LT Std 55 Roman.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "MellyFont", sans-serif;

  margin: 0;
  padding: 0;
  
  background-image: linear-gradient(#0007, #0007), /* I dead ass would do exact same thing with dark overlay that you did, but gonna be the first larper */
                    url('Background.png');         /* https://www.reddit.com/r/okbuddyrintard/s/Z0wXXmT801 this shit applies gradient with exact same color */
  background-position: center;                     /* #000 is just plain black, and 4th number represent alpha from lightest to darkest, can play around by removing 4th number or changing. */
  background-attachment: fixed;
  background-size: cover; /* background-repeat is obsolete here, because cover already size it up to all free space */
  
  display: flex; /* flexbox layout, which let you do a lot of annoying things with positions easy, applying "flex" to body as display, don't make all elements flex */
  /* "flex-direction: row" row is default behavior in flex, so all elements arranged from left to right, and column for behavior closer to the default html */
  
  color: white;
  text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black
}

a {
  color: #FFE8F9;
}

a:visited {
  color: #CEC6FF;
}

a:hover {
  color: #FFBAE9;
}

#menu {
  display: flex; /* so div links also need to be flex */
  min-height: 100vh; /* making it take 100% of screen */
  max-width: 22.9%; /* we setting max-width of container for menu links, for adaptivity to window size*/
  flex-direction: column; /* and here we gonna set it to column so it display images from top to bottom,
  ultimately having exact same layout you had without absolute position and pixel hunting */
  justify-content: flex-start;  /* positioning stuff in flex vertically */
  align-items: center; /* positioning stuff horizontally, in this case used to align updates to the center */
  /* ass naming tho, this is why me still don't remember which shit exactly do what since I myself write html once in two years */
  /* also idk if you even want it centered!! */
  padding-top: 25px;
  
  a {
    display: flex; /* for whatever reason, you can't remove this default <a> padding with padding
    so just putting it to anything other than default display mode, to have your no gaps buttons 
    also you can see, there is this cool nested way to apply styles to elements inside specific element */
  }
  
  /* or if you want gaps you can either remove this block above, or use
  gaps: px, whatever you want px here */
}

/* while I did reworked the way it was, for the future, instead of
using 4 classes that do the same (width and border), it would be more
convenient to have one class that apply width and border,
you can apply multiple classes like class="menu-link pos-class1" */
.menu-link {
  margin: 0;
  width: 325px; /* in this context 100% means 22.9% because it's max-width of #menu */
  border: 2px solid black;
  margin-left: 12px;
}

#updates {
  overflow-y: auto;
  border: 2px solid white;
  max-width: 100%; /* while I do it to show adaptivity of design, it still highkey not usable in way it looks */
  height: 70px;
  margin: 16px;
  margin-bottom: 8px;
  padding: 5px 15px;
  box-sizing: border-box;
  
  a, p {
    margin: 0px;
  }
  
  p:first-child { /* you can read about more pseudo-classes things in google, useful, tho you probably don't need more than first-child and last-child */
    margin-bottom: 8px;
  }
}

#content {
  margin: 36px;
  max-width: 100%; /* while it may be obvious, but we taking 100% because content is between menu and right block */
  flex-grow: 1;
  h1 {
    margin: 0;
  }
  
  /*#interests {      Obsolete now, because instead of setting one individual margin for #interests
    margin-top: 24px; Every single .box now just gonna have same margin from bottom, ending with same thing as this
  } */
}

/* NEWINFO */
/* I honestly didn't thinked about it, since I was focused on rewriting home page */
/* But if you planning to add more boxes in content, then create class for stuff that supposed to share values */
.box {
  padding: 20px 15px 15px 15px;
  border: 2px solid white;
  
  margin-bottom: 24px;
}

.center-h {
  h1,h2,h3,h4,h5,h6 {
    text-align: center;
  }
}
/*
  NEWINFO
  So, if something supposed to act the same way, you don't need any more styles
  You just make them all the same class, and id if it's something that supposed to be unique
  Now if you want to add more boxes into page
  
  <div id="content">
    <div class="box">
      THIS WOULD BE THE FIRST BOX
    </div>
    
    <div class="box">
      THIS WOULD BE THE SECOND
    </div>
    
    <div class="box center-h">
      <h1>Hello</h1>
      AND THIS WOULD BE THE THIRD, WITH CENTERED HEADER TEXT
      <div id="melly-button"></div>
    </div>
    
    <div class="box">
      AND ANOTHER ONE BOX
      THO MELLY BUTTON WON'T BE IN IT, BECAUSE IT WOULD BE AT BOTTOM OF THIRD BOX
    </div>
  </div>
*/

#notrealandfriends {
  text-align: center; /* I didn't put display: flex here even though it still would have been useful here to center stuff*/
  max-width: 625px;   /* To show another useful trick, altrough it would work even with display: flex, but just to show */
  margin-top: 30px;   /* you another way without relaying on Flex's center aligement */
  
  #fgo {
    width: 100%;
  }
}

#gifs {
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid white;
  max-width: 180px;
  margin-left: auto; /* this is the trick */
  margin-right: auto; /* by setting margins of opposite sides to auto, you can center element this way */
}

#melly-button {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  
  transform: translateY(38px); /* another way to move things, without relaying on those weird stuff like absolute and relative */
  
  textarea {
    overflow: hidden;
    resize: none;
    white-space: nowrap;
  }
}

#music-player {
  position: relative;
  cursor: pointer;
  width: 100px;
  height: 100px;
  
  margin-top: 24px;
}

.album-cover {
  width: 100px;
  height: 100px;
  background-color: black;
}

.cd {
  /* you actually don't need width: auto because it default value already in this case I think */
  height: 90px;
  position: absolute;
  top: 5px;
  left: 50px;
  
  z-index: -1; /* you can have negative z-index, so album-cover don't need it */
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* And the last thing I want to talk about is this, this let you override styles depending on various values
In this case it will be used to change layout a bit be more useful on phones */
@media only screen and (max-width: 700px) {
  body {
    flex-direction: column; /* For example, now menu is on top, content in the middle and bs nasu work on instead of writing mahoyo 2 at the end, and friends :3 */
  }
  
  #menu {
    min-height: unset; /* removing min-height so menu is size of content */
    flex-direction: row; /* also it's horizontal now */
    max-width: 100%; /* and making it take all width instead of 20% */
    
    flex-wrap: wrap; /* this thing allows to go into multi-line mode, i actually idk either, im reading about it rn because i didn't liked how menu turned out on phone XD */
    justify-content: center;
    

    #updates {
      max-width: 100%; /* this updates box look sick af now */
      height: 96px;
      
    }
    
    a {
      width: 96px; /* making them smaller so your menu not taking first half of the page, it look nice tho, you can remove to see */
    }
    
    img {
      margin: 0;
    }
  }
  
  .menu-link {
    margin: 0;
    width: 96px;
}
  
  .menu-link:last-child {
    margin-right: 16px;
  }
}