/* global style */

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: monospace;
}

/* index */

#index #wrapper {
    width: 80%;
}


/* project template */

#home_btn {
    display: inline-block;
    margin: 25px
}

#home_btn a {
    font-size: 18px;
    text-decoration: none;
    font-weight: 400;
    color: #000000;
}

#home_btn a:hover {
    border-bottom: 10px solid;
}

.template {
    height: 350px;
    width: 350px;
    background-color: rgb(35, 45, 87);
    border: 0.1px lightgrey solid;
    overflow: hidden;
    position: relative;

    /* css grid for final page */

    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;

    /* center on page */

}


/* experiment IDs */

#experiment1 {}

#experiment2 {
    background-color: yellow;
}

#experiment3 {
    background-color: peachpuff;
}

#experiment4 {}

#experiment5 {
    background-color: azure;
}

#experiment6 {
    background-color: wheat;
}

#experiment7 {
    background-color: linen;
}

#experiment8 {
    background-color: cornsilk;
}

#experiment9 {
    background-color: lightyellow;
}

#experiment10 {}

#experiment11 {
    background-color: pink;
}

#experiment12 {
    background-color: yellow;
}

#experiment13 {
    background-color: peachpuff;
}

#experiment14 {
    background-color: aqua;
}

#experiment15 {
    background-color: azure;
}

#experiment16 {
    background-color: wheat;
}

#experiment17 {}

#experiment18 {
    background-color: cornsilk;
}

#experiment19 {}

#experiment20 {}

#experiment21 {
    background-color: rgb(255, 255, 255);
}

#experiment22 {
    background-color: #c8f2ff;
}

#experiment23 {
    background-color: sandybrown;
}

#experiment24 {
    background-color: lemonchiffon;
}


/* responsive styles */
/* desktop + global layout */

#wrapper {
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}


/* tablet only styles */
@media (max-width: 1100px) {

    #wrapper {
        display: inline-grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(12, 1fr);
    }
}

/* mobile only styles */
@media (max-width: 700px) {

    #wrapper {
        display: inline-grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(24, 1fr);
    }

}

/* Heading */
.header {
    position: relative;
    top: 0px;
    left: 10px;
    color: rgb(74, 72, 72);
    font-family: letter-gothic-std, monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    padding: 20px;
    display: inline-grid;
    z-index: 200;
}

.sub {
    position: relative;
    top: -8px;
    left: 5px;
    color: rgb(74, 72, 72);
    font-family: letter-gothic-std, monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 5px;
    padding: 20px;
    display: inline-grid;
    z-index: 200;
}

.interact {
    position: relative;
    top: 0px;
    left: -45px;
    color: rgb(255, 149, 72);
    font-family: letter-gothic-std, monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 15px;
    letter-spacing: 5px;
    padding: 20px;
    display: inline-grid;
    z-index: 200;
}

/* -----  week 2 styles  ----- */

/*Legibility Page*/
.makeMe {
    font-family: badtyp, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    width: 350px;
    letter-spacing: 5px;
    line-height: 1.2;
    z-index: 1;
    padding: 5px;
}

.text {
    text-rendering: optimizeLegibility;
    color: rgb(255, 247, 247);
    line-height: 1.5;
}

.hearts {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    opacity: .6;
    width: 350px;
    height: 350px;
    opacity: .4;
}

