@font-face { font-family: "Open Sans" ; src: url(fonts/OpenSans-VariableFont_wdth,wght.ttf) } @font-face { font-family: "Nunito" ; src: url(fonts/Nunito-VariableFont_wght.ttf) } @font-face { font-family: "Roboto Mono" ; src: url(fonts/RobotoMono-VariableFont_wght.ttf) } @font-face { font-family: "Inter" ; src: url(fonts/Inter-VariableFont_opsz,wght.ttf) } html,body { margin: 0px ; padding: 0px } body { font-family: "Nunito" ; color: #292929 ; padding-top: 1px /* otherwise gets a margin, incorrectly */ } a { text-decoration: none ; color: #2626d9 } #main { min-width: 380px ; max-width: 750px ; margin-inline:auto ; margin-top: 40px } #name { text-align: center; font-family: "Inter"; } .left-padded { padding: 0px 10px 0px 10px } #about { text-align: center ; max-width: 550px ; margin: auto } #contact { display: flex ; flex-wrap: wrap } #email { display: none ; width: 70% ; margin: 50px ; padding: 10px ; border: 1px solid black ; text-align: center ; font-size: 23px } #email-checkbox { display: none } #email-checkbox:checked ~ #email { display: inline } .wide-list > div { font-family: "Nunito" } .wide-list > div:nth-child(odd) { background-color: #f4f4f4 } .two-split > div { display: grid ; grid-template-columns: min-content auto ; align-items: center } .smallnum > div > div:first-child { text-align: center } /* * * * * * */ body { font-size: 20px } h2 { margin-top: 130px ; font-size: 35px ; text-align: center } #name { font-size: 23px; } #about { margin-top: 70px ; margin-bottom: 90px ; font-size: 22px } #contact { margin-bottom: 80px ; justify-content: space-around } #contact > label { cursor: pointer } #contact img { height: 50px } .wide-list > div { font-size: 19px ; padding: 20px 10px 20px 10px } .two-split > div > div:first-child { font-size: 18px ; width: 60px } /* * * * * * */ @media only screen and (min-width: 650px) { body { font-size: 16px } h2 { margin-top: 50px ; text-align: left ; font-size: 28px } .wide-list > div { font-size: 16px ; padding: 13px 10px 13px 10px } #name { font-size: 17px; } #about { margin-top: 40px ; margin-bottom: 50px ; font-size: 17px } #contact { ; margin-bottom: 70px ; justify-content: center } #contact > * { margin-inline: 30px } #contact img { height: 30px } .two-split > div > div:first-child { font-size: 15px ; width: 53px } }