/* Base styles. */
@layer pulse {
    a, a:visited {
        color: var(--color-plus-2);
    }
    a:hover {
        color: var(--color-plus-3);
    }

    header a, footer a {
        color: var(--color-minus-1);
    }

    header a:hover, footer a:hover {
        color: var(--color-plus-3);
    }
}

body { background-color: var(--layout-baseline); color: var(--color-baseline); }
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); }

h1 {
    font-size: var(--text-3xl);
    margin: .75rem 0;
    @media (width > 640px) {
        font-size: var(--text-5xl);
    }
}

h2 {
    font-size: var(--text-3xl);
    margin: .65rem 0;
}

h3 {
    font-size: var(--text-2xl);
    margin: .55rem 0;
}

h4 {
    font-size: var(--text-lg);
    margin: .45rem 0;
}

/* Page header & footer */
header, footer {
    background-color: #00000088;
    border-bottom: 1px solid #FFFFFF66;
    display: flex;
    height: calc(var(--spacing) * 16);
    justify-content: center;
}

header h1 {
    margin: 0;
}

header .fixed-size, footer .fixed-size {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 0 calc(var(--spacing) * 4);
    width: 80rem;
}

nav, .nav {
    align-items: center;
    display: flex;
    gap: calc(var(--spacing) * 3);
    height: 100%;
}

nav.middle {
    font-size: var(--text-xl);
    justify-content: space-evenly;
    gap: calc(var(--spacing) * 16);
    @media (max-width: 640px) {
        display: none;
    }
}

nav.middle a, nav.middle a:visited {
    color: var(--color-plus-2);
}

nav.middle a:hover {
    color: var(--color-plus-3);
}

footer {
    color: var(--color-minus-2);
}

/* end page header & footer */

/* Error pages */
#error_page {
    display: flex;
    margin: 0px auto;
    min-height: calc(100vh - (var(--spacing) * 32));
    max-width: 80rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* end Error pages */

/* Index layout */
div.teaser {
    align-content: center;
}

.teaser section {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0 auto;
    max-width: 80rem;
    padding: calc(var(--spacing) * 4);
    position: relative;
    text-align: center;
}

.teaser h2 {
    font-size: var(--text-3xl);
    line-height: 1;
    @media (min-width: 640px) {
        font-size: var(--text-5xl);
    }
}

.teaser h2 p:last-child {
    color: var(--color-plus-2);
}

.teaser h3 {
    line-height: 1;
}

.teaser ul {
    margin-top: calc(var(--spacing) * 12);
}

div.imgbox {
    background-color: #000000;
    border-radius: calc(var(--spacing) * 6);
    display: flex;
    padding: calc(var(--spacing) * 6);
}

#focus, #optimize {
    gap: calc(var(--spacing) * 6);
}

#focus img.hero {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
    border-radius: 1.5rem;

    @media (width > 640px) {
        width: calc(var(--spacing) * 96);
        height: calc(var(--spacing) * 96);
        border-radius: 1.5rem;
    }
}

#optimize {
    flex-direction: column;
}

#optimize li {
    align-items: center;
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    margin: calc(var(--spacing) * 8) 0;
}

#optimize li img {
    height: calc(var(--spacing) * 18);
    width: calc(var(--spacing) * 18);
    border-radius: 1.5rem;
}

#optimize li p {
    color: var(--color-minus-1);
}

#optimize ul {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media (width >= 48rem) {
        flex-direction: row;
    }
}

.buttons {
    align-items: center;
    display: flex;
    gap: calc(var(--spacing) * 3);
    justify-content: center;
}

#connect {
    display: flex;
    gap: calc(var(--spacing) * 6);
}

.card.testimonial .person {
    background-color: #00000000;
}
/* end Index layout */

/* auth layout */
section#auth {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0 auto;
    max-width: 80rem;
    padding: calc(var(--spacing) * 4);
    position: relative;
    text-align: center;
}

section#auth form {
    background-color: var(--layout-minus-1);
    border-radius: var(--radius-3xl);
    border: 1px solid #00000099;
    color: var(--color-baseline);
    margin: calc(var(--spacing) * 4) auto calc(var(--spacing) * 8) auto;
    padding: calc(var(--spacing) * 12) calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 2);
    text-align: left;
    max-width: calc(var(--spacing) * 132);
}