/*Gradient Page*/
.wrapper {
    align-items: center;
    background-image: linear-gradient(to right, #fc6a4f, #d64af7, #ffb7c8, #861a54, #054f7d);
    background-size: 600%;
    background-position: 0 0;
    box-shadow: inset 0 0 5em rgba(0, 0, 0, .5);
    width: 350px;
    height: 350px;
    display: flex;
    font-family: 'Lato', Arial, sans-serif;
    justify-content: center;
    /* Animation */
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-name: gradients;
}

.found {
    font-family: letter-gothic-std, monospace;
    font-weight: 400;
    font-style: normal;
    color: rgb(240, 248, 255);
}

pre {
    font-size: 3.6pt;
    color: rgb(114, 22, 142)
}

.bottom {
    color: rgb(237, 216, 57)
}

/*Web Font Page*/
.black {
    font-family: poppins, monospace;
    color: rgb(255, 255, 255);
    font-size: 70px;
    line-height: 1.3;
    letter-spacing: 4px;
    padding: 38.4px;
    z-index: 20;
}

.pink {
    color: rgb(255, 118, 155);
    z-index: 20;
}


.spiral {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -15;
    opacity: .75;
    width: 350px;
    height: 350px;
}

/*Rgba Page*/

.full-opacity {
    color: rgb(119, 7, 178);
    font-size: 15px;
    font-family: letter-gothic-std, monospace;
    padding: 10px;
    text-align: justify;
    text-justify: inter-word;
    background-color: rgb(237, 237, 237, 1);
}

.half-opacity {
    color: rgba(119, 7, 178, 0.5);
    font-size: 15px;
    font-family: letter-gothic-std, monospace;
    padding: 10px;
    text-align: justify;
    text-justify: inter-word;
    background-color: rgb(237, 237, 237, 0.5);
    ;
}

.quarter-opacity {
    color: rgba(119, 7, 178, 0.25);
    font-size: 15px;
    font-family: letter-gothic-std, monospace;
    padding: 10px;
    text-align: justify;
    text-justify: inter-word;
    background-color: rgb(237, 237, 237, 0.25);
    ;
}


/*Color Animation Page*/

.animation {
    width: 100px;
    height: 100px;
    background-color: rgb(238, 193, 173);
    position: relative;
    -webkit-animation-name: example;
    -webkit-animation-duration: 4s;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


@keyframes example {
    0% {
        background-color: rgb(164, 95, 111);
        left: 0px;
        top: 0px;
    }

    25% {
        background-color: rgb(235, 137, 159);
        left: 200px;
        top: 0px;
    }

    50% {
        background-color: rgb(182, 81, 101);
        left: 200px;
        top: 200px;
    }

    75% {
        background-color: rgb(107, 49, 60);
        left: 0px;
        top: 200px;
    }

    100% {
        background-color: rgb(238, 193, 173);
        left: 0px;
        top: 0px;
    }
}


.button1:hover {
    background-color: #4CAF50;
    color: white;
}

/*Image Reveal Page*/

body {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.img-container {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    border-radius: 2px;
    overflow: hidden;
}

.img-container img {
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.3);
    animation: pic 2s;
    animation-fill-mode: backwards;
}

.img-container .overlay {
    width: 100%;
    height: 100%;
    background-color: rgb(255, 142, 168);
    position: absolute;
    transform: scaleX(0);
    transform-origin: 0% 50%;
    animation: overlay 2s;
}

@keyframes pic {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    51% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes overlay {
    0% {
        transform: scaleX(0);
        transform-origin: 0% 50%;
    }

    50% {
        transform: scaleX(1);
        transform-origin: 0% 50%;
    }

    51% {
        transform: scaleX(1);
        transform-origin: 100% 50%;
    }

    100% {
        transform: scaleX(0);
        transform-origin: 100% 50%;
    }
}

/*Image Reveal2 Page*/

img {
    height: 250px;
    width: 350px;
}

.hgInner {
    position: relative;
    height: 350px;
    width: 50px;
    float: left;
    overflow: hidden;
    animation: reveal 8s ease-in;
    animation-fill-mode: both;
}

@-webkit-keyframes reveal {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    }
}

@keyframes reveal {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    }
}

/*Composition Zoom page*/

* {
    box-sizing: border-box;
}

.zoom {
    padding: 50px;
    background-color: rgb(255, 209, 217);
    transition: transform .2s;
    width: 350px;
    height: 350px;
    margin: 0 auto;
    font-family: 'Cedarville Cursive', cursive;
    color: rgb(55, 15, 67);
    font-size: 17px;
    letter-spacing: 2.px;
    line-height: 1.5;
    text-align: justify;
}

.center {
    position: absolute;
    top: 110px;
    left: 80px;
    padding: 15px;
    width: 190px;
}

.zoom:active {
    transform: scale(1.5);
    /* IE 9 */
    transform: scale(1.5);
    /* Safari 3-8 */
    transform: scale(1.5);
}

/*Image Transparency*/

.transparent {
    opacity: 0.1;
    filter: alpha(opacity=50);
}

.transparent:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
}

/*Composition Position*/

.one {
    position: fixed;
    top: 65px;
    left: 20px;
    font-size: 8px;
    width: 130px;
    background-color: rgb(212, 182, 92);
    color: rgb(255, 255, 255);
    padding: 5px;
    font-family: letter-gothic-std, monospace;
}

.two {
    position: absolute;
    top: 5px;
    left: 190px;
    font-size: 10px;
    width: 130px;
    background-color: rgb(193, 79, 60);
    color: rgb(255, 255, 255);
    padding: 5px;
    font-family: letter-gothic-std, monospace;
}

.three {
    position: static;
    top: 300px;
    left: 300px;
    font-size: 14px;
    width: 200px;
    background-color: rgb(173, 54, 56);
    color: rgb(255, 255, 255);
    padding: 5px;
    font-family: letter-gothic-std, monospace;
}

.four {
    position: relative;
    top: 150px;
    left: 90px;
    font-size: 14px;
    width: 130px;
    background-color: rgb(136, 48, 70);
    color: rgb(255, 255, 255);
    padding: 5px;
    font-family: letter-gothic-std, monospace;
}

.five {
    position: sticky;
    top: 250px;
    left: 290px;
    font-size: 18px;
    width: 130px;
    background-color: rgb(92, 38, 62);
    color: rgb(255, 255, 255);
    padding: 5px;
    font-family: letter-gothic-std, monospace;
}

/*Composition Z-Index*/

.zOne {
    position: absolute;
    width: 254.966px;
    height: 198.86px;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.8;
    filter: alpha(opacity=50);
    z-index: 3;
}

