/* Positioning of website items */
* {
    margin: 0;
    padding: 0;
  }
  
  body {
    min-height: 100vh;
    background-color: antiquewhite;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  
  /* Navigation colors */
  nav {
    background-color: aquamarine;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  }
  
  /* Navigation box */
  nav ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  nav li {
    height: 50px;
  }
  
  nav a {
    /* anything in nav a containers is costumized */
    height: 50px;
    padding: 0 30px; /* spacing of texts */
    text-decoration: none;
    display: flex;
    align-items: center;
    color: black;
  }
  
  nav a:hover {
    /* Hover effects on the website */
    background-color: rgb(190, 255, 233);
  }
  
  /* The first on the list = firstchild */
  nav li:first-child {
    margin-right: auto;
  }
  
  .sidebar {
    /* .sidebar becomes a class name as the . is a class identifier */
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    z-index: 999;
    /* VV Hover effects background color VV */
    background-color: rgba(104, 255, 205, 0.117);
    backdrop-filter: blur(10px); /* Transparency */
    box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  .sidebar li {
    /* hover effect width */
    width: 100%;
  }
  
  .sidebar a {
    width: 100%;
  }
  
  /* Custom effect for mobile (hides the links when too small) */
  @media (max-width: 800px) {
    .hideonMobile {
      display: none;
    }
  }
  
  /* Sidebar extends when aspect ratio is 400pixels wide */
  @media (max-width: 400px) {
    .sidebar {
      width: 100%;
    }
  }