fix font and responsiveness css

static/fonts.css

@@ -199,7 +199,7 @@
 
 /* sligoil */
 @font-face {
-  font-family: 'Sligoil Micro';
+  font-family: 'Sligoil';
   src: url('/fonts/Sligoil-Micro.woff2') format('woff2'),
     url('/fonts/Sligoil-Micro.woff') format('woff');
   font-weight: normal;

static/style.css

@@ -25,7 +25,8 @@ body {
 }
 
 #page {
-  padding: 6vw;
+  /* padding: 6vw; */
+  padding: 4vw;
   max-width: 2000px;
   display: flex;
   flex-direction: column;
@@ -68,9 +69,9 @@ ul {
 }
 
 .panel {
-  margin: 4vh;
+  margin: 2vw;
   border: 4px solid #311f20;
-  padding: 2rem 4rem;
+  padding: 2vw 4vw;
   position: relative;
 }
 
@@ -151,12 +152,14 @@ footer {
   display: flex;
   align-items: center;
   z-index: -1;
+  flex-wrap: wrap;
   background-color: #e8d2c5;
 }
 
 .badge,
 .badge * {
   height: 31px;
+  min-width: 88px;
   padding: 0;
   border-radius: 0;
   border: 0;
@@ -311,9 +314,17 @@ iframe {
 .skweet-info {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 1em;
 }
 
+.skweet-info h4 {
+  max-width: 40vw;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .skweet-text {
   margin-top: 0.8em;
   margin-bottom: 0.8em;
@@ -322,6 +333,7 @@ iframe {
 .skweet img,
 .skweet video {
   max-height: 80vh;
+  width: 100%;
 }
 
 /* contact page */