@font-face {

    font-family:'Groovy Waves';

    src:url('/fonts/Groovy Waves Demo.otf') format('opentype');

    font-weight:normal;

    font-style:normal;

}


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

* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/* =========================================
BODY
========================================= */

body {

    font-family:'VT323', monospace;

    color:#d8d8d8;

    background:#87ceeb;

    background-image:url("images/groovywaves.jpg");

    background-size:contain;

    background-position:center;

    background-attachment:fixed;

    overflow-y:scroll;

}


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

.page {

    width:900px;

    margin:14px auto;

    background:rgba(255,255,255,.85);

    border:7.5px solid #FF87BF;

    box-shadow:
    0 0 25px rgba(0,0,0,.25);

    padding:12px;

}


/* =========================================
TOP BAR
========================================= */

.topbar {

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#666;

    font-size:20px;

    margin-bottom:20px;

}


.breadcrumbs a {

    color:#666;

    text-decoration:none;

}


.breadcrumbs a:hover {

    color:#FF7DBD;

}


/* =========================================
LOGO
========================================= */

.logo {

    font-family:'Groovy Waves', sans-serif;

    text-align:center;

    font-size:35px;

    letter-spacing:5px;

    word-spacing:-18px;

    line-height:1;

    color:#FF7DBD;

    text-shadow:
        0 0 8px #FFB247,
        0 0 20px #FFB247,
        0 0 45px #FFB247;

    animation:titleFloat 5s ease-in-out infinite;

    position:relative;

    top:15px;

}


.logo span {

    display:inline-block;

    animation:softWave 6s ease-in-out infinite;

}


/* =========================================
LOGO WAVE DELAYS
========================================= */

.logo span:nth-of-type(1) {

    animation-delay:0s;

}


.logo span:nth-of-type(2) {

    animation-delay:.15s;

}


.logo span:nth-of-type(3) {

    animation-delay:.3s;

}


.logo span:nth-of-type(4) {

    animation-delay:.45s;

}


.logo span:nth-of-type(5) {

    animation-delay:.6s;

}


.logo span:nth-of-type(6) {

    animation-delay:.75s;

}


.logo span:nth-of-type(7) {

    animation-delay:.9s;

}


.logo span:nth-of-type(8) {

    animation-delay:1.05s;

}


/* =========================================
LOGO ANIMATION
========================================= */

@keyframes softWave {

    0%,
    100% {

        transform:translateY(0);

    }

    50% {

        transform:translateY(-6px);

    }

}


/* =========================================
FLOWER IMAGE DIVIDER
========================================= */

.image-divider {

    position:relative;

    width:100%;

    top:12px;

    left:0;

    text-align:center;

    margin:0;

    transform:translateY(30px);

}


.image-divider img {

    display:inline-block;

    image-rendering:pixelated;

}


/* =========================================
FIRST DIVIDER
========================================= */

.first-divider {

    position:relative;

    width:calc(100% + 24px);

    height:7px;

    top:0;

    left:-12px;

    background:#FF70A1;

    margin:0;

    transform:translateY(50px);

}


/* =========================================
SECOND DIVIDER
========================================= */

.second-divider {

    position:absolute;

    width:calc(100% + 24px);

    height:7px;

    top:139px;

    left:-12px;

    background:#D58AFF;

    margin:0;

    transform:translateY(14px);

}


/* =========================================
THIRD DIVIDER
========================================= */

.third-divider {

    position:absolute;

    width:calc(100% + 24px);

    height:7px;

    top:145px;

    left:-12px;

    background:#6FE2F2;

    margin:0;

    transform:translateY(15px);

}


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

header {

    position:relative;

}


/* =========================================
CLOUDS
========================================= */

.cloud {

    position:fixed;

    background:#ffffff;

    width:80px;

    height:30px;

    image-rendering:pixelated;

    opacity:.9;

    pointer-events:none;

    z-index:0;

}


.cloud:before,
.cloud:after {

    content:"";

    position:absolute;

    background:#ffffff;

}


.cloud:before {

    width:35px;

    height:35px;

    left:15px;

    top:-15px;

}


