body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color:#c5c0c0; margin: 0%; } .container{ padding:0.5rem; /*display: flex;*/ } @media only screen and (max-width: 750px){ .container{ padding:0; } } .navbar-container{ /* Primary color */ background-color: #2196f3; height:2.5rem; } .content{ padding:0.5rem; border-radius: 0.25rem; width:75%; margin:0.5rem auto 0.5rem auto; background-color: aliceblue; } @media only screen and (min-width: 750px){ .content{ min-width:40rem; } } @media only screen and (max-width: 750px){ .content{ width: auto; border-radius: 0; margin-top:0; } } .nav-bottom-container{ position: fixed; bottom:0; width:100%; } .nav-bottom{ background-color:aliceblue; z-index:2; padding:0.5rem; height: 1.5rem; width:100%; } .nav-bottom-button-container{ width:100%; text-align: right; } .nav-bottom-button{ margin-bottom: 1rem; margin-right:1rem; margin-left: auto; width:4.5rem; height:4.5rem; padding:auto; border-radius: 10em; outline: none; /* Button - Secondary color */ background-color:royalblue; border:0.5rem royalblue solid; color:white; font-size: 2rem; } .nav-bottom-pad{ height:1.5rem; margin-top:0.5rem; } .box-shadow-1{ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .box-shadow-2, .box-shadow-1-active:active{ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .box-shadow-3, .box-shadow-2-active:active{ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .box-shadow-4, .box-shadow-3-active:active{ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .box-shadow-1-active,.box-shadow-2-active,.box-shadow-3-active{ transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1); }