Add fonts and move styles to styles folder

index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Odin Project: Rock Paper Scissors</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="./styles/style.css">
+    <link rel="stylesheet" href="./styles/fonts.css">
 </head>
 <body>
     <header><h1>Rock Paper Scissors</h1></header>

styles/fonts.css

@@ -0,0 +1,36 @@
+@font-face {
+    font-family: "Purisa-Bold";
+    src: url("../fonts/Purisa-Bold.ttf") format("truetype"),
+         url("../fonts/Purisa-Bold.woff") format("woff"),
+         url("../fonts/Purisa-Bold.woff2") format("woff2");
+    font-weight: 700;
+    font-style: normal;
+  }
+  
+@font-face {
+    font-family: "Purisa-BoldOblique";
+    src: url("../fonts/Purisa-BoldOblique.ttf") format("truetype"),
+         url("../fonts/Purisa-BoldOblique.woff") format("woff"),
+         url("../fonts/Purisa-BoldOblique.woff2") format("woff2");
+    font-weight: 700;
+    font-style: oblique;
+}
+  
+@font-face {
+    font-family: "Purisa-Oblique";
+    src: url("../fonts/Purisa-Oblique.ttf") format("truetype"),
+         url("../fonts/Purisa-Oblique.woff") format("woff"),
+         url("../fonts/Purisa-Oblique.woff2") format("woff2");
+    font-weight: 400;
+    font-style: oblique;
+}
+  
+@font-face {
+    font-family: "Purisa";
+    src: url("../fonts/Purisa.ttf") format("truetype"),
+         url("../fonts/Purisa.woff") format("woff"),
+         url("../fonts/Purisa.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+}
+  

styles/style.css

@@ -1,5 +1,5 @@
 body {
-    background-image: url("./images/paper-5985445_1920.jpg");
+    background-image: url("../images/paper-5985445_1920.jpg");
     background-size: cover;
     background-color: rgb(221, 125, 104);
     color: #eee;
@@ -45,21 +45,21 @@ main {
 }
 
 #rock {
-    background-image: url("./images/rocks-576653_640.png");
+    background-image: url("../images/rocks-576653_640.png");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }
 
 #paper {
-    background-image: url("./images/certificate-154169_640.png");
+    background-image: url("../images/certificate-154169_640.png");
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
 }
 
 #scissors {
-    background-image: url("./images/school-1555907_640.png");
+    background-image: url("../images/school-1555907_640.png");
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;