/* Scroll Bar */
/* Set the styles for the scrollbar track */
::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
  }
  
  /* Set the styles for the scrollbar thumb (handle) */
  ::-webkit-scrollbar-thumb {
    background-color: #c0c0c0; /* Set the color of the scrollbar thumb */
    border-radius: 5px; /* Set the border radius to make it rounder */
  }
  
  /* Set the styles for the scrollbar track when not hovered */
  ::-webkit-scrollbar-track {
    background-color: transparent; /* Set the color of the scrollbar track */
  }
  
  /* Set the styles for the scrollbar thumb when hovered */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a0; /* Set the color of the scrollbar thumb on hover */
  }
  
  /* Set the styles for the scrollbar corner */
  ::-webkit-scrollbar-corner {
    background-color: transparent; /* Set the color of the scrollbar corner */
  }
  
  /* Set the styles for the scrollbar track piece above the thumb */
  ::-webkit-scrollbar-track-piece:start {
    background-color: transparent; /* Set the color of the top track piece */
  }
  
  /* Set the styles for the scrollbar track piece below the thumb */
  ::-webkit-scrollbar-track-piece:end {
    background-color: transparent; /* Set the color of the bottom track piece */
  }
  
  /* Set the styles for the scrollbar handle (resizer) */
  ::-webkit-scrollbar-resizer {
    background-color: #f1f1f1; /* Set the color of the resizer */
  }
  
  /* Screen Size */
  
  .smaller {
    display: none;
  }
  
  .larger {
    display: none;
  }
  
  
  /* Smaller */
  @media only screen and (max-width: 1299px) {
    .container {
      position: fixed;
      width: 100%;
      height: 100vh;
      overflow: hidden;
  }
  
  body {
      background-image: url(background.png);
      background-size: 100%;
  }
  
  .smaller {
    display: block;
  }
  
  #topnote {
    position: fixed;
    width: 65vw;
    max-width: 450px;
    top: 0;
    right: 0;
  }
  
  #bottomnote {
    position: fixed;
    width: 420px;
    bottom: 0;
    left: 0;
  }
  
  .div1 {
    position: fixed;
    top: 30%;
    width: 60%;
    height: 4vh;
    left: 60px;
    text-align: left;
  }
  
  p {
    font-family: "al";
    font-size: 30px;
  }
  
  p1 {
    font-family: "mine";
    font-size: 20px;
  }
  
  p3 {
    font-family: "al";
    font-size: 17px;
  }
  
  p2 {
    font-family: "al";
    font-size: 7vmin;
  }
  
  p4 {
    font-family: "al";
    font-size: 20px;
  }
  
  .div2 {
    position: fixed;
    width: 100vw;
    bottom: 9%;
    left: 89px;
    rotate: 20deg;
    height: 120px; 
    max-width: 280px
  }
  
  .div3 {
    position: fixed;
    left: 45px;
    top: 15px;
  }
  
  #feat {
    position: fixed;
    bottom: 220px;
    rotate: 20deg;
    left: 160px;
  }
  
  }
  
  /* Larger */
  @media only screen and (min-width: 1300px) {
      .container {
          transform: scale(0.9);
         
      }
  
      body {
          background-image: url(notes\ background.png);
          background-repeat: no-repeat;
          background-size: 210vh;
          height: 100%;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          
      }
  
      .larger {
        display: block;
      }
  
      #notebook {
        position: fixed;
        width: 2100px;
        top: -235px;
        left: -191px;
      }
  
      p {
        font-family: "al";
        font-size: 30px;
      }
  
      p1 {
        font-family: "mine";
        font-size: 20px;
      }
  
      p2 {
        font-family: "al";
        font-size: 50px;
      }
  
      p3 {
        font-family: "mine";
        font-size: 40px;
      }
  
      p4 {
        font-family: "al";
        font-size: 30px;
      }
  
      .div1 {
      position: relative;
      top: 300px;
      height: 300px;
      width: 500px;
      left: -150px;
      }
  
      #feat {
        position: relative;
        left: 75px;
        top: 280px;
      }
  
      .div2 {
        position: relative;
        left: -260px;
        top: 540px;
        width: 500px;
        height: 420px;
      }
  
  .div3{
    position: relative;
    right: 750px;
    top: 110px;
  }
  
  #linkle {
    position: relative;
    right: -145px;
    top: -25px;
  }
  
  p5 {
    font-family: "al";
    font-size: 50px;
  }
  
  #updates {
    position: relative;
    top: -18px;
    left: 150px;
  }
  
  }
  
  @font-face {
    font-family: "mine";
    src: url(fonts/MyHandwriting-Regular.otf);
  }
  
  @font-face {
    font-family: "al";
    src: url(fonts/JMH\ Cthulhumbus\ Arcade.otf);
  }