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

body {
    margin: 0;
    min-height: 100vh
    background-color: black;

    font-family: "Comic Sans MS", "Comic Sans", cursive;
    animation: backgroundBreath 4s ease-in-out infinite;
}

@keyframes backgroundBreath {
    0%, 100% {
        background-color: rgb(0, 0, 0);
    }

    25% {
        background-color: rgb(22, 9, 29);
    }

    50% {
        background-color: rgb(9, 23, 34);
    }
    75% {
	background-color: rgb(23, 9, 7);
    }
}



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

header {
    background: black;
    height: 150px;
    text-align: center;

}


/* =========================
   ORANGE TEXT SIZES
   ========================= */

h1 {
    font-size: 48px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 22px;
}

p {
    font-size: 18px;
}
.tiny {
    font-size: 14px;
}

.center {
    text-align: center;
}

.top-right {
    float: right;
    width: 400px;
    border: 2px solid green;
    padding: 10px;
    margin: 0 20px 20px 20px;
}

.main-nav {
    background: #111;
    padding: 12px;
}

.main-nav a {
    color: orange;
    text-decoration: none;
    margin: 0 15px;
    font-size: 20px;
}

.main-nav a:hover {
    color: yellow;
}


a.orange {
    color: orange;
}

a.yellow {
    color: yellow;
}

a.cyan {
    color: cyan;
}

a.white {
    color: white;
}



.orange     { color: orange; }
.darkorange { color: darkorange; }
.yellow     { color: yellow; }
.red        { color: red; }
.cyan       { color: cyan; }
.lime       { color: lime; }
.white      { color: white; }
.gray       { color: gray; }
.green       { color: green; }
/* =========================
   ANIMATED GRADIENT TEXT
   ========================= */

.gradient-text {
    font-size: 80px;
    font-weight: bold;

    background: linear-gradient(
        90deg,
        darkblue,
        darkcyan,
        darkgreen,
        darkmagenta,
        darkorange,
        darkred,
        darkblue
    );

    background-size: 400% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: moveGradient 6s linear infinite;
}


/* =========================
   GRADIENT ANIMATION
   ========================= */

@keyframes moveGradient {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 400% 50%;
    }
}