@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

html {
    scroll-behavior: smooth;
}
body {
    /*animation: gradientBG 100s ease infinite;*/
    width: 90vw;
    margin: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 3vw;
    margin-bottom: 80px;
}
img {
    opacity: .5;
    float: right;
    border-radius: 8px;
    box-shadow: 0px 0px 4px #000000;  
    width: 30vh;
}

.intro {
    animation: slide;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    transform: translate(-200vw);


}

.philly {
    animation-delay: 0s;
}
.computer {
    animation-delay: 1s;
}
.science {
    animation-delay: 2s;
}

@keyframes slide {
    0% {
        transform: translate(-20s0vw);
    }
    100% {
        transform: translate(0vw);
    }
}


@keyframes gradientBG {
    0% {
        background-color: #FFFFFF;
    }
    50% {
        background-color: #335555;
    }
    100% {
        background-color: #FFFFFF;
    }
}

a:hover {
    transition-duration: 0.5s;
    color:antiquewhite;
}

.small {
    font-size: calc(10px + 2vw);
}

h1 {
    font-family: "Impact";
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: calc(10px + 10vw);
    text-align: right;
    margin-top: 0px;
    margin-bottom: 0px;
    position: sticky;
    top: 0px;
    opacity: 0.8;
}

h2 {
    font-family: "Impact";
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: calc(10px + 6vw);
    text-align: right;
    margin-bottom: 0px;
    opacity: 0.8;
}

h3 {
    font-family: "Impact";
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: calc(10px + 4vw);
    text-align: right;
    margin-top: -5vw;
    margin-bottom: 0px;
    opacity: 0.8;
}


.title h1 {
    font-size: 20vw;
    line-height: 13vw;
}

a {
    color: white;
    text-decoration: none;
    text-shadow: 2px 2px 4px #000000;
}

.wrapper {
    display: none;
    top: 0px;
    margin-top: -10px;
    text-shadow: 0px 0px 50px #FFFFFF;
}

.title {
    display: block;
}

.calendar iframe {
    border-radius: 4vw;
    background-color: white;
    width: 80vw;
    height: 60vh;
    padding: 4vw;
    border-style: none;
}