@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

@keyframes rain {
    from {
        transform: translateY(-100vh) rotate(7.55deg);
    }
    to {
        transform: translateX(-10vh) rotate(7.55deg);
    }
}

* {
    font-family: sans-serif;
    color: azure;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display";
}

#raindrops > * {
    position: fixed;
    z-index: -1;
    pointer-events: none;
    background: azure;
    animation-duration: 1s;
    animation-name: rain;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 1px;
    height: 100px;
    opacity: .3;
}

#raindrops > .clone {
    translate: 10vh -100vh;
}

body {
    background: #677697;
    margin: 0;
    overflow-x: hidden;
}

#content {
    margin-top: 15em;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    text-align: center;
    max-width: 25em;
}

.big {
    font-size: 60px;
}

#bottom {
    width: 100vw;
}

hr {
    margin-top: 5em;
    margin-bottom: 5em;
}

iframe.video {
    width: 25em;
    height: 15em;
}

.q {
    text-align: right;
}

.a {
    text-align: left;
}