section#auth form div.field {
    display: flex;
    flex-direction: column;
    margin: calc(var(--spacing) * 6) 0;
}

#auth div.label {
    font-size: 1rem;
    margin: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
}

#auth button {
    background-color: #000;
    margin-top: calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 4);
}

#auth button:hover {
    background-color: #FFF3;
}

#auth .wrapper {
    min-width: calc(var(--spacing) * 140);

    @media (width < 640px) {
        min-width: 1px;
        width: 100%;
    }
}

div.help_text ul {
    background-color: var(--layout-minus-2);
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 2);
    font-weight: 600;
    color: var(--color-minus-1);
}

input[type="email"], input[type="password"], input[type="text"] {
    background-color:#FFFFFF1A;
    border-radius: var(--radius-2xl);
    border: 1px solid #FFFFFF33;
    color: #FFF;
    padding: calc(var(--spacing) * 4);
    width: 100%;
}

input[type="submit"] {
    border-radius: calc(infinity * 1px);
    border: 2px solid;
    margin-top: calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 2);
}

input[type="submit"]:only-of-type, button:only-of-type {
    width: 100%;
}

section#auth div.field:has(div.label):has(label[for="id_remember"]) {
    flex-direction: row;
    gap: calc(var(--spacing) * 3);
}

div.has-help-text {
    align-items: baseline;
    display: flex;
    gap: calc(var(--spacing) * 2);
}
div.has-help-text img {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
}

.providers {
    display: flex;
    gap: calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 12) calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 2);
}

.providers li {
    display: flex;
    flex: 1 1 calc(var(--spacing) * 42);
}

.providers li a {
    display: flex;
    flex: 1 1 0px;
    justify-content: center;
}

/* end auth layout */

/* profile layout */
section#setup_step {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: calc(var(--spacing) * 150);
    min-height: calc(100vh - (var(--spacing) * 16));
    padding: calc(var(--spacing) * 4);
    text-align: left;
}

#setup_step h2 {
    color: var(--color-plus-3);
    font-size: var(--text-2xl);
    margin: 0.75rem;
    text-align: center;
    line-height: 1;

    @media (width >= 48rem) {
        font-size: var(--text-5xl);
    }
}

#setup_step form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#setup_step table {
    min-width: calc(var(--spacing) * 64);
    width: fit-content;
}

#setup_step .provider_select img {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
}

table.provider_select {
    border: 1px solid var(--layout-plus-3);
    border-bottom: 0px solid;
    background-color: var(--layout-baseline);
    margin: 0;
}

.provider_select label {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
}

.provider_select tr {
    border-bottom: 1px solid var(--layout-plus-3);
}

.provider_select tr:hover {
    background-color: var(--layout-plus-2);
    scale: 102.5% 100%;
}

.provider_select td {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
}

.provider_select td:nth-child(2) {
    padding-bottom: calc(var(--spacing) * 3);
}

.provider_select td:last-child {
    padding-bottom: 0;
}

#setup_step p {
    margin: calc(var(--spacing) * 2) 0;
    align-self: flex-start;
}

.wizard.buttons {
    display: flex;
    justify-content: space-between;
    margin: calc(var(--spacing) * 4) 0 0 0;
    padding: 0;
    width: 100%;
}

#setup_step input[type=checkbox] {
    width: var(--text-xl);
    height: var(--text-xl);
}


section#profile, section#connections {
    margin: 0 auto;
    max-width: 80rem;
    min-height: 100vh;
    padding: calc(var(--spacing) * 4);
}

#profile h3 {
    font-size: var(--text-2xl);
    margin-bottom: calc(var(--spacing) * 4);
}

#profile #aggregate ul {
    padding: calc(var(--spacing) * 4);
    display: flex;
}

#profile #aggregate li {
    width: calc(var(--spacing) * 48);
    margin: calc(var(--spacing) * 2);
    padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 1) calc(var(--spacing) * 3);
    border: 2px solid var(--layout-plus-1);
    border-radius: 0.75rem;

    background-color: #00000055;
}

#profile h4 {
    font-weight: var(--font-weight-bold);
}

#profile #per-social-account {
    border: 1px solid var(--layout-plus-1);
    border-radius: 0.75rem;
    margin-bottom: calc(var(--spacing) * 4);
}

#profile #per-social-account ul {
    display: flex;
    flex-wrap: wrap;
}

