:root {
    --font-size: 17px;
    --page-head-height: 4em;
    --bg-page-head: #ffffff;
    --bg-button: #006061;
    --font-face: "Sora", Arial, Helvetica, sans-serif;
    --startup-bg-color: orange;
    --solo-bg-color: #4cce51;
    --startup-color: orange;
    --solo-color: #37963A;
    --pro-bg-color: #08F4F1;
    --pro-color: #008584;
    --team-bg-color: #3871C9;
    --team-color: #3871C9;
}

* {
    margin: 0;
    box-sizing: border-box;
}

html,
body,
table,
input,
select,
textarea,
button,
select {
    font-family: var(--font-face);
    font-size: var(--font-size);
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-face);
    font-weight: 600;
}

p {
    line-height: 1.8;
}

a {
    text-decoration: none;
}

a,
a:visited {
    color: inherit;
}

html,
body {
    height: 100%;
}

.narrow-only {
    display: none;
}

.page-head {
    display: flex;
    flex-direction: row;
    align-items: centre;
    align-content: stretch;
    background-color: var(--bg-page-head);
    padding: 1em 4em;
    border-bottom: 1px solid #ccc;
    font-weight: 600;
}

.page-head .logo {
    height: 3em;
}

.flex-right {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

#signup-button {
    background-color: var(--bg-button);
    border-radius: 0.5em;
    color: white;
    padding: 0.5em 1em;
}

#signup-button:hover {
    color: yellow;
    background-color: orange;
}

#login-button {
    color: var(--bg-button);
    border: 1px solid var(--bg-button);
    border-radius: 0.5em;
    padding: 0.5em 1em;
}

#login-button:hover {
    background-color: lightgoldenrodyellow
}

.page-content {
    display: flex;
    flex-direction: column;
}

.page-footer {
    background-color: #006061;
    color: white;
    padding: 4em;
}

.block {
    display: flex;
    flex-direction: column;
    padding: 2em 4em;
}

.topper {
    font-size: 1.2em;
    color: var(--bg-button);
    margin: 1em 0;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 1.4em;
    margin: 1em 0;
}

h3 {
    font-size: 2.5em;
}

