Added Harry Potter Font

fonts/info.txt

@@ -0,0 +1,2 @@
+license: Freeware
+link: https://www.fontspace.com/harry-p-font-f44342

fonts/misc/harryp-readme.txt

@@ -0,0 +1,16 @@
+A rather rough interpretation of a font based on
+the few letters supplied from a scan of the harry potter
+book.
+
+To actually type the words Harry Potter as it appears
+on the book cover type the following
+
+H   a   r   Alt0161   y
+P   o   t   Alt0164   e    Alt0165
+
+Alt0167 will save time by typing the word Potter whole.
+
+
+All best
+
+GM

hat.css

@@ -1,4 +1,7 @@
-
+@font-face {
+    font-family: 'HP';
+    src: url('./fonts/HP.ttf') format('truetype');
+}
 :root {
     --hat-color:#a77916;
     --hat-eye-color:#010101;
@@ -13,17 +16,17 @@
     text-shadow: 12px 12px 30px 30px rgba(168, 47, 47, 0.199);
 }
 #thoughts {
-
+    font-size: 3rem;
     color:white;
     margin-top: 30px;
-    font-family: sans-serif;
+    font-family: 'HP',sans-serif;
     white-space: nowrap;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
+    font-weight: normal;
     width: 30em;
     overflow: hidden;
-
 }
 @keyframes type{ 
     from { width: 0; } 

hat.js

@@ -83,7 +83,7 @@ class Hat {
         badgeDiv.style.backgroundColor=color;
         badgeDiv.innerHTML = `
         <img src='./pics/${name}.svg' class='badge-image'></img>
-        <h2 class="congrats"> Congratulations! </h2>
+        <h2 class="congrats hp"> Congratulations </h2>
         <p class='badge-description'> You have been sorted into <strong>${name.charAt(0).toUpperCase() + name.slice(1)}</strong> </p>
         <img src='./pics/${name}_badge.png' class='badge'></img>
         `

index.js

@@ -2,7 +2,7 @@
 const ANIM_TIME = 2;
 const FLOAT_ANIM_TIME = 3;
 const THINKING_TIME = 4;
-const THINKING_DURATION = 2;
+const THINKING_DURATION = 15;
 const BROOMS = 20;
 const STARS = 100;
 const STAR_ANIMATION_TIME = 20;

style.css

@@ -1,3 +1,7 @@
+@font-face {
+    font-family: 'HP';
+    src: url('./fonts/HP.ttf') format('truetype');
+}
 :root {
     --page-color:#1A472A;
     --theme-color:#010101;
@@ -9,6 +13,7 @@ html {
     padding: 0;
     margin: 0;
 
+
 }
 .badge-div {
     height: 30rem;
@@ -19,7 +24,6 @@ html {
     box-shadow: 1px 1px 30px -2px rgba(0,0,0,0.71);
     border-radius: 5px;
     color: #fff;
-    font-family: sans-serif;
 }
 .badge {
     width: 20rem;
@@ -33,6 +37,7 @@ body {
     margin: 0%;
     padding: 0%;
     width: 100%;
+
     height: 100%;
 }
 .star {
@@ -61,13 +66,20 @@ body {
     color: #ffff;
     font-weight: normal;
     font-size: 1.2rem;
+   font-family: 'HP',sans-serif; 
     background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
 
 }
 #sort-btn:hover {
     cursor:pointer;
 }
+.hp {
+ font-size: 4rem;
+ margin-top: 0px;
+ font-family: 'HP',sans-serif; 
 
+ font-weight: normal;
+}
 .github-corner {
     fill:#a77916;
 }