/* Box sizing rules */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default padding */
ul[class], ol[class] { padding: 0; list-style: none; }


/* Remove default margin */
body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; }

/* Set core body defaults */
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    font-family: Poppins, 'Segoe UI', Arial, Helvetica, sans-serif;
    line-height: 1.5;

    /* @see https://css-tricks.com/couple-takes-sticky-footer/#there-is-grid */
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* A elements that don't have a class get default styles */
a:not([class]) { text-decoration-skip-ink: auto; }
a { color: inherit; }
a:hover { text-decoration: none; }

/* Make images easier to work with */
img { display: inline-block; /*max-width: 100%;*/ }

/* Inherit fonts for inputs and buttons */
input, button, textarea, select { font: inherit; }
/* --------------------*/

fieldset { border: 0; margin: 0; padding: 0; }
input[type="text"],
input[type="email"],
input[type="password"] { border-radius: 4px; padding: 8px 12px; border: solid #808080 1px; transition: all 0.1s ease; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus { outline: none; box-shadow: 0 0 0 2px rgba(32,156,255,.24); }

h1, h2, h3 { font-weight: 600; }
h1 { margin: 0 0 2rem; }
h2 { margin: 1rem 0 10px; }
h3 { margin-top: 1rem; font-size: 16px; }
p { margin: .5rem 0; }
ul:not([class]) > li { margin-top: 12px; }

.content { width: 100%; max-width: 860px; margin: 0 auto; padding: 2rem 0 10rem; display: flex; font-size: 14px; min-height: 600px; }
main { max-width: 640px; }
aside { margin-left: 20px; }

header { display: flex; width: 100%; max-width: 860px; margin: 10px auto 0; }
.header-menu { margin-left: auto; display: flex; padding-top: 20px; }
.header-link-wrapper { margin-right: 14px; }
.header-link-wrapper:last-child { margin-right: 0; }
.header-link { padding: 2px 1px; text-decoration: none; border-bottom: solid transparent 1px; transition: all .07s ease-in; }
.header-link:hover { border-color: #ffffff; }
.header-link-signin { border: solid #ffffff 1px; border-radius: 20px; padding: 4px 13px; white-space: nowrap; }
.icon-signin { margin-right: 8px; transition: all .1s ease-in; }
.header-link-signin:hover .icon-signin { margin-right: 6px; margin-left: 2px; }

footer { position: relative; background: linear-gradient(135deg, #209cff, #68e0cf); grid-row-start: 3; grid-row-end: 4; }
.footer-content { max-width: 860px; margin: 0 auto; padding: 40px 0; color: #ffffff; font-size: 14px; display: flex; flex-wrap: wrap; }
.footer-linklist { margin-right: 100px; }
.footer-end { flex-basis: 100%; margin-top: 2rem; }
.linklist-title { font-weight: 600; margin-bottom: 10px; }
.linklist-items li { margin: 6px 0; }
.linklist-items a { text-decoration: none; }
.linklist-items a:hover { text-decoration: underline; }

.f-button { display: inline-block; background-color: #209cff; color: #ffffff; border: 0; border-radius: 30px; padding: 8px 14px; font-weight: 500; cursor: pointer; text-decoration: none; -webkit-appearance: none; }
.f-button:focus { outline: none; box-shadow: 0 0 0 2px rgba(32,156,255,.24); }
.f-button:active { outline: none; }
.f-button:hover { background-color: #1d8ee9; }

.code { display: inline-block; padding: 2px 4px; border-radius: 4px; white-space: nowrap; background-color: #eaeaea; font-family: Consolas, "Courier New", Courier, sans-serif; font-weight: 600; }

@media screen and (max-width: 768px) {
    main, aside { padding: 1rem; }
    header { padding-left: 1rem; padding-right: 1rem; }
    .header-link-wrapper { display: none; }
    .header-link-wrapper:last-child { display: block; }
    .footer-content { flex-direction: column; padding: 2rem;}
    .footer-linklist {  margin-right: 0; margin-bottom: 2rem; }
    .content { flex-direction: column; }
}

.signedin .header-menu{ display: none; }