#profile #per-social-account li {
    margin: calc(var(--spacing) * 4);
}

.section_nav {
    margin-bottom: calc(var(--spacing) * 4);
}

.card.social {
    width: fit-content;
    background: #00000055;
}

.social div.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    border: 2px solid var(--color-taupe-gray);
    border-radius: var(--radius-lg);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);

    background-color: var(--layout-plus-1);
    padding: calc(var(--spacing) * 2);
}

.social div.body {
    padding: calc(var(--spacing) * 2);

    border: 2px solid var(--color-taupe-gray);
    border-radius: var(--radius-lg);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.social div.body ul {
    display: flex;
    gap: calc(var(--spacing) * 2);
}

.social div.body li {
    min-height: calc(var(--spacing) * 16);
    min-width: calc(var(--spacing) * 32);
}

.social div.body table {
    margin: calc(var(--spacing) * 6);
}
.social div.body tr.odd {
    background-color: var(--layout-plus-1);
}

.social div.body tr.even {
    background-color: var(--layout-minus-1);
}

.social div.body td {
    padding: calc(var(--spacing) * 2);
}

#connections td form {
    margin: calc(var(--spacing) * 2);
}

#connections td {
    padding: 0 calc(var(--spacing) * 2);
}

#connections tr.odd {
    background-color: var(--layout-plus-1);
}

#connections tr.even {
    background-color: var(--layout-minus-1);
}

#facebook_account_confirm {
    width: 25rem;
    margin: calc(var(--spacing) * 8) auto;
}

#facebook_account_confirm td {
    border: 2px solid var(--layout-plus-1);
    padding: calc(var(--spacing) * 2);
    align-items: center;
}

tr.even {
    background-color: var(--layout-minus-1);
}

/* end profile layout */


/* elements */
button {
    border-radius: calc(infinity * 1px);
}

.errorlist {
    color: var(--color-plus-3);
}

.fancy_btn {
    border-radius: calc(infinity * 1px);
    border: 2px solid;
    padding: calc(var(--spacing) * 2);
    position: relative;
}

.fancy_btn[disabled="disabled"] {
    opacity: 25%;
}

.fancy_btn span {
    font-weight: var(--font-weight-bold);
    margin: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    position: relative;
    z-index: 10;
}

.fancy_btn div {
    border-radius: calc(infinity * 1px);
    inset: 0;
    position: absolute;
}

.fancy_btn.recommended {
    border: 0px solid;
}

.fancy_btn {
    color: inherit;
}

.icon {
    width: calc(var(--spacing) * 10);
    @media (width >= 48rem) {
        width: calc(var(--spacing) * 12);
    }
}

.subtitle {
    color: var(--color-minus-2);
    margin: calc(var(--spacing) * 6);
}

section.even {
    background-color: var(--layout-minus-1);
}

section.odd {
    background-color: var(--layout-plus-1);
}

.card {
    background-color: #00000055;
    border: 1px solid #FFFFFF33;
    border-radius: .75rem;
    padding: calc(var(--spacing) * 6);
    text-align: left;
}

.card.testimonial {
    width: calc(var(--spacing) * 96);
    height: calc(var(--spacing) * 52);
    flex-direction: column;
    display: flex;
    justify-content: space-between;
}

.card.person {
    border-radius: 0;
    border: 0px solid;
    display: flex;
    gap: calc(var(--spacing) * 6);
    padding: 0;
    width: calc(var(--spacing) * 64);
}


.card.person img {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
}

.person div.name_and_title {
    display: flex;
    flex-direction: column;
}

.person .name {
}

.person .title {
    color: var(--color-minus-2);
}

/* end elements */

/* messages area */
ul.messages {
    position: absolute;
    display: flex;
    width: 100%;
    margin-top: -0.5rem;
    justify-content: center;
    font-weight: bold;
    opacity: 0;
    animation: fadeout 5s;
}

@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

ul.messages li {
    width: fit-content;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    background-color: #FFF9;
    color: #000;
}

ul.messages .info { color: black; }
ul.messages .debug { color: darkblue; }
ul.messages .success { color: green; }
ul.messages .warning { color: firebrick; }
ul.messages .error { color: red; text-decoration: underline; }
/* end messages area */

/* provider branding */
a.facebook, button.facebook, #auth button.facebook {
    background-color: var(--facebook-blue);
    border: 0px solid;
    color: white;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
}

/* end provider branding */