@import url('https://fonts.googleapis.com/css2?family=Lexend+Tera&display=swap');

:root {
    --base-size: 150px;
}

body {
    margin: 0;
    background: rgb(160, 63, 63);
    font-family: 'Lexend Tera', Arial, Helvetica, sans-serif;
}

header {
    position: fixed;
    width: 104vw;
    text-align: center;
    letter-spacing: 4vw;
}

@keyframes textAppear {
    from {opacity: 0} to {opacity: 1}
}

header > h1 {
    margin: 10px 0;
}

header > h1 > span {
    font-size: max(30px, 8vw);
    font-weight: 900;
    animation: 0.2s textAppear both;
}

header > h1 > span:nth-child(1) { animation-delay: 0.8s }
header > h1 > span:nth-child(2) { animation-delay: 1.2s }
header > h1 > span:nth-child(3) { animation-delay: 1.1s }
header > h1 > span:nth-child(4) { animation-delay: 1.4s }

footer {
    position: fixed;
    text-align: center;
    bottom: 10px;
    width: 100vw;
    animation: 0.5s textAppear 1.6s both;
}

footer, footer > a {
    font-weight: 500;
    color: black;
    transition: background 0.2s ease-in;
}

footer > a:hover,
footer > a:focus {
    border: none;
    outline: none;
    background: #ffee51;
}

.container {
    display: flex;
    width: 100vw;
    flex-wrap: wrap;
    overflow: hidden;
}

@keyframes slideIn {
    0% {transform: translateY(100%)}
    100% {transform: none}
}

.section {
    flex: 1;
    width: calc(100vw / 3);
    min-width: 300px;
    height: 100vh;
    break-inside: avoid;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 1s slideIn ease-out both;
}

.section *, .section *::before, .section *::after {
    position: absolute;
}

.section-face-mask {
    background: lightsalmon;
    --color-mask-layer-1: #7777f5;
    --color-mask-layer-2: #6767e2;
    --color-mask-layer-3: #5b5bd1;
    --color-mask-layer-4: #4c4cb8;
    --color-mask-string: #5b5bd1;
    --color-skin: #975428;
    --ear-offset-x: calc(0.51 * var(--base-size));
    --ear-size: calc(-0.36 * var(--base-size));
    --box-shadow-face: calc(-1 * var(--ear-offset-x)) 0 0 var(--ear-size) var(--color-skin),
        var(--ear-offset-x) 0 0 var(--ear-size) var(--color-skin);
}

.section-face-shield {
    background: salmon;
    animation-delay: 0.2s;
    --color-mask-layer-1: #fd9acc;
    --color-mask-layer-2: #f577b6;
    --color-mask-layer-3: #eb58a1;
    --color-mask-layer-4: #d8418c;
    --color-mask-string: #eb58a1;
    --color-skin: #b17c40;
    --box-shadow-face: 0 calc(-0.1 * var(--base-size)) 0 calc(0.17 * var(--base-size)) #7777f5;
}

.section-gas-mask {
    background: indianred;
    animation-delay: 0.4s;
    --color-skin: #e2ca7a;
    --color-hair: black;
    --box-shadow-face: calc(-0.51 * var(--base-size)) 0 0 calc(-0.36 * var(--base-size)) var(--color-skin),
    calc(0.51 * var(--base-size)) 0 0 calc(-0.36 * var(--base-size)) var(--color-skin),
    0 calc(-0.1 * var(--base-size)) 0 calc(0.08 * var(--base-size)) var(--color-hair);
}

.el__background-circle {
    width: calc(1.66 * var(--base-size));
    height: calc(1.66 * var(--base-size));
    background: transparent;
    border-radius: 50%;
    transform: translateY(calc(-0.08 * var(--base-size)));
    box-shadow: 0px 0px 100px;
}

.el__face {
    border-radius: 50%;
    width: var(--base-size);
    height: calc(var(--base-size) * 1.08);
    background: var(--color-skin);
    padding-bottom: 0;
    box-shadow: var(--box-shadow-face);
}

