Refactored css and html file.

static/css/douwco_styling.css

@@ -13,13 +13,6 @@
     src: url(../font/Montserrat-Bold.ttf);
 }
 
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
 
 body {
     font-family: monsterrat_regular;
@@ -28,34 +21,147 @@ body {
     color: white;
 }
 
-div 
-.app_panel {
+.root_div{
     display: flex;
+    flex-direction: column;
+}
+.root_div > .side_panel_div{
+    width: 100%;
+}
+
+.title_div{
+    margin-left: 50px;
+    display: flex; 
+    align-items: center;
     flex-direction: row; 
+    align-content: center;
+}
+.title_div > img {
+    width:150px; 
+    height: 150px;
+    margin-right: 50px;
+}
+.title_div > h1 {
+    font-family: righteous;
+    font-size: 120px;
+}
+
+.apps_title_div {
+    margin-top: 100px;
+}
+.apps_title_div > h2 {
+    font-family: monsterrat_bold;
+    font-size: 48px;
+    text-align: center;
+}
+.apps_title_div > hr {
+    height: 6px;
+    width:75%;
+    background-color: white;
+    border-width: 0px;
+    border-radius: 3px;
+    align-self: center;
+}
+
+.app_option_div { 
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin: 25px;
     border-radius: 25px;
     background-color: #304b4bFF;
 }
-
-button {
+.app_option_div > img {
+    height: 200px;
+    width: 200px;
+    margin: 25px;
+}
+.app_option_div > div > h3 {
     font-family: monsterrat_bold;
-    color: white;
-    cursor: pointer;
-    display: flex; 
-    align-items: center;
+    font-size: 36px;
 }
-.menu_button {
-    font-size: 48px;
-    border: none;
-    background-color: transparent;
+.app_option_div > div > p {
+    font-family: monsterrat_regular;
+    font-size: 24px;
 }
-.menu_button:hover {
-    border-radius: 20px;
-    background-color: #304b4bFF;;
+.app_option_div > div > p > a {
+    color: #6dde99; 
+    font-family: monsterrat_bold;
 }
-.app_selection_button {
+.app_option_div > a {
+    position: absolute;
     height: 50px;
-    width: 150px;
-    background-color: #6dde99;
+    width: 125px;
+    bottom: 25px;
+    right: 25px;
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
     border-radius: 10px;
     border: none;
+    background-color: #6dde99;
+}
+.app_option_div > a > p {
+    font-family: monsterrat_bold;
+    font-size: 18px;
+    width: 100%;
+    color: white;
+    text-align: center;
+}
+
+
+a {
+    font-family: monsterrat_regular;
+    color: white;
+    text-decoration:none;
+    cursor: pointer;
+}
+.menu_option_a {
+    font-family: monsterrat_bold;
+    font-size: 48px;
+    
+    border: none;
+    border-radius: 20px;
+    background-color: transparent;
+    
+    display: flex; 
+    align-items: center;
+
+    margin-left: 50px; 
+    padding-left: 50px;
+    padding-right: 50px;
+}
+.menu_option_a:hover{
+    background-color: #304b4bFF;;
+}
+.menu_option_a > img {
+    width:100px; 
+    height:75px;
+    margin-right: 50px;
+}
+.menu_option_a > p > span {
+    color: #88d4d4;
+}
+
+
+@media (min-width: 1300px) {
+    html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+    }
+    
+    .root_div{
+        display: flex;
+        flex-direction: row;
+    }
+    .root_div > .side_panel_div{
+        width: 50%;
+    }
+
+    .apps_selection_div {
+        max-height: 75vh;
+        overflow-y: auto;   
+    }
 }