body{
    background-color: black;
}
.img {
    width: 48em;
    height: 48em;
    background-size: contain;
    background-repeat: no-repeat;
}
#clickGlobe {
    background-image: url('../images/globeCover.png');
    width: 48em;
    height: 48em;
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    animation: pulse 2s infinite;
    animation-direction: alternate;
}
@keyframes pulse {
    0% {opacity:.5}
    100% {opacity: 1;}
}
#clickGlobe:hover {
    cursor: pointer;
}
#cover {
    background-image: url('../images/wmts0Cover.png');
    width: 48em;
    height: 48em;
    background-size: contain;
    background-repeat: no-repeat;
}
#img1 {
    background-image: url("../images/wmts1.png");
    position: fixed;
    animation: slideOut 3s ease;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    }
    @keyframes slideOut {
        0% {left: 0%; opacity: 1}
        50% {left: -25; opacity: .8}
        100% {left: -52%; opacity: 0;}
    }
#img2 {
    background-image: url("../images/wmts2.png");
    position: fixed;
    right: -80%;
    opacity: 0;
    animation: slideIn 6s ease-in-out 2s;
    animation-fill-mode: forwards;
}
    @keyframes slideIn {
        0% {right: -56%; opacity: 0}
        100% {right: 13%; opacity: 1;}
        /* 100% {right: 80%; opacity: 0;} */
        /* 100% {right: 20%; opacity: 1} */
    }
#img3 {
    background-image: url("../images/wmts3\(alt\).png");
}
#img4 {
    background-image: url("../images/wmts4.png");
}
#img5 {
    background-image: url("../images/wmts5.png");
}
#img6 {
    background-image: url("../images/wmts6.png");
}
#img78 {
    background-image: url("../images/wmts7&8.png");
    position: absolute;
    right: -8em;
    background-size: cover;
    width: 1600px;
    height: 800px;
    overflow-x: scroll
}
#seven8btn {
    position: relative;
    left: 80em;
    top: 7em;
}
#twelBtn {
    position: absolute;
    top: 10.5em;
    left: 22.5em;
    /* box-shadow: inset 1px 0px 20px 7px floralwhite; */
    height: 4em;
    width: 4em;
    border-radius: 50%;
    background: none;
    border: none;
    animation: pulseTwel 2s infinite;
    animation-direction: alternate;
}
    @keyframes pulseTwel {
        0% { box-shadow: inset 1px 0 20px 7px floralwhite}
        50% {box-shadow: inset.5px 0px 10px 3.5px floralwhite}
        100% {box-shadow: inset 1px 0px 20px 7px floralwhite}
    }
#twelBtn:hover {
    cursor: pointer;
}
    
#img9 {
    background-image: url("../images/wmts9.png");
}
#img10 {
    background-image: url("../images/wmts10.png");
}
#img11 {
    background-image: url("../images/wmts11.png");
}
#img12 {
    background-image: url("../images/wmts12.png");
}
#img13z {
    background-image: url("../images/wmts13\(0\).png");
}
#img13o {
    background-image: url("../images/wmts13\(1\).png");
}
#img13tw {
    background-image: url("../images/wmts13\(2\).png");
}
#img13th {
    background-image: url("../images/wmts13\(3\).png");
}
#img14 {
    background-image: url("../images/wmts14.png");
}
#img14f {
    background-image: url("../images/wmts14\(flakes\).png");
    position: fixed;
    bottom: 0em;
}
#allPages14 {
    background-color: white;
}
#flakeFall {
    height: 100em;
    background: linear-gradient(white, black);
}
#globe2 {
    background-image: url('../images/santasHouse.png');
    width: 48em;
    height: 48em;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    /* animation: pulse2 2s infinite;
    animation-direction: alternate;
}
@keyframes pulse2 {
    0% {opacity:.5}
    100% {opacity: 1;} */
}
#img15 {
    background-image: url("../images/wmts15.png");
}
#img16 {
    background-image: url("../images/wmts16.png");
    width:46.5em;
}
#img17 {
    background-image: url("../images/wmts17.png");
    width:47em;
}
#img18 {
    background-image: url("../images/wmts18.png");
}
#img191 {
    background-image: url("../images/wmts19\(1)\.png");
    /* height: 100vh; */
    position: absolute;
}
#img192 {
    background-image: url("../images/wmts19\(2)\.png");
    /* height: 100vh; */
    position: absolute;
}
#img193 {
    background-image: url("../images/wmts19\(3)\.png");
    /* height: 100vh; */
    position: absolute;
}
#img19 {
    background-image: url("../images/wmts19.png");
    /* height: 100vh; */
    position: absolute;
}
#img20 {
    background-image: url("../images/wmts20.png");
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    width: 20em;
    height: 20em;
}
#img21 {
    background-image: url("../images/wmts21.png");
}
#img22 {
    background-image: url("../images/wmts22.png");
    
}
#img23 {
    background-image: url("../images/wmts23.png");
    
}
#img2425 {
    background-image: url("../images/wmts24&25.png");
    height: 36em;
    width: 66em;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0em;
}
#againImg{
    height: 225px
}
#githubImg {
    height: 200px
}
#artImg{
    height: 200px
}
.finalPageLinks {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
#again {
    background-image: url('../images/santaLump.svg');
    background-size: cover;
    background-position-x: center;
    left: 54em;
  
}
#gumLink {
    background-image: url('../images/pot.jpg');
    text-align: center;
    left: 29em;
}
#githubImg{
    background-image: url('../images/github.jpeg');
}
.linkText {
    font-size: 2em;
}
#linkScripts{
    text-align: center;
}
.clickable:hover {
    cursor: pointer;
}
#globe2:hover {
    cursor: pointer;
}
.oneEight:hover{
    cursor: s-resize;
}
.nineTwel:hover {
    cursor: s-resize;
}
.thirFour:hover{
    cursor: s-resize;
}
.twents:hover{
    cursor: s-resize;
}
.lastPageLinkText {
    font-family: helvetica;
    color: mediumvioletred;
    font-size: xx-large;
}

@media only screen and (max-width: 768px) {
.img {
    width: 30em;
    height: 30em;
}
#clickGlobe {
    width: 30em;
    height: 30em;
}
#againImg{
    height: 75px;
}
/* #githubImg {
    height: 100px;
}
#artImg{
    height: 50px;
}
#githubRepo{
    left: 3em; */
/* } */
}

@media only screen and (max-width: 560px) {
body {
    padding-top: 7em;
}
.img {
    width: 24em;
    height: 26em;
}
#clickGlobe {
    width: 24em;
    height: 26em;
}
#img2425{
    right: -43em;
    overflow-x: scroll;
}
}

@media only screen and (min-width: 992px) {
}