.el__hair {
    --color-hair: black;
    width: calc(0.36 * var(--base-size));
    height: calc(0.34 * var(--base-size));
    background: var(--color-hair);
    border-radius: 130px 50px 160px 0px;
    transform: translate(calc(-0.35 * var(--base-size)), calc(-0.46 * var(--base-size)));
}

.el__hair::after {
    content: '';
    width: calc(0.78 * var(--base-size));
    height: calc(0.36 * var(--base-size));
    background: var(--color-hair);
    transform: translate(calc(0.3 * var(--base-size)), calc(-0.04 * var(--base-size)));
    border-radius: 100px 200px 0px 200px;
}

.el__hair::before {
    content: '';
    background: var(--color-hair);
    width: calc(0.14 * var(--base-size));
    height: calc(0.21 * var(--base-size));
    transform: translateY(calc(0.25 * var(--base-size)));
    box-shadow: calc(0.94 * var(--base-size)) 0;
}

.el__mask {
    width: calc(0.95 * var(--base-size));
    height: calc(0.25 * var(--base-size));
    background: var(--color-mask-layer-1);
    border-radius: 0 0 50% 50%;
    box-shadow: 0px calc(0.126 * var(--base-size)) 0 calc(-0.02 * var(--base-size)) var(--color-mask-layer-2),
        0 calc(0.21 * var(--base-size)) 0 calc(-0.04 * var(--base-size)) var(--color-mask-layer-3),
        0 calc(0.29 * var(--base-size)) 0 calc(-0.06 * var(--base-size)) var(--color-mask-layer-4);
    transform: translate(0px, calc(0.12 * var(--base-size)));
}

.el__mask::after, 
.el__mask::before {
    content: '';
    height: calc(0.21 * var(--base-size));
    width: calc(0.03 * var(--base-size));
    background: var(--color-mask-string);
}

.el__mask::before {
    transform: translate(calc(-0.04 * var(--base-size)), calc(-0.19 * var(--base-size))) rotate(-27deg);
    box-shadow: calc(-0.11 * var(--base-size)) calc(0.35 * var(--base-size)) var(--color-mask-string);
}

.el__mask::after {
    transform: translate(calc(0.97 * var(--base-size)), calc(-0.19 * var(--base-size))) rotate(27deg);
    box-shadow: calc(0.11 * var(--base-size)) calc(0.35 * var(--base-size)) var(--color-mask-string);
}

.el__shield-container {
    width: calc(1.06 * var(--base-size));
    height: calc(1.38 * var(--base-size));
    perspective: calc(1.49 * var(--base-size));
}

.el__shield {
    background: #0000ff41;
    width: 100%;
    height: 95%;
    transform: rotateX(19deg);
    border-radius: 0 0 20% 20%;
}

.el__shield::before {
    content: '';
    width: calc(1.06 * var(--base-size));
    height: calc(0.15 * var(--base-size));
    background: #ffee51;
}

.el__shield::after {
    --color-shield-shine: white;
    content: '';
    width: calc(0.04 * var(--base-size));
    height: calc(0.92 * var(--base-size));
    background: var(--color-shield-shine);
    border-radius: 50px;
    transform: translate(calc(0.04 * var(--base-size)), calc(0.23 * var(--base-size)));
    box-shadow: calc(0.92 * var(--base-size)) 0 var(--color-shield-shine);
}

.el__gas-mask {
    width: calc(0.95 * var(--base-size));
    height: calc(1.1 * var(--base-size));
}

.el__gas-mask--base {
    border-radius: 50% 50% 40% 40%;
    background: linear-gradient(to right, grey 0 50%, rgb(104, 103, 103) 50%);
    width: 100%;
    height: 100%;
}