.columns {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.columns.same-height {
    align-items: stretch;
}

.columns.wrap {
    flex-wrap: wrap;
}

.columns.top {
    align-items: flex-start;
}

.column {
    display: flex;
    flex-direction: column;
}

.column.center {
    align-items: center;
}

p.intro {
    font-size: 1.2em;
    color: rgb(71, 85, 105);
    line-height: 1.8em;
}

p.buttons {
    height: 4em;
    padding: 1em 0;
}

.expand-button {
    background-color: var(--bg-button);
    border-radius: 0.5em;
    color: white;
    padding: 0.5em 1em;
    font-size: 1.4em;
}

.expand-button:hover {
    font-size: 1.5em;
}

.expand-button:visited,
.expand-button:hover {
    color: white;
}

p.orange {
    color: orangered;
}

.vspacer {
    margin: 0.5em 0;
}

.vspacer-above {
    margin-top: 0.5em;
}

.vspacer-above-2 {
    margin-top: 1em;
}

.center {
    text-align: center;
}

.round-border {
    border: 1px solid #ccc;
    border-radius: 1em;
    padding: 1em;
    margin: 0.5em 0.5em;
}

.white-panel {
    background-color: white;
}

.shadow {
    box-shadow: 0px 0px 10px #ccc;
}

.white {
    color: white;
}

.panel-price {
    width: 20em;
}

.panel-header {
    border-radius: 0.5em 0.5em 0.5em 0;
    border-top: 1px solid transparent;
    border-bottom: none;
    padding: 1em;
    width: 100%;
}

.panel-title {
    font-size: 1.4em;
    margin-bottom: 0.5em;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.price-tick {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 1em;
    justify-content: flex-start;
}

.price-tick svg {
    width: 2em;
}

.price-tick p {
    margin-left: 1em;
}

.startup-color {
    color: var(--startup-color);
}

.startup-bgcolor {
    background-color: var(--startup-bg-color);
}

.startup-color svg {
    fill: var(--startup-color);
}

.solo-color {
    color: var(--solo-color);
}

.solo-bgcolor {
    background-color: var(--solo-bg-color);
}

.solo-color svg {
    fill: var(--solo-color);
}

.pro-color {
    color: var(--pro-color);
}

.pro-bgcolor {
    background-color: var(--pro-bg-color);
}

.pro-color svg {
    fill: var(--pro-color);
}

.team-color {
    color: var(--team-color);
}

.team-bgcolor {
    background-color: var(--team-bg-color);
}

.team-color svg {
    fill: var(--team-color);
}

.expand {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-start {
    justify-content: flex-start;
}

.flex-end {
    justify-content: flex-end;
}

.mtd-tick {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 1em;
    justify-content: flex-start;
}

.mtd-tick svg {
    margin-top: 0.4em;
    display: flex;
    width: 2em;
    overflow: visible;
    fill: var(--bg-button);
}

.mtd-tick p {
    margin-left: 1em;
    font-size: 1.6em;
}

.support-tick {
    display: flex;
    flex-direction: row;
    margin-top: 1em;
    justify-content: flex-start;
    align-items: flex-start;
}

.support-tick svg {
    margin-top: 0.4em;
    display: flex;
    width: 2em;
    fill: white;
    overflow: visible;
}

.support-tick p {
    margin-left: 1em;
    font-size: 1.6em;
}

.foot-link {
    padding: 0.5em 4em 0.5em 0;
}

.foot-link svg {
    margin-right: 1em;
    fill: white;
    width: 1em;
}

.privacy {
    line-height: 1.4em;
    color: #111;
}

.privacy .last-updated {
    font-size: 0.8em;
    color: rgb(71, 85, 105);
    font-style: italic;
}

.privacy p,
li {
    margin-top: 1em;
}

.privacy ul {
    list-style-position: outside;
}

#hamburger-toggle {
    display: none;
}

.hamburger-icon {
    display: none;
    cursor: pointer;
    flex-direction: column;
    width: 25px;
    height: 20px;
    justify-content: space-between;
}

.hamburger-icon span {
    display: block;
    height: 3px;
    background: black;
    border-radius: 2px;
    transition: 0.3s;
}

.page-menu,
.page-menu ul {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.page-menu ul {
    list-style: none;
    gap: 2rem;
}

.head-link {
    padding: 0.5em;
    font-size: 1.2em;
    border-bottom: transparent solid 4px;
}

.head-link:hover {
    cursor: pointer;
    border-bottom: #888 solid 4px;
}

.head-butter {
    padding: 0.5em;
    font-size: 1.2em;
}

.head-butter:hover {
    cursor: pointer;
}


@media (max-width: 1300px) {
    :root {
        --font-size: 15px;
    }
}

@media (max-width: 1200px) {
    :root {
        --font-size: 14px;
    }
}

@media (max-width: 1000px) {
    :root {
        --font-size: 13px;
    }

    .narrow-only {
        display: flex;
    }

    .wide-only {
        display: none;
    }

    .page-menu ul {
        gap: 1rem;
    }
}

@media (max-width: 800px) {
    :root {
        --font-size: 13px;
    }

    .narrow-only {
        display: flex;
    }

    .wide-only {
        display: none;
    }

    .page-menu ul {
        gap: 1rem;
    }
}

@media (max-width: 600px) {
    :root {
        --font-size: 13px;
    }

    .narrow-only {
        display: flex;
    }

    .wide-only {
        display: none;
    }

    .page-menu ul {
        gap: 1rem;
        position: absolute;
        top: 60px;
        right: 0;
        background: white;
        padding: 1em;
        flex-direction: column;
        display: none;
        border: 1px solid #ccc;
        box-shadow: 0px 0px 10px #ccc;
    }

    /* Show menu when checkbox is checked */
    #hamburger-toggle:checked+.hamburger-icon+ul {
        display: flex;
    }

    .hamburger-icon {
        display: flex;
    }
}