flexbox fixes

assets/css/main.css

@@ -2,15 +2,18 @@
 	font-family: roman;
 	src: url(../fonts/RomanAntique.ttf);
 }
-html,
-body {
+html, body {
 	margin: 0;
 	padding: 0;
 	background-color: #d0c8b1;
 	font-family: roman;
+}
+
+body {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	box-sizing: border-box;
 }
 
 .container {
@@ -21,11 +24,13 @@ body {
 }
 #photo {
 	width: 60vw;
+	height: 100vh;
 }
 #ui {
 	background-color: #c1bc97;
 	width: 20vw;
 	font-size: x-large;
+	height: 100vh;
 }
 
 #buttons {
@@ -34,6 +39,7 @@ body {
 	 display: flex;
 	 flex-direction: column;
 	 justify-content: space-around;
+	/* height: 90vh; */
 }
 .actions {
          height: 5vh;
@@ -51,3 +57,31 @@ p {
 	padding: 1vmin;
 	line-height: 1em;
 }
+
+@media only screen and (max-width: 1068px) {
+  body {
+    margin-left: 2vmin;
+    margin-right: 2vmin;
+    padding: 0;
+   justify-content: flex-start;
+  }
+  .container {
+    flex-direction: column;
+  }
+  #photo {
+        margin: 2vmin;
+	width: 90vw;
+	height: 60vh;
+  }
+  #ui {
+    width: 90vw;
+        margin: 2vmin;
+  }
+
+  #buttons {
+	 flex-direction: row;
+	 justify-content: space-evenly;
+	 align-items: center;
+	 height: 10vh;
+  }
+}