.el__gas-mask--goggles {
    width: 100%;
    height: calc(0.42 * var(--base-size));
    transform: translateY(calc(0.21 * var(--base-size)));
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.el__gas-mask--goggles-item {
    border-radius: 50%;
    background: rgb(99, 99, 255);
    width: calc(0.25 * var(--base-size));
    height: calc(0.25 * var(--base-size));
    position: relative;
    box-shadow: 0 0 0 calc(0.05 * var(--base-size)) rgb(44, 44, 44),
        0 0 0 calc(0.1 * var(--base-size)) rgb(78, 78, 78);
}

.el__gas-mask--goggles-item::before {
    content: '';
    background: white;
    width: calc(0.02 * var(--base-size));
    height: calc(0.15 * var(--base-size));
    border-radius: 50px;
    transform: translate(calc(0.08 * var(--base-size)), calc(0.01 * var(--base-size))) rotate(40deg);
    box-shadow: calc(0.06 * var(--base-size)) 0 0 2px white;
}

.el__gas-mask--snout {
    background: rgb(44, 44, 44);
    border-radius: 50% 50% 0 0;
    height: calc(0.42 * var(--base-size));
    width: calc(0.42 * var(--base-size));
    transform: translate(calc(0.27 * var(--base-size)), calc(0.63 * var(--base-size)));
}

.el__gas-mask--snout::before {
    content: '';
    width: calc(0.38 * var(--base-size));
    height: calc(0.38 * var(--base-size));
    border-radius: 50%;
    background: radial-gradient(grey 20%, black 30%);
    background-size: calc(0.04 * var(--base-size)) calc(0.04 * var(--base-size));
    box-shadow: 0 0 0 calc(0.03 * var(--base-size)) rgb(44, 44, 44),
        0 0 0 calc(0.08 * var(--base-size)) rgb(78, 78, 78);
    transform: translate(calc(0.02 * var(--base-size)), calc(0.25 * var(--base-size)));
}

.el__gas-mask--straps {
    --color-straps: rgb(92, 92, 92);
    width: calc(0.12 * var(--base-size));
    height: calc(0.19 * var(--base-size));
    background: var(--color-straps);
    transform: translateY(calc(-0.63 * var(--base-size)));
    box-shadow: calc(-0.11 * var(--base-size)) calc(1.22 * var(--base-size)) var(--color-straps);
}

.el__gas-mask--straps::before,
.el__gas-mask--straps::after {
    content: '';
    width: calc(0.12 * var(--base-size));
    height: calc(0.19 * var(--base-size));
    background: var(--color-straps);
    box-shadow: 0px calc(1.02 * var(--base-size)) var(--color-straps);
}

.el__gas-mask--straps::before {
    transform: rotate(-57deg) translate(calc(-0.53 * var(--base-size)), calc(-0.21 * var(--base-size)));
}

.el__gas-mask--straps::after {
    transform: rotate(57deg) translate(calc(0.53 * var(--base-size)), calc(-0.21 * var(--base-size)));
}

@keyframes changeBackground {
    0%, 27% { background-image: var(--bg-image-1) }
    33%, 60% { background-image: var(--bg-image-2) }
    66%, 93% { background-image: var(--bg-image-3) }
    0%, 27%,
    33%, 60%,
    66%, 93% {
        opacity: 1;
    }
    29%, 31%,
    62%, 64%,
    95%, 97% {
        opacity: 0;
    }
}

.section::before {
    content: '';
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    filter: grayscale() opacity(0.4) brightness(70%);
    transition: background 1s linear;
    background-image: var(--bg-image-1);
    animation: changeBackground 12s ease-in both infinite;
    box-shadow:  0 0 100px;
}

.section-face-mask::before {
    --bg-image-1: url(https://images.unsplash.com/photo-1584252331038-d4d09c9ebce3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80);
    --bg-image-2: url(https://images.unsplash.com/photo-1580458072512-96ced1f43991?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
    --bg-image-3: url(https://images.unsplash.com/photo-1584744982491-665216d95f8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
    background-position-x: -200px;
}

.section-face-shield::before {
    --bg-image-1: url(https://images.unsplash.com/photo-1579165466949-3180a3d056d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);
    --bg-image-2: url(https://images.unsplash.com/photo-1584467735867-4297ae2ebcee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
    --bg-image-3: url(https://images.unsplash.com/photo-1549560976-cf6be881db29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
    animation-delay: 1.6s;
}

.section-gas-mask::before {
    --bg-image-1: url(https://images.unsplash.com/photo-1590895763408-2788fce4a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
    --bg-image-2: url(https://images.unsplash.com/photo-1567669970294-11a7fdac67f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
    --bg-image-3: url(https://images.unsplash.com/photo-1560179429-5bdb77b931ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
    animation-delay: 0.8s;
}