@font-face {
   font-family: "handFont";
   src: url("assets/fonts/Donika Upper Hand.ttf") format("truetype");
   src: url("assets/fonts/Donika Upper Hand.otf") format("opentype"),
}

@font-face {
   font-family: "regularHand";
   src: url("assets/fonts/Donika Regular Hand.otf") format("opentype");
   src: url("assets/fonts/Donika Regular Hand.ttf") format("truetype");
}

* {
   font-family: handFont;
   margin: 0;
   padding: 0;
}

body {
   background-color: #f7f7f7fd;
   background-image: url(http://www.transparenttextures.com/patterns/lined-paper-2.png);
}

p {
   font-family: regularHand;
}

.back-button {
   font-family: handFont;
   font-size: 2.5rem;
   padding: 20px;
   text-decoration: none;
}

.left {
   position: fixed;
   width: 20%;
   left: 18%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.left img {
   width: 90%;
   max-width: 300px;
}

.middle {
   position: fixed;
   top: 50%;
   left: 40%;
   transform: translate(-50%, -50%);
}

.middle h1 {
   font-size: 4.0vmax;
}

.middle h3 {
   font-family: regularHand;
   font-size: 1.25vmax;
}

.middle h4 {
   font-family: regularHand;
   font-size: 0.75vmax;
}

.right {
   position: fixed;
   top: 50%;
   right: 0%;
   transform: translate(-50%, -50%);
}

.right ul {
   list-style: none;
}

.right a {
   font-size: 3.0vmax;
}

a {
   color: rgb(24, 18, 19);
   text-decoration: none;
}

a:hover {
   color: rgb(255, 0, 106);
}

.back {
   font-size: 2.5vmax;
   text-decoration: none;
}

.back:hover {
   color: rgb(255, 0, 106);
}


.notes {
   width: 60%;
}