body { background-color:lightgrey; font-family: helvetica; margin-top: 0px; margin-left: 40px; margin-right: 40px; } h1 { color: black; text-align: center; text-shadow: 2px 2px white; font-size: 200%; padding-top:0; } h2 { color: darkred; text-align: left; font-size: 150%; } h3 { color: darkred; text-align: center; text-decoration: underline; font-size: 120%; } h4 { color: darkred; font-size: 100%; } a { font-size: 100%; } p { color:black; font-size: 100%; text-align: left; } ul { color: black; line-height: 150%; } .centerimg { display: block; margin-left: auto; margin-right: auto; width: 100%; } p.title { text-align: center; } p.equation { color: black; text-align: center; } p.indent { padding: 0px 0px 0px 40px; text-align: left; } p.footer { padding: 8px 8px 8px 8px; color: black; text-shadow: 1px 1px white; font-size: 80%; font-style: italic; background-color: darkgrey; text-align: right; } p.dropdown-content { display: none; position: absolute; background-color: #darkred; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .spantext { font-size: 80%; background-color: lightblue; color:black; text-align:center; border: 1px solid black; padding: 4px 16px 4px 16px; margin: 5px 2px 5px 2px; } #titleimg{ border: 0; width: 100%; } .sidenav { height: 150%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: gray; overflow-x: hidden; transition: 0.5s; padding-top: 0px; } .sidenav h1 { color: white; background-color: darkgray; border: 0px 0px 0px 0px; padding: 4px 8px 4px 16px; text-shadow: 2px 2px gray; text-align: left; font-size: 150%; } .sidenav a { font-family: helvetica; padding: 8px 8px 8px 16px; text-decoration: none; font-size: 150%; color: lightgray; display: block; transition: 0.3s; } .sidenav a:hover { color: white; } .sidenav .closebtn { position: absolute; vertical-align: text-top; top: 0px; right: 5%; font-size: 45px; color: lightgray; margin-top: 0px; margin-left: 50px; } .buttonzpic { border: none; padding: 8px 16px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; border-radius: 8px; } .buttonzpic:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } .buttonzpic:active { transform: translateY(3px); } .buttonzarrow { border: none; padding: 0px 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 64px; font-weight: bold; border-radius: 0px; } .buttonzarrow:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } .buttonzarrow:active { transform: translateY(3px); } .buttonzarrow:disabled { opacity: 0.2; box-shadow: none; } span.zpicindex { display: inline; /* the default for span */ padding: 16px; font-size: 20px; font-weight: normal; border: none; background-color: none; } #main { transition: margin-left .5s; padding: 8px; } @media screen and (min-width: 680px) { #titleimg {width: 600px;} @media screen and (max-width: 180px) { #titleimg {width: 100px;} } @media screen and (max-height: 450px) { .sidenav {padding-top: 0px;} .sidenav a {font-size: 15px;} } #menubtn { position: absolute; vertical-align: text-top; top: 16px; font-size:25px; color: black; margin-top: 0px; margin-left: 0px; }