html{
    overflow-x: hidden;
}

body{
    margin: 0px;
    overflow-x: hidden;
}

#slideshow{
    height: auto;
    width: 100%;
    margin: 0px;
    background-color: blue;
}

video{
    z-index: -1;
    height: 100vh;
}

.slide{
    margin: 0px;
    width: 100%;
    height: 100vh;
    text-align: center;
    image-rendering: auto;
    background-size: cover;
    position: relative;
}

.circle{
    background-color: black;
    opacity: 75%;
    width: 25vh;
    height: 15vh;
    border-radius: 50%;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0%;
    animation: circleAnim 1s;
    animation-play-state: paused;
    z-index: 1;
}

#formal-circle{
    width: 40vh;
    height: 30vh;
}

#park{
    background-size: 100% 100%;
}

.slidetext{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: textAnim 1s paused;
    animation-timing-function: ease-out;
}

@keyframes textAnim{
    0% {top: 0%; font-size: large; filter: blur(2px); opacity: 0%;}
    10% {top: 0%; font-size: large; filter: blur(2px); opacity: 100%;}
    50% {top: 50%; font-size: xx-large; filter: blur(0px); opacity: 100%;}
    90% {top: 100%; font-size: large; filter: blur(2px); opacity: 100%;}
    100% {top: 100%; font-size: large; filter: blur(2px); opacity: 50%;}
}

@keyframes circleAnim{
    0% {top: 0%; font-size: large; filter: blur(2px); opacity: 0%;}
    10% {top: 0%; font-size: large; filter: blur(2px); opacity: 0%;}
    50% {top: 50%; font-size: xx-large; filter: blur(0px); opacity: 80%;}
    90% {top: 100%; font-size: large; filter: blur(2px); opacity: 0%;}
    100% {top: 100%; font-size: large; filter: blur(2px); opacity: 0%;}
}

#howdy{
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#pile-pal{
    font-family: cursive;
    color: rgb(3, 3, 179);
}

#puddle-pal{
    font-family: fantasy;
    color: white;
}

#flower-bud{
    color: red;
}

#park-pal{
    color: rosybrown;
}

#best-friend{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: purple;
}

#formal{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: green;
}