:root {
  --background: #282a36;
  --foreground: #f8f8f2;
  --selection: #44475a;
  --comment: #6272a4;
  --red: #ff5555;
  --orange: #ffb86c;
  --yellow: #f1fa8c;
  --green: #50fa7b;
  --purple: #bd93f9;
  --cyan: #8be9fd;
  --pink: #ff79c6;
}

body {
  background-color: var(--background);
  overflow: hidden;
}

ul {
  list-style-type: "~/";
}

.Main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.1fr 2.5fr 0.1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Header"
    "Body"
    "Footer";
  height: 98vh;
  width: 99vw;
  border-radius: 15px;
  font-family: "Fira Code", normal;
}

.Header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: space-evenly;
  grid-template-areas: "Home Projects Hobbies Skills About";
  justify-self: center;
  align-self: center;
  grid-area: Header;
  width: 73.4%;
  height: 100%;
  background-color: var(--comment);
  font-size: 20px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  background: linear-gradient(
    180deg,
    rgba(98, 114, 164, 1) 50%,
    rgba(40, 42, 54, 1) 100%
  );
}

.Body {
  display: grid;
  grid-template-columns: 0.4fr 2.2fr 0.4fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "SidebarL Content SidebarR";
  grid-area: Body;
  color: var(--green);
  overflow: hidden;
}

.Home {
  justify-self: center;
  align-self: center;
  grid-area: Home;
  font-family: "Press Start 2P", cursive;
  color: white;
}

.Home:hover {
  color: var(--pink);
  transition: 0.2s;
  font-size: large;
}

.Projects {
  justify-self: center;
  align-self: center;
  grid-area: Projects;
  font-family: "Press Start 2P", cursive;
  color: white;
}

.Projects:hover {
  color: var(--pink);
  transition: 0.2s;
  font-size: large;
}

.Hobbies {
  justify-self: center;
  align-self: center;
  grid-area: Hobbies;
  font-family: "Press Start 2P", cursive;
  color: white;
}

.Hobbies:hover {
  color: var(--pink);
  transition: 0.2s;
  font-size: large;
}

.Skills {
  justify-self: center;
  align-self: center;
  grid-area: Skills;
  font-family: "Press Start 2P", cursive;
  color: white;
}

.Skills:hover {
  color: var(--pink);
  transition: 0.2s;
  font-size: large;
}

.About {
  justify-self: center;
  align-self: center;
  grid-area: About;
  font-family: "Press Start 2P", cursive;
  color: white;
}

.About:hover {
  color: var(--pink);
  transition: 0.2s;
  font-size: large;
}

.SidebarL {
  grid-area: SidebarL;
  border-top-left-radius: 100px;
  background-color: var(--comment);
  background: linear-gradient(
    90deg,
    rgba(98, 114, 164, 1) 50%,
    rgba(40, 42, 54, 1) 100%
  );
}

.SidebarLInner {
  padding: 10%;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  justify-content: center;
  align-content: center;
}

.SidebarR {
  grid-area: SidebarR;
  border-top-right-radius: 100px;
  background-color: var(--comment) var(--background);
  background: linear-gradient(
    90deg,
    rgba(40, 42, 54, 1) 10%,
    rgba(98, 114, 164, 1) 100%
  );
}

.SidebarRInner {
  padding: 10%;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  justify-self: center;
  align-self: center;
}

.Content {
  grid-area: Content;
  background-color: var(--background);
  overflow: hidden;
  overflow-y: auto;
}

.ContentInner {
  padding: 30px;
  justify-self: center;
  align-self: center;
}

.Footer {
  justify-self: stretch;
  /* justify-self: center; */
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-top: 1px dotted black;
  grid-area: Footer;
  background-color: var(--comment);
}
