* { box-sizing: border-box; margin: 0; padding: 0; }
@font-face { src: url('https://tonpa.guru/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; margin-left: 20px; border-left: 2px solid #00b8cf; }

nav { margin: 10px 0; display: float; text-align: center; align-items: center; line-height: 3; }
nav a:visited { color: CadetBlue; }
nav a:hover { border-bottom: 2px solid #00b8cf; }
nav a { font-size: 16px; border: 2px solid #dedede; color: blue; text-decoration: none;
        margin: 5px 5px; padding: 7px 12px; min-width: 150px; text-align: center; }

header { text-align: center; background-color: white; padding-top: 20px; }
header img { margin-right:20px; margin-bottom:-20px; width: 100px; }
header h1 { line-height: 1; margin: 40px 20px 40px; padding-left: 20px; font-size: 38px; display: inline-block; text-align: left; }

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

aside { background-color: white; padding: 20px 0 60px; }
aside section { padding: 0 20px; max-width: 600px; margin: auto; }
aside h3 { font-size: 28px; text-transform: uppercase; color: CadetBlue; margin: 0px; padding-left: 20px; margin-bottom: 20px;  }
aside div { color: black; }
aside img { width: 20px; vertical-align: middle; }
aside a { text-decoration: none; color: CadetBlue; }
aside a:visited { color: CadetBlue; }
aside a:hover { background: rgba(255, 255, 255, 0.3); }

main { }
main section { padding: 20px 0px 20px 0px; }
main section:nth-of-type(even) { background-color: white; }
main p { max-width: 850px; margin: 20px; line-height: 1.3; }
main a { color: CadetBlue; text-decoration: none; margin: 0; border-bottom: 1px solid green; }
main a:visited { color: CadetBlue; border-bottom: 1px solid #4A90E2; }
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: 850px; }
main h4 { line-height: 1; font-size: 24px;  padding-left: 20px; max-width: 850px; }

figure { margin: 10px auto; max-width: 100%; text-align: center; }
figcaption { padding: 5px 20px; text-transform: uppercase; font-size: 1rem; }
figure img { max-width: 100%; }
figure code { font-family: monospace; font-size: 12px; display: block; max-width: 100%;
              overflow-x: auto; padding: 0 10px; background-color: white;
              white-space: pre; text-align: left; }
figure pre { font-family: monospace; font-size: 12px; overflow-x: auto;  max-width: 100%;
              padding: 0 20px; white-space: pre-wrap; text-align: left;  }

.desk { display: none; }
.heart { color: red; }
li { list-style-position: inside; }

@media(min-width: 550px) {
    nav { display: flex; justify-content: center; line-height: 1; }
    nav a { font-size: 18px; min-width: initial; }
    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 section { padding-top: 20px; }
    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; }
    aside { text-align: center; padding-bottom: 100px; }
    aside section { display: inline-block; vertical-align: top; text-align: left; font-size: 20px; }
    aside section:first-child { max-width: 650px; font-size: 22px; }
    main { text-align: center; background: white; }
    main section { background-color: white; text-align: left; max-width: 1200px; margin-left: auto; margin-right: auto; }
    main section:first-child { padding-top: 100px; }
    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; }
}