* {
     margin: 0;
     padding: 0;
     font-family: 'Roboto', sans-serif;
     font-size: large;
     font-weight: bold;
     text-transform: uppercase;
 }

 body {
     height: 100%;
 }

 header {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     height: 15vh;
 }

 nav {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     background-color: rgb(0, 33, 69);
     color: white;
     grid-template-columns: 30% 60%;
     column-gap: 10%;
     padding: 20px 5%;
 }

 #generate_button {
     background-color: transparent;
     color: white;
     padding: 2% 5% 2% 5%;
     text-align: center;
     margin-top: 30px;
     width: 500px;
     height: 80px;
     border-color: #f1ff5c;
 }

 #generate_button:hover {
     border-color: #f1ff5c;
     color: azure;
     box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;
     z-index: 100;
 }


 .algorithms {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
 }

 .algorithms button {
     width: 18%;

 }


 .title {
     display: flex;
     flex-direction: row;
     height: 10vh;
     background-color: rgb(0, 33, 69);
     color: white;
     grid-template-columns: 30% 60%;
     column-gap: 10%;
     padding: 0 5%;
     margin: auto;
     align-items: center;
     justify-content: center;
     font-size: 50px;
 }

 #array_container {
     display: flex;
     height: 75vh;
     flex-direction: row;
     justify-content: space-evenly;
     background-color: ghostwhite;
 }

 #array_container div {
     position: relative;
     bottom: 0;
 }


 .hide {
     display: none;
 }