menu{
    background-color: #042049 !important;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
}
header{
    height: inherit;
    font-family: franklin-med;  
}
#body{
    display: flex;
    padding-top: 8%;
    flex-direction: column;
}
table{
    width: 100%;
    padding-left: 35.16483516483517vh ;
    padding-right: 35.16483516483517vh ;
}
table td:first-of-type{
    padding: 5vh;
    min-width: 15vh;
}
h1{
    font-family: franklin-semi;
}
table:nth-of-type(even){
    background-image: linear-gradient(to right, #09A2F0 0%, #3634E4 100%) ;
    color: white;

}
tr td:nth-of-type(1){
    width: 20vw;
    min-width: inherit;
}

@media screen and (max-width: 900px) {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
        }  
        table{
            padding-left: 5vw ;
    padding-right: 5vw ;
        }

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
        table td:first-of-type{
            padding-bottom: 0 !important;
        }
    
		td {
			/* Behave  like a "row" */
			border: none;
            position: relative;
            text-align: justify;
            text-align-last: center;
        }
        
        tr td:nth-of-type(1){
            width: 100vw;
            min-width: inherit;
        }

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
            white-space: nowrap;
            
        }
    }