body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Segoe UI", Arial, sans-serif
}

p {
    /* font-family: calibri; */
    font-size: 1.5em;
}

.mySlides {
    display: none;
}

.container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

@font-face {
    font-family: scare;
    src: url('../media/coasterghost.ttf');
}

.ghosttext {
    font-family: scare, Georgia, Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2vw;
    line-height: 3vw;
    letter-spacing: 0.4vw;
    color: #e8e2e2;
    text-shadow: 2px 3px 5px #1d0606;
}


/* Then style the iframe to fit in the container div with full height and width */

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.draggable {
    cursor: move;
}

.draggable-elements {
    justify-content: center;
}

.draggable:hover {
    opacity: 0.5;
}

.dropzone {
    justify-content: center;
}

.dropzone img {
    pointer-events: none;
}

.dropzone.dropped {
    pointer-events: none;
}

.draggable.dropped {
    border-style: solid;
}

.draggable.dragged {
    user-select: none;
    opacity: 0.1;
    cursor: default;
}

.draggable.dragged:hover {
    opacity: 0.5;
}

.draggable.dropped img {
    font-size: 0.75rem;
}

@media screen and (min-width: 960px) {
    #mybody {
        width: 80%;
        margin: auto;
    }
}