// Basic Blank CSS for entire SYNRC space

.dropbtn { cursor: pointer;  }
.dropdown { display: inline-block; color: #5BC2E7;}
.dropdown-content { margin-top: 10px; display: none; margin-left: -5px; padding: 5px; position: absolute; }
.dropdown-content a { display: block; background: white; }
.dropdown > a { padding: 5px 12px }
.show {display:block;}
.dropdownLANG {display:inline-block;}

* { box-sizing: border-box; margin: 0; padding: 0; }
@font-face { src: url('./?mortyurl=https%3A%2F%2Fn2o.dev%2Fe-Ukraine-Light.woff');
             font-family: 'local'; font-weight: normal; font-style: normal; }

body {
   background-color: white;
   font-family: 'local', sans-serif;
   font-size: 16px;
   min-width: 125%;
   max-height: 100vh;
   transform: scale(0.8);
   transform-origin: 0 0;
}
hr { margin-top: 10px; margin-bottom: 10px; }
h1, h2, h3, h4 { font-weight: normal; border-left: 2px solid #5BC2E7; }

nav { padding: 20px 0 20px 0; display: block; position: fixed; width: 100%; background-color: white;
      display: float; text-align: center; align-items: center; }
nav a:visited { color: #5BC2E7; }
nav a:hover { border-bottom: 2px solid #5BC2E7; }
nav a { font-size: 16px; border: 2px solid #dedede; cursor: pointer; text-decoration: none;
        margin: 5px 5px; padding: 7px 12px; text-align: center; color: #5BC2E7; }

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

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

aside h3 { font-size: 28px; text-transform: uppercase; color: #5BC2E7; margin: 0px; padding: 20px 0 10px; margin-bottom: 20px;  }
aside div { color: black; }
aside img { width: 20px; vertical-align: middle; }
aside a { text-decoration: none; color: #5BC2E7; }
aside a:visited { color: #5BC2E7; }
aside a:hover { background: rgba(255, 255, 255, 0.3); }

aside { text-align: center; padding: 0 10px 100px; }
aside h3 { margin-left: 0px; border-left: none; }
aside section { margin: auto; max-width: 650px; padding: 20px 0 0 0;
                display: inline-block; vertical-align: top; text-align: left; padding-right: 30px; }

main section { padding: 20px 0px 20px 0; text-align: left; }
main section:nth-of-type(even) { background-color: white; }
main p { max-width: 850px; 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: 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; text-align: center; }
figcaption > b { text-transform: lowercase }
figure img { max-width: 100%; padding: 0px; }
figure code { font-family: monospace; font-size: 12px; display: block; max-width: 100%;
              overflow-x: auto; padding: 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 { 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 a img { margin-bottom: -14px; }
    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; }
}