/* Resets and variables */
:host,
:root {
    --atl-color-bg: #f7f8fc;
    --atl-color-current: currentcolor;
    --atl-color-transparent: transparent;
    --atl-color-white: #ffffff;

    --atl-color-blue-5: #f2f5ff;
    --atl-color-blue-10: #e6ebff;
    --atl-color-blue-20: #ced9fe;
    --atl-color-blue-40: #9db3fd;
    --atl-color-blue-60: #6c8dfc;
    --atl-color-blue-80: #3b67fb;
    --atl-color-blue-100: #0a41fa;
    --atl-color-blue-120: #0834c7;
    --atl-color-green-5: #f4fbf4;
    --atl-color-green-10: #eaf7e9;
    --atl-color-green-20: #d6eed5;
    --atl-color-green-40: #addeab;
    --atl-color-green-60: #84cd81;
    --atl-color-green-80: #5bbc57;
    --atl-color-green-100: #33ac2e;
    --atl-color-green-120: #247820;
    --atl-color-grey-5: #f4f5f6;
    --atl-color-grey-10: #e9eaed;
    --atl-color-grey-20: #d5d7db;
    --atl-color-grey-40: #abafb7;
    --atl-color-grey-60: #818794;
    --atl-color-grey-80: #51596a;
    --atl-color-grey-100: #2e384d;
    --atl-color-grey-120: #0f131a;
    --atl-color-purple-5: #f9f6ff;
    --atl-color-purple-10: #f3edff;
    --atl-color-purple-20: #e8ddff;
    --atl-color-purple-40: #d1baff;
    --atl-color-purple-60: #ba98ff;
    --atl-color-purple-80: #a376ff;
    --atl-color-purple-100: #8c54ff;
    --atl-color-purple-120: #7043cc;
    --atl-color-red-5: #fef4f5;
    --atl-color-red-10: #fdeaec;
    --atl-color-red-20: #fbd6da;
    --atl-color-red-40: #f6aeb4;
    --atl-color-red-60: #f1868f;
    --atl-color-red-80: #ec5e6a;
    --atl-color-red-100: #e83645;
    --atl-color-red-120: #b52a36;
    --atl-color-turquoise-5: #f4fafa;
    --atl-color-turquoise-10: #e9f5f5;
    --atl-color-turquoise-20: #d4ebeb;
    --atl-color-turquoise-40: #aad6d7;
    --atl-color-turquoise-60: #7fc2c3;
    --atl-color-turquoise-80: #55aeaf;
    --atl-color-turquoise-100: #2b9a9c;
    --atl-color-turquoise-120: #1d6769;
    --atl-color-yellow-5: #fffcf5;
    --atl-color-yellow-10: #fff9ea;
    --atl-color-yellow-20: #fef3d7;
    --atl-color-yellow-40: #fce6af;
    --atl-color-yellow-60: #fada87;
    --atl-color-yellow-80: #f8cd5f;
    --atl-color-yellow-100: #f7c137;
    --atl-color-yellow-120: #c4992c;
}
/* Top of the cascade */
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    align-content: flex-start;
    background-color: var(--atl-color-bg);
    color: var(--atl-color-grey-120);
    display: flex;
    flex-flow: row wrap;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 405;
    margin: 0;
    min-height: 100vh;
}
/* Headings */
h1,
h2,
h3 {
    font-weight: 550;
    max-width: 550px;
}
h1 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.2;
    margin: 34px 0;
}
h3 {
    font-size: 18px;
    margin: 0 0 16px 0;
}
p {
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 16px 0;
    max-width: 500px;
}
p.lead {
    font-size: 18px;
    margin: 0 0 34px 0;
}
.icon--small {
    height: 24px;
    width: 24px;
}
.links {
    margin: 34px 0 8px 0;
}
.link {
    color: var(--atl-color-blue-100);
    display: block;
    font-size: 15px;
    line-height: 1.4;
    margin: 8px 0;
    text-decoration: none;
}
.link:hover {
    text-decoration: underline;
}
.buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    margin: 20px 0;
}
.button {
    align-items: center;
    background-color: transparent;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 16px;
    height: 44px;
    padding: 0 17px;
    text-decoration: none;
    transition: all 150ms;
}
.button--primary {
    background-color: var(--atl-color-blue-100);
    color: var(--atl-color-grey-5);
}
.button--primary:hover {
    background-color: var(--atl-color-blue-120);
}
.button--secondary {
    background-color: var(--atl-color-blue-10);
    color: var(--atl-color-blue-100);
}
.button--secondary:hover {
    background-color: var(--atl-color-blue-20);
}
aside {
    flex: 0 0 100%;
    overflow: hidden;
    position: relative;
}
@media (min-width: 1100px) {
    aside {
        flex: 1 0 50%;
        min-height: 100vh;
    }
}
@media (min-width: 1400px) {
    aside {
        flex: 1 0 60%;
    }
}
main {
    display: flex;
    flex-flow: column;
    flex: 0 0 100%;
    justify-content: space-between;
    max-width: 800px;
    padding: 24px;
}
@media (min-width: 1100px) {
    main {
        flex: 0 0 50%;
        min-height: 100vh;
        padding: 34px 34px 20vh 34px;
    }
}
@media (min-width: 1400px) {
    main {
        flex: 0 0 40%;
        padding: 44px 44px 22vh 44px;
    }
}
.svg-fill--purple-20 {
    fill: var(--atl-color-purple-20);
}
.svg-fill--yellow-40 {
    fill: var(--atl-color-yellow-40);
}
.svg-fill--yellow-80 {
    fill: var(--atl-color-yellow-80);
}
.svg-stroke--green-20 {
    stroke: var(--atl-color-green-20);
}
.svg-stroke--purple-40 {
    fill: transparent;
    stroke: var(--atl-color-purple-40);
}
.svg-stroke--yellow-80 {
    fill: transparent;
    stroke: var(--atl-color-yellow-80);
}
.logo {
    display: block;
    justify-self: flex-start;
    margin-left: auto;
    text-align: right;
}
img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.overlay {
    background-color: #0f131a;
    bottom: 0;
    left: 0;
    opacity: 0.35;
    position: absolute;
    right: 0;
    top: 0;
}
.paralellogram {
    left: 20%;
    position: absolute;
    top: 10%;
    width: clamp(100px, 15vw, 100vw);
}
@media (min-width: 1200px) {
    .paralellogram {
        left: 20%;
        position: absolute;
        top: 10%;
    }
}
.paralellogram > svg {
    fill: transparent;
    max-width: 100%;
    overflow: visible;
    stroke-width: 5px;
}
.angle {
    bottom: 7%;
    left: 7%;
    position: absolute;
    width: clamp(70px, 8vw, 9vw);
}
@media (min-width: 1200px) {
    .angle {
        bottom: 7%;
        height: 170px;
        left: 7%;
        position: absolute;
    }
}
.angle > svg {
    max-width: 100%;
    overflow: visible;
}
.spinning-thing {
    animation-direction: reverse;
    animation-duration: 27s;
    animation-iteration-count: infinite;
    animation-name: spin;
    animation-timing-function: linear;
    bottom: -10px;
    position: absolute;
    right: -20px;
    width: clamp(220px, 25vw, 100vw);
}
@media (min-width: 1200px) {
    .spinning-thing {
        animation-direction: reverse;
        animation-duration: 27s;
        animation-iteration-count: infinite;
        animation-name: spin;
        animation-timing-function: linear;
        bottom: -10px;
        position: absolute;
        right: -20px;
    }
}
.spinning-thing > svg {
    max-width: 100%;
    overflow: visible;
    stroke-width: 5px;
}
.invisible {
    opacity: 0;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}