body {
    color: #321c61;
    font-size: 22px;
    font-weight: normal;
    font-family: "Neonderthaw", cursive;
    background-color: #191119;
}

h1, h2, h3, h4, h5, h6 {
    font-style: normal;
    line-height: 1.6;
}

.h1, h1 {
    font-size: 3.2rem;
}

.h2, h2 {
    font-weight: 700;
    font-size: 5.25rem;
    background: #7D3AC7;
    background: linear-gradient(to right, #7D3AC7 0%, #F17FEE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

strong {
    font-weight: 900;
}

a {
    color: #e49b43;
}

a > img {
    margin-right: 12px;
}

a:hover {
    color: #F4EDF7;
}

a span {
    background: #221c22;
    display: block;
    padding: 5px 15px;
    border-radius: 5px;
    border: 2px solid #fff;
}

a:active {
    top: 4px;
    padding-bottom: 0px;
    box-shadow: 0 1px 0 #000;
}
a {
    display: inline-block;
    position: relative;
    font: normal 22px/25px sans-serif;
    margin-right: 10px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding-bottom: 3px;
    border-radius: 5px;
    transition: padding 0.1s, box-shadow 0.1s, top 0.1s;
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==');
    box-shadow: 0 2px 0 #000, 0 2px 0px 2px #F4EDF7;
}

footer {
    padding: 16px 0;
}

img {
    max-width: 100%;
}

p {
    line-height: 1.8;
    word-spacing: 4px;
}

code {
    color: #dc8756;
}

section, .section {
    padding: 64px 0;
}

.logo {
    max-width: 80px;
}

.logo-text {
    font-weight: bolder;
    color: #fff;
    position: relative;
    font-size: 36px;
    margin-left: 12px;
}

.header .hero {
    margin-top: 100px;
    min-height: 100vh;
}

.hero-image {
    width: 100%;
    max-width: 420px;
}

@media (max-width: 768px) {
    section {
        padding: 32px 0;
    }

    .header .hero {
        margin-top: 60px;
    }
}

.header .hero h1 {
    color: #fcfcfc;
    font-size: 56px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .header .hero h1 {
        line-height: 1.5;
    }
}

.hero .hero-title {
    color: #6A9746;
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.4;
    margin-bottom: 24px;
    letter-spacing: 0.095em;
    text-transform: uppercase;
}

.header .hero .hero-image {
    position: relative;
    max-width: 100%;
    z-index: 1;
}