yatzee css html 100%

yatzee/style.css

@@ -1,11 +1,14 @@
-#highScore{
+#highScore {
   text-align: center;
 }
-header{
+header {
   margin: auto;
   text-align: center;
 }
-#diceBoard{
+html {
+  height: 100%;
+}
+#diceBoard {
   width: 85%;
   height: 150px;
   background-color: blueviolet;
@@ -13,32 +16,32 @@ header{
   margin: auto;
   display: flex;
   justify-content: space-evenly;
-    padding: .5rem;
+  padding: 0.5rem;
   flex-wrap: nowrap;
   border-radius: 10px;
 }
-#scoreBoard{
+#scoreBoard {
   width: 85%;
   height: 300px;
   background-color: rgb(226, 192, 43);
   border: 3px dotted black;
   margin: auto;
 }
-#diceBoard img{
+#diceBoard img {
   height: 3rem;
 }
-.dice_pic_hold{
-align-self: flex-end;
-order: -1;
+.dice_pic_hold {
+  align-self: flex-end;
+  order: -1;
 }
-#game{
+#game {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   gap: 1rem;
 }
-#roll{
+#roll {
   padding: 2rem;
   color: white;
   background-color: rgb(50, 68, 83);
@@ -46,23 +49,23 @@ order: -1;
   box-shadow: 2px 2px gray;
 }
 
-#upper{
+#upper {
   display: flex;
   justify-content: space-around;
-    align-items:center;
+  align-items: center;
   width: 100%;
   border: 1px solid black;
   flex-wrap: wrap;
 }
 
-.upperScore{
+.upperScore {
   height: 30px;
   background-color: brown;
   /* border: 2px solid black; */
   width: 16.66px;
   /* display: none; */
 }
-.upperLable{
+.upperLable {
   flex-wrap: wrap;
   /* width: 100%; */
 }