:root {
    --background: rgb(246, 245, 242);
    --header-background: rgba(255, 255, 255, 0.673);
    --text-color: rgb(7, 5, 68);
    --lead-color: rgb(95 95 107);
    --placeholder-color: rgb(136, 136, 153);
    --action-color: rgb(59, 120, 244);
}

:root {
    --max-section-width: 1200px;
    --min-section-width: 300px;
    --section-width: clamp(var(--min-section-width), 100vw, var(--max-section-width));
    
    --scale: calc( ( var(--section-width) - var(--min-section-width) ) / (1200 - 300) );
    --half-scale: calc( --scale / 2 );

    --gutter-margin: calc(10px + ( var(--scale) * 80));    
}


/* body */

body {
    --primary-font: 'Atkinson Hyperlegible', 'Rubik', Corbel, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans',
        'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif; 
    height: max-content;
    background: var(--background);
    color: var(--text-color);
    font-family: var(--primary-font);
    font-size: calc(1rem + ( var(--scale) * 5));
    font-style: normal;
    font-stretch: normal;
    font-optical-sizing: auto;
    line-height: 1.7;
}

.emphasis {
    font-style: italic;
}


/* page header */

body::before {
    --header-height: 40px;
    content: '';
    position: absolute;
    top: 0;
    height: 40px;
    width: 100%;
    background: var(--header-background);
}

.page-header {
    position: sticky;
    top: 0;
    height: 40px;
    padding-top: 8px;
    padding-bottom: 9px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header .logo-wrapper {
    --duration: 4s;
    transition: var(--duration) linear;
    line-height: 1;
    transform: translate(0, 1px);
}

.page-header:hover .logo-wrapper {
    z-index: 100;
    transform: translate(17em, 1px);
}

.page-header .logo-image {
    opacity: 0.7;
    height: 1.4rem;
    color: #797795;
    transition: 
        transform var(--duration) step-end,
        opacity var(--duration) step-start
    ;
}

.page-header:hover .logo-image {
    opacity: .8;
    transform: rotateY(180deg);
}


.page-header .company-name {
    --company-font: 'Rubik';
    flex-grow: 2;
    color: white;
    opacity: 0.85;
    font-family: var(--company-font);
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--text-color);
    text-shadow: rgb(255 255 255) 0 0 20px;
}


/* layout and spacing */

section, header, footer { 
    min-width: var(--min-section-width);
    max-width: var(--max-section-width);
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
}

section:not(:last-child) {
    margin-bottom: 8em;
}

section > *, header, footer {
    padding-left: var(--gutter-margin);
    padding-right: var(--gutter-margin);
}

footer {
    margin-top: 50px;
    font-size: calc(.7rem + ( var(--scale) * 7));
    /* avoid the Support Us button */
    text-align: right;
}
@media (min-width: 1440px) {
    footer {
        text-align: left;
    }
}

p {
    --margin: 1.4em;
    margin-top: var(--margin);
    margin-bottom: var(--margin);
}

.lead {
    margin-top: 1.35em;
    margin-bottom: 1.6em;
    color: var(--lead-color);
    font-weight: 600;
    font-size: calc(1.05rem + ( var(--scale) * 6));
}


/* headings */

h1, h2 {
    --header-font: 'Fredericka the Great', Georgia, 'Times New Roman', Times, serif;
    font-family: var(--header-font);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-optical-sizing: auto;
}

h1 {
    margin-top: 0;
    padding-top: .9em;
    padding-bottom: .85em;
    background-image: url(../assets/cb.svg);
    background-size: 60%;
    
    font-size: calc(3.7rem + ( var(--scale) * 60));
    line-height: 1;
    text-shadow:
        rgb(255 255 255) 4px 3px 2px, 
        rgb(255 255 255) -4px -3px 2px,
        rgb(255 255 255) -4px 3px 2px, 
        rgb(255 255 255) 4px -3px 2px
    ;
}

h2 {
    margin-bottom: .7em;
    font-size: calc(1.75rem + ( var(--scale) * 26));
    line-height: 1.5;
    hyphens: auto;
}

h2 > span, .wayfinder > span {
    white-space: nowrap;
}

h2 .wayfinder {
    display: block;
    margin-bottom: 0.5em;
    font-family: 'Comfortaa';
    font-weight: 700;
    font-size: calc(.9rem + ( var(--scale) * 2));
    line-height: 1.4;
    text-transform:uppercase;
}


/* hero */
/* .hero {
    background: 
    url(../assets/cb.svg), 
    url(../assets/magic-circle.png),
    url(../assets/lockword.gif)
        ;
    background-size: 50%, auto 100%, 50%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center center, top right, center right;
} */


ul {
    list-style-type: disc;
}

li {
    margin-left: 1em;
}

.world {
    padding: 0;
    margin: auto;
    position: relative;
    width: 300px;
    height: 300px;
    perspective: 1700px;
    transform: rotateX(338deg);
    transform-style: preserve-3d;
}

@keyframes spin {
    0% {
        transform: rotateX(90deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(90deg) rotateZ(360deg);
    }
}

.circle {
    animation-name: spin;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    width: 100%;
    height: auto;
    transform: rotateX(90deg);
 
}

.wall {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

}

.gears {
    background-image: url(../assets/clockword.gif);
    background-size: cover;
    transform: rotateX(-90deg) translateZ(40px);
    opacity: .35;
}

.circuit {
    background-image: url(../assets/cb.svg);
    background-size: cover;
    transform: translateZ(-150px);
}

.support-arrow {
    transform: translateX(100px) scale(.75);
}

@media (max-width: 500px) {
    .support-arrow {
        transform: rotateZ(-35deg) scale(.5);
    }
}

@media (min-width: 1220px) {
    .support-arrow {
        transform: translateX(100px) rotateZ(20deg) scale(.75);
    }
}

@media (min-width: 1440px) {
    .support-arrow {
        transform: rotateZ(20deg);
    }
}