.zTwo {
    position: absolute;
    width: 254.966px;
    height: 198.86px;
    position: absolute;
    top: 70px;
    left: 50px;
    opacity: 0.8;
    filter: alpha(opacity=50);
    z-index: 4;
}

.zThree {
    position: absolute;
    width: 254.966px;
    height: 198.86px;
    position: absolute;
    top: 160px;
    left: 96px;
    opacity: 0.8;
    filter: alpha(opacity=50);
    z-index: 3;
}

.zFour {
    position: absolute;
    width: 254.966px;
    height: 198.86px;
    position: absolute;
    top: 0px;
    left: 96px;
    opacity: 0.8;
    filter: alpha(opacity=50);
    z-index: 3;
}

.zFive {
    position: absolute;
    width: 254.966px;
    height: 198.86px;
    position: absolute;
    top: 155px;
    left: 0px;
    opacity: 0.8;
    filter: alpha(opacity=50);
    z-index: 3;
}

.grey {
    background-color: rgb(221, 221, 221);
    width: 350px;
    height: 350px;
    z-index: -10;
}

.words {
    z-index: 1;
    padding: 15px;
    font-family: letter-gothic-std, monospace;
    text-align: right;
    color: #9a9f9f
}

/* -----  week 3 styles  ----- */

/*Gif Loop*/

.rotate {
    transform: rotate(90 deg);
}

.proper {
    color: rgb(255, 149, 72);
    position: absolute;
    top: 170px;
    left: 85px;
    font-size: 20px;
    font-family: amador, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 4px;
}

/*Gif Recursive*/

.ad {
    font-family: poplar-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 27px;
    color: rgb(35, 22, 42);
    letter-spacing: 5px;
    position: absolute;
    top: 250px;
    left: 12px;
}

/*
.ad1 {
    font-family: poplar-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    color: rgb(106, 99, 99);
    letter-spacing: 5px;
    position: absolute;
    top: 280px;  
}
*/

.pinkbag {
    position: absolute;
    top: 0px;
    left: 0px;
    filter: alpha(opacity=50);
    z-index: 3
}

.bluebag {
    position: absolute;
    top: 0px;
    left: 0px;
    filter: alpha(opacity=50);
    z-index: 2
}

.greenbag {
    position: absolute;
    top: 0px;
    left: 0px;
    filter: alpha(opacity=50);
    z-index: 1
}

.gone {
    position: absolute;
    top: 150px;
    left: 50px;
    font-family: poplar-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 27px;
    color: rgb(229, 182, 255);
    letter-spacing: 5px;
}

/*Gif Meme*/

.memetext {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    padding: 10px;
    font-family: arial;
    font-size: 15px;
    position: absolute;
    top: 47px;
    left: 15px;
    letter-spacing: 2px;
}

/*Map Personality*/

.map {
    color: rgb(255, 149, 72);
    position: absolute;
    top: 270px;
    left: 65px;
    font-size: 20px;
    font-family: amador, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 4px;
}

/*Youtube Rhythm*/
.paper {
    position: absolute;
    top: 100px;
    left: 70px;
    z-index: 51;
    width: 250px;
    height: 190px;
}

.tv {
    position: absolute;
    height: 350px;
    width: 350px;
    z-index: 50;
}

/*Video Direction*/

.moon {
    z-index: 4;
    position: absolute;
    top: 100px;
    left: 40px;
    font-family: letter-gothic-std, monospace;
    font-size: 20px;
}

/*Sound Voice*/

.big {
    z-index: 4;
    position: absolute;
    top: 0px;
    left: 40px;
    font-family: letter-gothic-std, monospace;
    font-size: 30px;
    color: rgb(75, 139, 255);
}

.small {
    z-index: 4;
    position: absolute;
    top: 280px;
    left: 120px;
    font-family: letter-gothic-std, monospace;
    font-size: 10px;
    color: rgb(158, 221, 118)
}

.pinkbag {
    z-index: 2;
    position: absolute;
    top: 30px;
    left: -20px;
}

.spoken {
    z-index: 2;
    position: absolute;
    top: 310px;
    left: 10px;
}

/*Sound Voice*/

.multiple {
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 350px;
    height: 350px;
}

.bigger {
    z-index: 4;
    position: absolute;
    top: 20px;
    left: 180px;
    font-family: letter-gothic-std, monospace;
    font-size: 30px;
    color: rgb(75, 139, 255);
}

.bigger2 {
    z-index: 4;
    position: absolute;
    top: 25px;
    left: 185px;
    font-family: letter-gothic-std, monospace;
    font-size: 30px;
    color: rgb(112, 19, 162);
}

.smaller {
    z-index: 4;
    position: absolute;
    top: 260px;
    left: 20px;
    font-family: letter-gothic-std, monospace;
    font-size: 10px;
    color: rgb(158, 221, 118)
}

.pinkbaggs {
    z-index: 2;
    position: absolute;
    top: 30px;
    left: -20px;
}

.crackle {
    z-index: 2;
    position: absolute;
    top: 285px;
    left: 10px;
}