.cloud:after {

    width:40px;

    height:25px;

    right:8px;

    top:-8px;

}


/* =========================================
CLOUD POSITIONS
========================================= */

.cloud1 {

    top:15%;

    left:-150px;

    animation:cloudMove 45s linear infinite;

}


.cloud2 {

    top:38%;

    left:-220px;

    animation:cloudMoveSmall 60s linear infinite;

}


.cloud3 {

    top:60%;

    left:-250px;

    animation:cloudMoveLarge 75s linear infinite;

}


/* =========================================
CLOUD MOVEMENT
========================================= */

@keyframes cloudMove {

    from {

        transform:translateX(0);

    }

    to {

        transform:translateX(130vw);

    }

}


@keyframes cloudMoveSmall {

    from {

        transform:translateX(0) scale(.7);

    }

    to {

        transform:translateX(130vw) scale(.7);

    }

}


@keyframes cloudMoveLarge {

    from {

        transform:translateX(0) scale(1.2);

    }

    to {

        transform:translateX(130vw) scale(1.2);

    }

}


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

.site-footer {

    width:100%;

    text-align:center;

    margin-top:45px;

    padding-top:4px;

    padding-bottom:0;

}


.site-footer img {

    display:block;

    margin:0 auto;

    max-width:270px;

    height:auto;

    image-rendering:pixelated;

}

/* =========================================
NEW ABOUT PAGE CONTENT
========================================= */

.about-layout {

    position:relative;

    width:100%;

    min-height:750px;

}


/* =========================================
LEFT IMAGE
========================================= */

.about-image {

    position:absolute;

    width:200px;

    height:auto;

    top:85px;

    left:40px;

}


.about-image img {

    display:block;

    width:100%;

    height:auto;

    image-rendering:pixelated;

}


/* =========================================
LARGE SCROLLABLE BOX
========================================= */

.about-large-box {

    position:absolute;

    width:550px;

    height:300px;

    top:85px;

    left:280px;

    background:#ffffff;

    border:3px solid #FF87BF;

    padding:15px;

    overflow:hidden;

}


/* =========================================
THREE SMALL BOXES
========================================= */

.about-bottom {

    position:absolute;

    top:370px;

    left:40px;

    width:720px;

    height:250px;

}


/* =========================================
   BOX ONE
========================================= */

.about-box.box-one {

    position:absolute;

    top:-10px;

    left:-10px;

    width:220px;

    height:300px;

    background:#ffffff;

    border:3px solid #FF87BF;

    padding:15px;

    overflow:hidden;

}


/* =========================================
   BOX TWO
========================================= */

.box-two {

    position:absolute;

    width:220px;
    height:220px;

    top:30px;
    left:250px;

    background:#ffffff;

    border:3px solid #FF87BF;

    padding:15px;

    overflow:hidden;

}


/* =========================================
   BOX THREE
========================================= */

.box-three {

    position:absolute;

    width:220px;
    height:220px;

    top:30px;
    left:500px;

    background:#ffffff;

    border:3px solid #FF87BF;

    padding:15px;

    overflow:hidden;

}

/* =========================================
BOX HEADINGS
========================================= */

.about-layout h2 {

    margin:0 0 10px 0;

    text-align:center;

    font-family:'VT323', monospace;

    font-size:24px;

    color:#FF87BF;

}


/* =========================================
SCROLLABLE CONTENT
========================================= */

.about-scroll {

    width:100%;

    height:calc(100% - 40px);

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:8px;

}


.about-scroll p {

    margin:0 0 15px 0;

    font-family:'VT323', monospace;

    font-size:18px;

    line-height:1.3;

    color:#555;

}


/* =========================================
SCROLLBARS
========================================= */

.about-scroll::-webkit-scrollbar {

    width:8px;

}


.about-scroll::-webkit-scrollbar-track {

    background:transparent;

}


.about-scroll::-webkit-scrollbar-thumb {

    background:#DE9CFF;

    border-radius:20px;

}


.about-scroll::-webkit-scrollbar-thumb:hover {

    background:#FF87BF;

}