header { padding-top: 80px; }
main   { padding-top: 20px; }

* { box-sizing: border-box; margin: 0; padding: 0; }
@font-face { src: url('Geometria-Light.otf');
             font-family: 'local'; font-weight: normal; font-style: normal; }

body { background-color: white; font-family: 'local', sans-serif; font-size: 16px; }
hr { margin-top: 10px; margin-bottom: 10px; }
h1, h2, h3, h4 { font-weight: normal; border-left: 2px solid #5BC2E7; }

header { padding-top: 80px; padding-bottom: 40px; text-align: center; background-color: white; }
header h2 { line-height: 1; margin: 40px 0px 40px 0px; padding-left: 20px;
            font-size: 38px; display: inline-block; text-align: left;  border-left: none; }
header a { color: #5BC2E7; text-decoration: none; margin: 0; border-bottom: 1px solid green; 
           font-size: 38px; }
header a:visited { color: #5BC2E7; border-bottom: 1px solid #5BC2E7; }
header a:hover { background: rgba(71, 144, 256, 0.13); }

footer { text-align: center; background-color: white; color: black; padding: 50px 0 100px 0; }

main section { padding: 20px 0px 20px 0; text-align: left; }
main section:nth-of-type(even) { background-color: white; }
main p { max-width: 1000px; margin: 20px; line-height: 1.3; }
main a { color: #5BC2E7; text-decoration: none; margin: 0; border-bottom: 1px solid green; }
main a:visited { color: #5BC2E7; border-bottom: 1px solid #5BC2E7; }
main a:hover { background: rgba(71, 144, 256, 0.13); }
main ul { list-style-type: none; max-width: 850px; margin: 20px; }
main b { color: #121212; font-weight: bold; }
main h3 { line-height: 1; font-size: 32px; padding-left: 20px; max-width: 1000px; }
main h4 { line-height: 1; font-size: 24px;  padding-left: 20px; max-width: 1000px; }

li { list-style-position: inside; }

@media(min-width: 550px) {
    nav { padding: 10px 0 10px 0; display: flex; justify-content: center; line-height: 1; }
    nav a { font-size: 18px; min-width: initial; }
    header h1 { font-size: 30px; }
    figure { max-width: 100%; }
    figure code { max-width: 100%; font-size: 12px; }
    figure img { max-width: 100%; border: 0px solid #E8E8E8; }
}

@media(min-width: 768px) {
    body { font-size: 18px; }
    li { list-style-position: inside; }
    header h1 { font-size: 50px; margin: 70px 0 100px; }
    main h3 { font-size: 36px; margin: 40px auto; }
    main h4 { font-size: 24px; margin: 40px auto; }
    main p { margin: 20px auto; }
    main ul { margin: 20px auto; }
    figure { max-width: 70%; }
    figure code { max-width: 100%; font-size: 14px; }
    figure img { max-width: 100%; border: 10px solid #E8E8E8; }
}

@media(min-width: 1280px) {
    .desk { display: inline-block; }
    li { list-style-position: outside; }
    body { font-size: 20px; }
    header h1 { font-size: 70px; margin: 100px 0 150px; }
    main section { max-width: 1200px; margin-left: auto; margin-right: auto; }
    main h3 { font-size: 44px; }
    figure { max-width: 70%; }
    figure code { max-width: 100%; font-size: 16px; }
    figure img { max-width: 100%; border: 10px solid #E8E8E8; }
}