/*Sound Music Gen*/

.beat {
    z-index: 4;
    position: absolute;
    top: 0px;
    left: 0px;
    font-family: amador, sans-serif;
    font-size: 60px;
    color: rgb(222, 201, 145);
    background-color: black;
}

.over {
    position: absolute;
    top: 150px;
    left: 20px;
}

.head {
    font-family: letter-gothic-std, monospace;
    font-size: 15px;
    color: rgb(195, 145, 222);
    position: absolute;
    top: 130px;
    left: 270px;
}

/* -----  week 4 styles  ----- */

/*Anim Fade In*/

.purple {
    background-color: rgb(232, 186, 255);
    width: 350px;
    height: 350px;
}

.cake {
    z-index: 4;
    position: absolute;
    top: 40px;
    left: 20px;
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    color: rgb(255, 255, 255);
    line-height: 12px;
}

.cake2 {
    z-index: 4;
    position: absolute;
    top: 240px;
    left: 230px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    color: rgb(255, 255, 255);
    line-height: 12px;
}

.cake3 {
    z-index: 4;
    position: absolute;
    top: 300px;
    left: 90px;
    font-family: 'Raleway', sans-serif;
    font-size: 8px;
    color: rgb(255, 255, 255);
    line-height: 12px;
}

.smallTyp {
    z-index: 4;
    position: absolute;
    top: 70px;
    left: 280px;
    font-family: 'Raleway', sans-serif;
    font-size: 6px;
    color: rgb(132, 72, 177);
    line-height: 12px;
}

.slice {
    width: 400px;
    height: 400px;
    position: absolute;
    top: -70px;
    left: -50px;
    display: none;
}

.slice2 {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 255px;
    left: 0px;
    display: none;
}

/*Anim Fade Out*/

.pink {
    background-color: rgb(255, 210, 226);
    width: 350px;
    height: 350px;
}

.c {
    z-index: 4;
    position: absolute;
    top: 30px;
    left: 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 80px;
    color: rgb(255, 255, 255);
    line-height: 12px;
}

.o {
    z-index: 4;
    position: absolute;
    top: 60px;
    left: 160px;
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    color: rgb(255, 255, 255);
    line-height: 12px;
}

.r {
    z-index: 4;
    position: absolute;
    top: 150px;
    left: 300px;
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    color: rgb(255, 255, 255);
    line-height: 12px;
}

.g {
    z-index: 4;
    position: absolute;
    top: 200px;
    left: 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 200px;
    color: rgb(255, 255, 255);
    line-height: 12px;
}

.i {
    z-index: 4;
    position: absolute;
    top: 300px;
    left: 300px;
    font-family: 'Raleway', sans-serif;
    font-size: 40px;
    color: rgb(255, 255, 255);
    line-height: 12px;
}

.behind {
    width: 300px;
    height: 250px;
    position: absolute;
    top: 0px;
    left: 60px;
}

/*Fade To Page*/

.boquet1 {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 250px;
    height: 250px;
    z-index: 5;
}

.boquet2 {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 250px;
    height: 250px;
    z-index: 0;
}

.tiny {
    position: absolute;
    top: 50px;
    left: 250px;
    font-size: 6px;
    color: rgb(0, 0, 0);
    font-family: 'Raleway', sans-serif;
}

/*Delay Page*/

.icing {
    position: absolute;
    top: 50px;
    left: 250px;
    font-size: 6px;
    color: rgb(0, 0, 0);
    font-family: letter-gothic-std, monospace;
    line-height: 15px;
}

.but {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 20px;
    display: none;
}

/*Scale Page*/

.need {
    position: absolute;
    top: 280px;
    left: 200px;
    font-size: 10px;
    color: rgb(0, 0, 0);
    font-family: letter-gothic-std, monospace;
    line-height: 15px;
    letter-spacing: 3px;
}

/*String Page*/

.sassy {
    width: 50px;
    height: 50px;
    display: none;
}

.needy {
    position: absolute;
    top: 315px;
    left: 210px;
    font-size: 5px;
    color: rgb(0, 0, 0);
    font-family: letter-gothic-std, monospace;
    line-height: 15px;
    letter-spacing: 2px;
}

/*Chaotic Page*/

.blue {
    background-color: rgb(91, 102, 152);
    width: 350px;
    height: 350px;
}

#follower {
    position: absolute;
    float: left;
}

.group {
    width: 30px;
    height: 30px;
}

/*Subtle Page*/

.isle {
    position: absolute;
    top: 92px;
    left: 50px;
    height: 300px;
    width: 300px;
}

.will {
    position: absolute;
    top: 125px;
    left: 50px;
    font-size: 8px;
    color: rgb(66, 73, 105);
    font-family: 'Cedarville Cursive', cursive;
    line-height: 15px;
    letter-spacing: 2px;
    width: 100px;
}

/*Intense Page*/

