Separated CSS data from html

stylesheets/bunny.css

@@ -0,0 +1,100 @@
+@font-face {
+    font-family: TagHandGraffitiTrash;
+    src: url("/Tag\ Hand\ Graffiti\ Trash.otf");
+}
+
+@font-face {
+    font-family: TagHandGraffitiTrashFat;
+    src: url("/Tag\ Hand\ Graffiti\ Trash_fat.otf");
+}
+
+body{
+    background-image: url("/media/Art/Mossaic.png");
+    height: 100%;
+    margin:0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding:10%;
+}
+
+#PageTitle{
+    position: fixed;
+    top: 15px;
+    left:15px;
+    background-color: white;
+    width: 360px;
+    height: 40px;
+    text-align: center;
+    border-radius: 20px;
+    border-style: groove;
+    border-color: aqua;
+    border-width: 4px;
+    color: teal;
+    padding: 5px 0px;
+    text-shadow: -2px 2px purple;
+    font-family: TagHandGraffitiTrash;
+}
+
+
+#ArtGallery{
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    background-color: #e6e6fabb;
+    align-items: center;
+    padding: 1%;
+    border-style: double;
+    border-color: cyan;
+    border-width: 6px;
+    border-radius: 15px;
+}
+
+.galleryRow{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-grow: inherit;
+    width: 100%;
+}
+.image{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: .5%;
+    width: 25%;
+    aspect-ratio: 1/2;
+    background-color: rgb(5, 65, 114);
+    border-radius: 15px;
+    border-color: purple;
+    border-style:solid;
+
+}
+.image p{
+    word-wrap: normal;
+    padding: 5%;
+}
+
+@media (max-width:700px) {
+    .image p{
+        font-size: 8pt;
+    }
+}
+
+.image img{
+    width: 80%;
+    border-style: solid;
+    border-width: 2px;
+}
+
+a#fontAtrabution{
+    position: absolute;
+    right:0;
+    top: 0;
+    background-color: lightblue;
+    border-radius: 15px;
+    border-color: black;
+    border-style: dotted;
+    padding: 5px;
+}