html {
    scroll-behavior: smooth;
}

nav {
    position: sticky;
    top: 0;
    z-index: 999;
}

header, section {
    width: 94%;
    background-color: rgba(255,255,255, 0.6);
    margin: 0 auto;
    border-radius: 1%;
}

header {
    margin-bottom: 2rem;
}

section {
    padding: 2rem 0;
    margin-bottom: 40px;
}

h1, h2, #site-name {
    font-family: 'Cedarville Cursive', cursive;
    text-align: center;
}

#site-name {
    font-weight: bold;
    font-size: 1.5em;
}

h1 {
    font-size: 12rem;
    overflow: hidden;
	border-right: 1px solid #777;
	white-space: nowrap;
	margin: 0 auto;
	/* letter-spacing: .1em; */
	animation:
		typing 3.5s steps(13, end),
		blink-caret .5s step-end infinite;
}

h2 {
    font-size: 4rem;
}

@keyframes typing{
	from { width: 0; }
	to { width: 100%; }
}

@keyframes blink-caret{
	from, to { border-color: transparent }
	50% { border-color: #777 }
}

p, h3 {
    width: 94%;
    margin: 0 auto;
    text-align: justify;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2rem;
    padding-bottom: 2rem;
}

#pics {
    height: 120vh;
}

#date {
    height: 105vh;
    margin-bottom: 10vh;
}

#date .d {
    font-size: 6rem;
    text-align: center;
}

#date p {
    text-align: center;
    font-size: 1.5rem;
    margin: 0 auto;
}

#date .addr {
    font-size: 1rem;
}

#date .venue {
    font-weight: bold;
}

p.venue{
    padding-bottom: 0;
}

@media screen and (max-height: 600px) {
    #pics, #date {
        width: 94%;
        padding-bottom: 10rem;
    }
}

@media screen and (max-width: 480px) {
    header {
        display: none;
    }
}

@media screen and (max-width: 879px) {
    h1 {
        font-size: 6rem;
    }
    #carousel {
        width: 80%;
    }

    #date {
        height: 115vh;
    }
}