.more {
    position: absolute;
    top: 70px;
    left: 0px;
    font-size: 30px;
    color: rgb(255, 239, 170);
    font-family: font-family: 'Raleway', sans-serif;
    line-height: 40px;
    letter-spacing: 3px;
    width: 300px;
    z-index: 5;
}

.sweet {
    position: absolute;
    top: -40px;
    left: -50px;
    height: 400px;
    width: 500px;
    opacity: 0.5;
    z-index: 1;
}

/* Click Page */

.lghtblu {
    background-color: rgb(178, 231, 255);
    width: 350px;
    height: 350px;
}

.whole {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 5px;
    width: 250px;
    height: 250px;
}

.broken {
    position: absolute;
    top: 120px;
    left: 20px;
    width: 250px;
    height: 250px;
    display: none;
}

.blacksmall {
    color: rgb(0, 0, 0);
    font-size: 8px;
    position: absolute;
    top: 60px;
    line-height: 13px;
    left: 210px;
}

/*Mousemove Page*/

.hand {
    position: absolute;
    top: -10px;
    left: -50px;
    width: 350px;
    height: 450px;
}

.butterfly {
    position: absolute;
    float: left;
    top: -100px;
    left: -50px;
    width: 350px;
    height: 450px;
}


/* Color Page */

.blackSquare {
    background-color: rgb(7, 7, 7);
    width: 350px;
    height: 350px;
}

.whiteText {
    color: rgb(255, 255, 255);
    font-size: 8px;
    position: absolute;
    top: 30px;
    line-height: 13px;
    left: 220px;
}

.star {
    position: absolute;
    top: 110px;
    left: 20px;
    width: 250px;
    height: 150px;
}

.tv {
    position: absolute;
    top: 70px;
    left: 0px;
    width: 350px;
    height: 250px;
}

/* Minimal Page */

.time {
    color: rgb(255, 255, 255);
    font-size: 85px;
    position: absolute;
    top: 150px;
    line-height: 13px;
    left: 40px;
    font-family: paralucent-condensed, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 13px;
}

.timeOne {
    color: rgb(255, 255, 255);
    font-size: 85px;
    position: absolute;
    top: 150px;
    line-height: 13px;
    left: 40px;
    display: none;
    font-family: paralucent-condensed, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 13px;
}

.make {
    color: rgb(255, 255, 255);
    font-size: 8px;
    position: absolute;
    top: 220px;
    line-height: 13px;
    left: 260px;
}

/* Opacity Page */

.cake {
    position: absolute;
    top: 100px;
    left: 120px;
    width: 100px;
    height: 130px;
}

/* Overwhelm Page */

.penny {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 20px;
    height: 20px;
}

.penny1 {
    position: absolute;
    top: 50px;
    left: 55px;
    width: 20px;
    height: 20px;
}

.penny2 {
    position: absolute;
    top: 50px;
    left: 60px;
    width: 20px;
    height: 20px;
}

.penny3 {
    position: absolute;
    top: 50px;
    left: 65px;
    width: 20px;
    height: 20px;
}

.penny4 {
    position: absolute;
    top: 50px;
    left: 70px;
    width: 20px;
    height: 20px;
}

.penny5 {
    position: absolute;
    top: 50px;
    left: 75px;
    width: 20px;
    height: 20px;
}

.penny6 {
    position: absolute;
    top: 50px;
    left: 80px;
    width: 20px;
    height: 20px;
}

.penny7 {
    position: absolute;
    top: 50px;
    left: 85px;
    width: 20px;
    height: 20px;
}

.penny8 {
    position: absolute;
    top: 50px;
    left: 90px;
    width: 20px;
    height: 20px;
}

.penny9 {
    position: absolute;
    top: 50px;
    left: 95px;
    width: 20px;
    height: 20px;
}

.penny10 {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 20px;
    height: 20px;
}

.maker {
    color: rgb(255, 255, 255);
    font-size: 6px;
    position: absolute;
    top: 220px;
    line-height: 13px;
    left: 240px;
    font-family: paralucent-condensed, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 3px;
}

.fountain {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 200px;
    height: 230px;
}

/* Wildcard 3 page */

.numb {
    position: absolute;
    top: -40px;
    left: 50px;
    font-family: rift-soft, sans-serif;
    font-weight: 400px;
    font-style: normal;
    font-size: 280px;
    color: rgb(226, 184, 192);
    z-index: 20;
}

.numbz {
    position: absolute;
    top: 270px;
    left: 210px;
    font-family: rift-soft, sans-serif;
    font-weight: 400px;
    font-style: normal;
    font-size: 80px;
    color: rgb(255, 247, 247);
    z-index: 20;
}

