/* =====================================
RESET
===================================== */

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* =====================================
PAGE
===================================== */

html {
scroll-behavior: smooth;
}

body {
background: #000;

color: #aaa;

font-family:
    "Courier New",
    Courier,
    monospace;

font-size: 16px;

line-height: 1.8;

min-height: 100vh;

overflow-x: hidden;


}

/* =====================================
MAIN NEWSLETTER
===================================== */

.newsletter {
    position: relative;

    width: 760px;
    max-width: 90%;

    margin: 100px auto 150px;

    text-align: center;
}

/* =====================================
HEADER
===================================== */

.newsletter-header {
margin-bottom: 100px;
}

.newsletter-header h1 {
color: #ccc;

font-size: 42px;

font-weight: normal;

letter-spacing: 1px;

margin-bottom: 15px;


}

.newsletter-header .issue {
color: #666;

font-size: 14px;


}

/* =====================================
SECTIONS
===================================== */

.newsletter-section {
margin-bottom: 100px;

text-align: center;


}

.newsletter-section h2 {
color: #c5c5c5;

font-size: 28px;

font-weight: normal;

margin-bottom: 25px;


}

.newsletter-section h3 {
color: #aaa;

font-size: 20px;

font-weight: normal;

margin-bottom: 20px;


}

.newsletter-section p {
max-width: 680px;

margin: 0 auto 20px;

color: #aaa;


}

/* =====================================
TEXT
===================================== */

strong,
b {
color: #ccc;
}

em {
color: #888;
}

/* =====================================
LINKS
===================================== */

a {
color: #aaa;

text-decoration: underline;


}

a:hover {
color: #fff;
}

/* =====================================
DIVIDERS
===================================== */

hr {
width: 65%;

margin: 80px auto;

border: 0;

border-top: 1px solid #333;


}

/* =====================================
NORMAL IMAGES
===================================== */

.image {
display: block;

height: auto;

margin: 50px auto;


}

.image-small {
width: 150px;
}

.image-medium {
width: 300px;

max-width: 90%;


}

.image-large {
width: 600px;

max-width: 100%;


}

/* =====================================
FLOATING IMAGES
===================================== */

/*
Floating images are positioned
independently from the newsletter.

You can use:

    top
    bottom
    left
    right

directly inside the HTML.

Example:

style="
    top: 700px;
    left: -100px;
    width: 180px;
    transform: rotate(15deg);
"


*/

/* =====================================
NORMAL FLOATING IMAGES
===================================== */

.floating-image {
    position: absolute;

    z-index: 20;

    height: auto;

    pointer-events: none;
}

/* =====================================
CLICKABLE FLOATING IMAGES
===================================== */

/* =====================================
   CLICKABLE FLOATING IMAGES
===================================== */

.floating-link {
    position: absolute;

    z-index: 100;

    display: block;

    width: 150px;

    line-height: 0;

    cursor: pointer;

    pointer-events: auto;
}

.floating-link img {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: auto;

    cursor: pointer;
}

/* =====================================
SPECIAL TEXT
===================================== */

.yellow-wiggle,
.red-shake,
.blue-float,
.green-bounce,
.purple-pulse,
.orange-wobble,
.white-flicker,
.gray-glitch {
display: inline-block;

font-size: 1.08em;
font-weight: bold;


}

/* =====================================
YELLOW — WIGGLE
===================================== */

.yellow-wiggle {
color: #fff200;

animation: yellow-wiggle 0.45s infinite ease-in-out;


}

@keyframes yellow-wiggle {

0% {
    transform: rotate(-2deg);
}

50% {
    transform: rotate(2deg);
}

100% {
    transform: rotate(-2deg);
}


}

@media (max-width: 850px) {

    .floating-image {
        max-width: 100px;

        /*
         * Prevent floating images from
         * disappearing completely off-screen.
         */
        left: auto;
        right: 10px;
    }

}

/* =====================================
RED — SHAKE
===================================== */

.red-shake {
color: #ff5555;

animation: red-shake 0.25s infinite;


}

@keyframes red-shake {

0% {
    transform: translateX(0);
}

25% {
    transform: translateX(-2px);
}

50% {
    transform: translateX(2px);
}

75% {
    transform: translateX(-2px);
}

100% {
    transform: translateX(0);
}


}

/* =====================================
BLUE — FLOAT
===================================== */

.blue-float {
color: #6fa8ff;

animation: blue-float 1s infinite ease-in-out;


}

@keyframes blue-float {

0% {
    transform: translateY(0);
}

50% {
    transform: translateY(-3px);
}

100% {
    transform: translateY(0);
}


}

/* =====================================
GREEN — BOUNCE
===================================== */

.green-bounce {
color: #70d070;

animation: green-bounce 0.6s infinite ease-in-out;


}

@keyframes green-bounce {

0% {
    transform: translateY(0);
}

50% {
    transform: translateY(-4px);
}

100% {
    transform: translateY(0);
}


}

/* =====================================
PURPLE — PULSE
===================================== */

.purple-pulse {
color: #c080ff;

animation: purple-pulse 1s infinite ease-in-out;


}

@keyframes purple-pulse {

0% {
    transform: scale(1);
}

50% {
    transform: scale(1.08);
}

100% {
    transform: scale(1);
}


}

/* =====================================
ORANGE — WOBBLE
===================================== */

.orange-wobble {
color: #ff9d4d;

animation: orange-wobble 0.7s infinite ease-in-out;


}

@keyframes orange-wobble {

0% {
    transform: rotate(-4deg);
}

50% {
    transform: rotate(4deg);
}

100% {
    transform: rotate(-4deg);
}


}

/* =====================================
WHITE — FLICKER
===================================== */

.white-flicker {
color: #fff;

animation: white-flicker 1.2s infinite;


}

@keyframes white-flicker {

0% {
    opacity: 1;
}

45% {
    opacity: 1;
}

50% {
    opacity: 0.4;
}

55% {
    opacity: 1;
}

100% {
    opacity: 1;
}


}

/* =====================================
GRAY — GLITCH
===================================== */

.gray-glitch {
color: #888;

animation: gray-glitch 0.5s infinite;


}

@keyframes gray-glitch {

0% {
    transform: translate(0, 0);
}

25% {
    transform: translate(-2px, 1px);
}

50% {
    transform: translate(2px, -1px);
}

75% {
    transform: translate(-1px, 1px);
}

100% {
    transform: translate(0, 0);
}


}

/* =====================================
FOOTER
===================================== */

.newsletter-footer {
margin-top: 150px;

padding-top: 30px;

border-top: 1px solid #333;

color: #555;

font-size: 13px;


}

/* =====================================
MOBILE
===================================== */

@media (max-width: 850px) {

body {
    font-size: 15px;
}


.newsletter {
    width: 92%;

    margin-top: 60px;
}


.newsletter-header {
    margin-bottom: 70px;
}


.newsletter-header h1 {
    font-size: 31px;
}


.newsletter-section {
    margin-bottom: 80px;
}


.newsletter-section h2 {
    font-size: 23px;
}


.newsletter-section p {
    max-width: 100%;
}


hr {
    width: 80%;

    margin: 60px auto;
}


/*
    Floating images stay inside
    the screen on mobile.
*/

.floating-image {
    max-width: 100px;
}


}

/* =====================================
REDUCED MOTION
===================================== */

@media (prefers-reduced-motion: reduce) {

html {
    scroll-behavior: auto;
}


}