@font-face {
  font-family: 'TahomaXP';
  src: url("fonts/TahomaXP.otf") format("opentype")
        }
        .box {
          margin: 50px auto;
          max-width: 1000px;
          display: grid;
          grid-gap: 10px;
          font-family: 'TahomaXP';
        }
        nav, footer {
        background-image: url(images/buttons/Navbar_2.png); background-size: 100%;
        background-color: transparent;
        filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
        padding: 10px 20px;
        }
        
        nav, main, footer {
          max-width: 1000px;
          border-radius: 10px;
          border-width: 10px;
          padding: 10px;
        }

        header {
          filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
          grid-row: 1 / 2;
          grid-column: 1 / 3;
        }

        nav {
          grid-row: 2 / 3;
          grid-column: 1 / 3;
        }

        main {
          background-color: rgb(255, 255, 255, 0.35);
          background-blend-mode: hard-light;
          grid-row: 3 / 4;
          grid-column: 1 / 3;
        }

        footer {
          grid-row: 4 / 5;
          grid-column: 1 / 3;
        }
        .button1 {
          background-image: url(images/buttons/Home-button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button1:hover {
            background-image: url(images/buttons/Home_button_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button1:active {
          background-image: url(images/buttons/Home_button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button2 {
          background-image: url(images/buttons/About-button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button2:hover {
            background-image: url(images/buttons/About_button_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button2:active {
          background-image: url(images/buttons/About_button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button3 {
          background-image: url(images/buttons/IG-button.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button3:hover {
            background-image: url(images/buttons/IG-button_hover.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button3:active {
          background-image: url(images/buttons/IG-button-pushed.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button4 {
          background-image: url(images/buttons/Ryou_Button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button4:hover {
            background-image: url(images/buttons/Ryou_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button4:active {
          background-image: url(images/buttons/Ryou_Button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button5 {
          background-image: url(images/buttons/Bluesky-button.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button5:hover {
            background-image: url(images/buttons/Bluesky-button-hover.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button5:active {
          background-image: url(images/buttons/Bluesky-button-pushed.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button6 {
          background-image: url(images/buttons/LI-button.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button6:hover {
            background-image: url(images/buttons/LI-button_hover.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button6:active {
          background-image: url(images/buttons/LI-button_pushed.png); background-size: 37px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 37px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button7 {
          background-image: url(images/buttons/Portfolio-button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button7:hover {
          background-image: url(images/buttons/Portfolio_button_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button7:active {
          background-image: url(images/buttons/Portfolio_button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button8 {
          background-image: url(images/buttons/My-Music-button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button8:hover {
          background-image: url(images/buttons/My-Music_button_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button8:active {
          background-image: url(images/buttons/My-Music_button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button9 {
          background-image: url(images/buttons/Collection-button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button9:hover {
          background-image: url(images/buttons/Collection_button_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button9:active {
          background-image: url(images/buttons/Collection_button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button10 {
          background-image: url(images/buttons/Blog-button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button10:hover {
          background-image: url(images/buttons/Blog_button_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button10:active {
          background-image: url(images/buttons/Blog_button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button11 {
          background-image: url(images/buttons/Contact-button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button11:hover {
          background-image: url(images/buttons/Contact_button_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button11:active {
          background-image: url(images/buttons/Contact_button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button12 {
          background-image: url(images/buttons/Guestbook-button.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
          transition: 0.3s ease-out;
        }
        .button12:hover {
          background-image: url(images/buttons/Guestbook_button_hover.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }
        .button12:active {
          background-image: url(images/buttons/Guestbook_button_pushed.png); background-size: 94px;
          font-family: 'TahomaXP'; font-size: 17px; color: white;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          border: none;
          background-color: transparent;
          margin: 2px 5px;
          display: inline-block;
          width: 94px;
          height: 37px;
          box-sizing: border-box;
          cursor: pointer;
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
        }