.fingers {
    position: absolute;
    top: 130px;
    left: 180px;
    height: 200px;
    width: 150px;
    transform: rotate(320deg);
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.finger {
    position: absolute;
    top: 10px;
    left: 180px;
    height: 100px;
    width: 50px;
    transform: rotate(120deg);
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.fingerz {
    position: absolute;
    top: 180px;
    left: 30px;
    height: 150px;
    width: 100px;
    transform: rotate(30deg);
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}



/*Random Page */


#tagline {
    font-size: 20px;
    font-family: Rift-soft, sans-serif;
    color: rgb(192, 255, 147);
    text-transform: uppercase;
}

/*body {
    background-color: rgb(173, 216, 230);
}*/


.random {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    text-align: center;
    background-color: rgb(0, 0, 0);
    width: 350px;
    height: 350px;
}

#tagline {
    font-size: 15px;
    font-family: 'VT323', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(207, 219, 247);
    text-transform: uppercase;
    text-align: right;
    position: absolute;
    top: 220px;
    right: 60px;
    z-index: 30;
    padding: 15px;
}

.number {
    position: absolute;
    top: 65px;
    left: 190px;
    font-family: rift-soft, sans-serif;
    font-weight: 400px;
    font-style: normal;
    font-size: 250px;
    color: rgb(37, 85, 132);
    z-index: 20;
}

/*Wild 4 Page*/

/*
.orange {
  margin: 0;
  overflow: hidden;
  background: #000;
}
*/

.num {
    position: absolute;
    top: 310px;
    left: 185px;
    font-family: rift-soft, sans-serif;
    font-weight: 400px;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 5px;
    color: rgb(255, 183, 100);
    z-index: 20;
}

canvas {
    display: inline-block;
    margin: 0 auto;
    margin: calc(20vh - 115px) auto;
}

/*Change Css Page*/

.clasp {
    color: rgb(19, 19, 52);
    font-size: 12px;
    position: absolute;
    top: 240px;
    line-height: 15px;
    left: 220px;
    width: 100px;
}

.changecss {
    position: absolute;
    left: 260px;
    top: 265px;
    width: 30px;
    height: 20px;
    font-size: 6px;
}

/*
.green {
    color: rgb(152, 198, 152)
}
*/

/*Slide Page */

.firstStar {
    color: rgb(255, 255, 255);
    font-size: 10px;
    position: absolute;
    top: 250px;
    line-height: 15px;
    left: 30px;
    width: 100px;
}

/*    SVG Page */

@keyframes up {
    0% {
        top: -85px;
    }

    100% {
        top: 85px;
    }
}

