mobile css fixes!

_layouts/default.html

@@ -26,7 +26,7 @@ navbar: topnav
 				<div class="right-sidebar">
 					{% include swatchclock.html %}
 					<img src="https://slimepondcount.goatcounter.com/counter/{{ page.url }}.png" style="width: 100%">
-					<iframe src="https://www3.cbox.ws/box/?boxid=3539632&boxtag=JU8HaS" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="5" marginwidth="5" scrolling="auto"></iframe>
+					<iframe src="https://www3.cbox.ws/box/?boxid=3539632&boxtag=JU8HaS" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="5" marginwidth="5" scrolling="auto" id="cbox"></iframe>
 
 					
 					{% include statuscafe.html %}

_sass/main.scss

@@ -1,6 +1,7 @@
 @import "sidebar";
 @import "statuscafe";
 @import "fonts";
+@import "mobile";
 
 html {
 	background-color: #2196F3;

_sass/mobile.scss

@@ -0,0 +1,38 @@
+/* mobile specific stuff 
+i dont know what im doing */
+
+@media (max-width: 1150px){
+	html, body {
+		font-size: 1.50em;
+	}
+
+	.columns, .vcol{
+		top: 50px;
+		flex-direction: column;
+		flex-wrap: wrap;
+		max-height: 90%;
+	}
+
+	.left-sidebar, .right-sidebar {
+		width: 100%;
+		height: 4em;
+		max-height: 20vh;
+		font-size: 1.75em;
+		text-align: center;
+	}
+	
+	.main-content {
+		width: auto;
+		max-height: 50vh;
+		margin: 20px;
+	}
+
+	#cbox {
+		display: none;
+	}
+
+	img {
+		min-height: 1.1em;
+		flex-shrink: 0;
+	}
+}

_sass/sidebar.scss

@@ -1,4 +1,5 @@
 .columns {
+  position: relative;
   max-width: 80%;
   max-height: 90vh;
   display: flex;