@keyframes down {
    0% {
        bottom: 85px;
    }

    100% {
        bottom: -85px;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes jump {
    0% {
        bottom: -30px;
    }

    50% {
        bottom: -30px;
    }

    100% {
        bottom: 135px;
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    51% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes spin1 {
    0% {
        transform: rotate(0);
    }

    75% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin2 {
    0% {
        transform: rotate(0);
    }

    75% {
        transform: rotate(0);
    }

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

@keyframes dolphin {
    0% {
        transform: rotate(45deg);
    }

    75% {
        transform: rotate(45deg);
    }

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

@keyframes splash {
    0% {
        transform: scale(1, 0);
    }

    75% {
        transform: scale(1, 0);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes slide1 {
    0% {
        transform: translate(0);
    }

    52% {
        transform: translate(0);
    }

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

@keyframes slide2 {
    0% {
        transform: translate(0);
    }

    52% {
        transform: translate(0);
    }

    100% {
        transform: translate(75px);
    }
}

.container {
    overflow: hidden;
    position: absolute;
    width: 350px;
    height: 350px;
    /*
    top: 150px;
    left: 250px;
*/
    /*
    margin-left: -300px;
    margin-top: -150px;
*/
}

.container .subcontainer {
    position: absolute;
    width: 350px;
    height: 350px;
    animation: rotate 4s linear infinite;
}

.container .subcontainer *,
.container .subcontainer *:before,
.container .subcontainer *:after {
    position: absolute;
    content: "";
    display: block;
}

.container .subcontainer .half {
    width: 350px;
    height: 350px;
    overflow: hidden;
}

.container .subcontainer .half .splash {
    height: 80px;
    width: 80px;
    bottom: 0;
    margin-bottom: -3px;
    left: 50%;
    margin-left: -75px;
    overflow: hidden;
}

.container .subcontainer .half .splash .splash-container {
    height: 350px;
    width: 350px;
    transform-origin: bottom center;
}

.container .subcontainer .half .splash .splash-container .circle {
    left: 350px;
    top: 350px;
    width: 27.27273px;
    height: 27.27273px;
    margin-top: -13.63636px;
    margin-left: -13.63636px;
    border-radius: 50%;
}

.container .subcontainer .half .splash .splash-container:before,
.container .subcontainer .half .splash .splash-container:after {
    height: 350px;
    width: 350px;
}

.container .subcontainer .half .splash .splash-container:before {
    left: 0;
    bottom: 0;
    border-bottom-right-radius: 100%;
    margin-left: -13.63636px;
}

.container .subcontainer .half .splash .splash-container:after {
    right: 0;
    bottom: 0;
    border-bottom-left-radius: 100%;
    margin-right: -13.63636px;
}

.container .subcontainer .half .droplet {
    width: 20px;
    height: 20px;
    left: 60%;
    margin-left: -15px;
}

.container .subcontainer .half .droplet:before,
.container .subcontainer .half .droplet:after {
    background-size: 100% 100%;
}

.container .subcontainer .half:nth-child(1) {
    box-shadow: 0 -150px 0 150px rgb(27, 59, 116);
    background-color: rgb(27, 59, 116);
    margin-top: -75%;
    animation: up 1s infinite alternate ease-in-out;
}

.container .subcontainer .half:nth-child(1) .splash {
    animation: slide1 1s infinite linear;
}

.container .subcontainer .half:nth-child(1) .splash .splash-container {
    animation: splash 1s infinite -.25s alternate;
}

.container .subcontainer .half:nth-child(1) .splash .splash-container .circle {
    background-color: rgb(27, 59, 116);
}

.container .subcontainer .half:nth-child(1) .splash .splash-container:before,
.container .subcontainer .half:nth-child(1) .splash .splash-container:after {
    box-shadow: 0 29.27273px 0 27.27273px rgb(255, 255, 255);
}

.container .subcontainer .half:nth-child(1) .droplet {
    animation: jump 1s infinite alternate;
}

.container .subcontainer .half:nth-child(1) .droplet:before,
.container .subcontainer .half:nth-child(1) .droplet:after {
    height: 100%;
    width: 100%;
}

.container .subcontainer .half:nth-child(1) .droplet:before {
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    animation: fade 4s infinite;
}

.container .subcontainer .half:nth-child(1) .droplet:after {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><path fill='%235db0c9' d='M0,10L5,0L10,10Z'/></svg>");
    animation: fade 4s infinite -2s, spin1 4s infinite -2.5s linear;
}

.container .subcontainer .half:nth-child(2) {
    box-shadow: 0 -150px 0 150px #b7eeff;
    bottom: 0;
    margin-bottom: -25%;
    background-color: #b7eeff;
    transform: rotate(180deg);
    animation: down 1s infinite alternate ease-in-out;
}

.container .subcontainer .half:nth-child(2) .splash {
    animation: slide2 1s infinite -1s linear;
}

.container .subcontainer .half:nth-child(2) .splash .splash-container {
    animation: splash 1s infinite -1.25s alternate;
}

.container .subcontainer .half:nth-child(2) .splash .splash-container .circle {
    background-color: rgb(0, 0, 0);
}

.container .subcontainer .half:nth-child(2) .splash .splash-container:before,
.container .subcontainer .half:nth-child(2) .splash .splash-container:after {
    box-shadow: 0 29.27273px 0 27.27273px rgb(0, 0, 0);
}

.container .subcontainer .half:nth-child(2) .droplet {
    animation: jump 1s infinite -1s alternate;
}

.container .subcontainer .half:nth-child(2) .droplet:before {
    height: 200%;
    width: 200%;
    left: -50%;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 419 281' xmlns='http://www.w3.org/2000/svg'><path fill='%23141414' d='m212.0052,5.32781c-7.8024,2.96131 -14.9229,6.90809 -22.0992,10.425c-2.4471,1.19639 -5.22542,3.1008 -7.49191,3.68309c-5.77739,1.47781 -14.81609,-1.10729 -22.179,-1.37699c-18.40649,-0.66899 -30.32219,0.7197 -45.45239,3.05969c-7.08029,1.09351 -14.4105,2.1165 -20.62619,3.9858c-5.3085,1.5984 -11.3964,5.1678 -17.33671,8.16899c-9.3879,4.74719 -15.7815,9.21451 -23.1009,14.93549c-12.2334,9.55801 -19.9362,21.58951 -28.88922,34.80841c-3.90819,5.7702 -9.54024,14.36819 -9.81912,21.1968c-5.175,8.04479 -13.03829,12.9561 -15.01056,24.7347c2.75742,6.88829 9.90351,0.76289 14.20899,-1.5303c3.56133,-1.902 7.39218,-4.1754 10.5492,-5.08739c16.40151,-4.74239 39.25791,2.03699 55.22571,-2.3085c5.6613,-1.5399 10.5633,-4.64761 16.1871,-5.96371c5.3403,-1.25369 9.4242,0.96451 13.2318,2.65201c2.02261,0.89999 4.1541,2.1153 5.9907,3.08309c11.898,6.30601 23.7888,12.9927 39.76289,15.51c12.82021,2.019 23.95889,-1.8318 34.38031,-3.9117c2.646,-0.52859 6.06209,-0.33751 8.06848,-2.6532c-8.31808,-1.9278 -15.22049,-5.2149 -23.90639,-8.7222c-11.4093,-4.6044 -20.2722,-7.7193 -24.5847,-16.96291c5.1069,-1.37251 11.02139,-0.35519 16.3383,0.6c5.80531,1.04041 11.5665,2.01541 17.13629,2.95651c23.5218,3.9714 41.23351,10.63949 59.1387,19.29149c8.69879,4.1988 16.71451,10.0452 24.08551,14.9553c15.0972,10.0665 27.98669,22.56691 40.14209,36.183c5.505,6.16621 10.41599,13.8855 16.38599,21.246c2.60703,3.21811 5.22903,6.8064 8.01901,10.77661c2.66098,3.77579 6.72601,8.4012 7.29001,11.7036c0.633,3.64319 -1.25403,7.64159 -2.202,11.62379c-1.64401,6.9234 -2.853,14.34599 -2.30402,21.45111c0.71701,9.19218 2.72104,18.14415 6.92102,25.1086c1.82098,-1.6629 2.56497,-4.58673 3.50098,-7.26801c4.60199,-6.03394 10.72501,-12.05856 10.87802,-22.10036c12.57001,6.66328 36.98401,6.10312 51.64499,5.9332c4.40698,-0.05275 8.89801,0.4254 12.54898,-1.33243c-7.69797,-4.57968 -13.34998,-10.37592 -20.04297,-16.28682c-10.125,-8.9355 -18.49802,-16.4637 -33.42603,-21.24359c-4.83899,-1.54921 -10.37698,-2.38831 -13.02896,-5.25931c-2.03702,-2.19749 -2.65805,-7.06529 -3.69003,-11.75159c-2.78101,-12.675 -6.39899,-26.1201 -9.621,-36.78511c-9.68097,-32.06039 -24.45297,-60.5544 -44.1084,-82.6842c-9.9585,-11.2218 -21.85529,-20.35889 -34.67789,-30.5202c-2.1915,-3.52379 -6.2955,-8.27941 -7.1451,-13.6548c-0.86821,-5.5335 0.69719,-10.39079 4.03139,-14.10809c7.29239,-5.4585 18.74762,-6.06211 23.7045,-14.23471c-6.47791,-4.78261 -14.51581,-6.1842   -22.4025,-6.96691c-17.04269,-1.6899 -33.0072,-0.37859 -46.2258,4.64072'/></svg>");
    animation: fade 4s infinite -1s, dolphin 4s infinite -1.5s ease-in-out;
}

.container .subcontainer .half:nth-child(2) .droplet:after {
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    animation: fade 4s infinite -3s, spin2 4s infinite -3.5s linear;
}


/*GetPost Page */

.needthis {
    color: rgb(255, 255, 255);
    font-size: 10px;
    position: absolute;
    top: 150px;
    line-height: 15px;
    left: 230px;
    width: 100px;
}

.help {
    position: absolute;
    left: 300px;
    top: 215px;
    width: 30px;
    height: 20px;
    font-size: 6px;
    background-color: rgb(201, 236, 255);
}

/*Wildcard 1 page*/

.eight-ball:active {
    -webkit-animation: rock 0.1s infinite linear alternate;
    animation: rock 0.1s infinite linear alternate;
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}

.eight-ball {
    background-color: rgb(65, 105, 178);
    width: 250px;
    height: 250px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.eight-ball:hover .eight-ball__track {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.eight-ball span:nth-of-type(2):after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset 0 0 20px 20px #111;
    border-radius: 100%;
}

@-webkit-keyframes rock {
    from {
        -webkit-transform: translate(-10%, 0);
        transform: translate(-10%, 0);
    }

    to {
        -webkit-transform: translate(10%, 0);
        transform: translate(10%, 0);
    }
}

@keyframes rock {
    from {
        -webkit-transform: translate(-10%, 0);
        transform: translate(-10%, 0);
    }

    to {
        -webkit-transform: translate(10%, 0);
        transform: translate(10%, 0);
    }
}

/*Wildcard 2 Page*/


@import url('https://fonts.googleapis.com/css?family=Exo+2');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: content-box;

}

.gooey {
    background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    width: 150px;
    height: 144px;
    animation: morph 3s linear infinite;
    transform-style: preserve-3d;
    outline: 1px solid transparent;
    will-change: border-radius;
    position: absolute;
    top: 100px;
    left: 100px;
}

.gooey:before,
.gooey:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 100;
    top: 100;
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
    will-change: border-radius, transform, opacity;
    animation-delay: 200ms;
    background-image: linear-gradient(120deg, rgba(0, 67, 255, .55) 0%, rgba(0, 103, 255, .89) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
}

.gooey:before {
    animation: morph 3s linear infinite;
    opacity: .21;
    animation-duration: 1.5s;
    position: absolute;
    top: 0px;
    left: 0px;
}

.gooey:after {
    animation: morph 3s linear infinite;
    animation-delay: 400ms;
    opacity: .89;
    content: "evil Magic 8 Ball.";
    color: #ffffff;
    font-family: rift-soft, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    line-height: 120px;
    text-indent: -20px;
    position: absolute;
    top: 0px;
    left: 0px;
}

@keyframes morph {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    34% {
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
    }

    50% {
        opacity: .89;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
    }
}

@keyframes fadeIn {
    100% {
        transform: scale(1.03);
        opacity: 0;
    }


    /* Wildcard 3 page */

    .numb {
        position: absolute;
        top: 100px;
        left 30px;
        font-family: rift-soft, sans-serif;
        font-weight: 400px;
        font-style: normal;
        font-size: 600px;
    }