@import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@600&family=Cormorant:ital,wght@0,500;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300&display=swap');
body { margin: 0; overflow-x: hidden; background-color: white; }
main, header { width: 100vw; font-family: 'Cormorant Unicase'; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
main, header#scalaworld { font-family: 'Abel'; }
main { height: 100vh; }
main h1, header h1 { position: absolute; text-align: center; padding: 0; line-height: 1em; text-shadow: white 0 0 5px, white 0 0 1px; }
h1, h2, h3 { font-weight: normal; }
h4 { font-family: 'Cormorant Unicase'; font-weight: normal; text-transform: all-caps; margin-top: 2em; }
a { color: #07b; text-decoration: none; }
a:hover, a:active { color: #29d; text-decoration: none; }
h3 div { width: 10vw; float: left; }
h3 div div { font-size: 1.25em; }
header#home { position: absolute; height: 100vw; background-image: url('/images/lake2.jpg'); background-size: 100vw; background-repeat: no-repeat; z-index: -1; }
header#guests { position: absolute; height: 100vw; background-image: url('/images/background.jpg'); background-size: 100vw; background-repeat: no-repeat; z-index: -1; }
header#activities { position: absolute; height: 100vw; background-image: url('/images/background4.jpg'); background-size: 100vw; background-repeat: no-repeat; z-index: -1; }
header#venue { position: absolute; height: 100vw; background-image: url('/images/background.jpg'); background-size: 100vw; background-repeat: no-repeat; z-index: -1; }
header#scalaworld { position: absolute; height: 100vw; background-image: url('/images/background.jpg'); background-size: 100vw; background-repeat: no-repeat; z-index: -1; }
header#travel { position: absolute; height: 100vw; background-image: url('/images/background5.jpg'); background-size: 100vw; background-repeat: no-repeat; z-index: -1; }
header#home img { position: absolute; width: 10vw; height: 10vw; margin: 20vw 0 0 45vw; }
header#scalaworld img { position: absolute; width: 15vw; height: 15vw; margin: 14.8vw 0 0 42.5vw; }
header#guests img, header#activities img, header#venue img, header#travel img { display: none; }
header h1 { width: 40vw; margin: 31vw 0 0 30vw; font-size: 2.5vw; letter-spacing: 0.1em; }
section { padding-top: 45vw; width: 80vw; max-width: 900px;  margin: 0 auto 0 auto; font-family: 'Cormorant'; text-align: center; font-size: calc(8pt + 0.8vw); line-height: 1.4em; }
section#handwritten p { font-family: 'Gaegu'; font-weight: 300; }
section>img { width: 100%; }
.speakers { width: 90vw; margin: 0 auto 0 auto; font-family: 'Cormorant'; text-align: center; font-size: 15pt; }
.speakers div { width: 20vw; display: inline-block; min-width: 320px; }
.speakers div img { width: 20vw; min-width: 320px; }
.speakers div p { margin: 0 0 2em 0; }

#details { margin: -30vh 0 0 20vw; width: 60vw; font-family: 'Cormorant Unicase'; text-align: center; font-size: 1.5vh; }

input { width: 28vw; max-width: 250px; margin: 0.5em 0 0.5em; font-family: 'Cormorant'; background: none; font-size: 0.8em; padding: 0.2em 1vw; height: 1.2em; border: none; border-bottom: dotted 0.1em #CCC; }
input.error { border-bottom: dotted 0.1em #C00; }
input[disabled] { opacity: 0.3 !important; }
input:focus { border-bottom: dotted 0.1em #333; }
input[type=checkbox] { position: absolute; z-index: 1; display: inline-block; opacity: 0; cursor: pointer; width: 1.3em; margin: 0.4em 0 0 0; height: 1.3em; }
input[type=checkbox] ~ .check { display: inline-block; vertical-align: -0.2em; width: 1em; height: 1em; border: dotted 0.1em #CCC; background-color: white; margin: 0 0 0 0; }
input[type=checkbox]:hover ~ .check, input[type=checkbox]:focus ~ .check { border: dotted 0.1em black; }
input[type=checkbox] ~ .check div { transition: opacity ease-in-out 0.4s; width: 1em; height: 1em; margin: 0; opacity: 1; background: url('/images/dot6.png'); background-size: 1em; opacity: 0; }
input[type=checkbox]:checked ~ .check div { width: 1em; height: 1em; margin: 0; opacity: 1; }
input[type=checkbox]:hover ~ .check div { width: 1em; height: 1em; margin: 0; opacity: 0.4; }
input[type=checkbox]:hover:checked ~ .check div { width: 1em; height: 1em; margin: 0; opacity: 1; }

fieldset { border: none; }
table { margin: auto; }
table tr td { padding: 0.4em 1em; font-family: 'Cormorant'; font-size: 0.8em; text-align: left; }
table tr.row td { border-top: dotted 0.1em #CCC; padding-top: 0.7em; }
table tr td.right { text-align: right; }

input[type=radio] { position: absolute; z-index: 1; display: inline-block; opacity: 0; cursor: pointer; width: 1.3em; margin: 0.4em 0 0 0; height: 1.3em; }
input[type=radio] ~ .check { display: inline-block; vertical-align: top; width: 1em; height: 1em; border: dotted 0.1em #CCC; border-radius: 1em; background-color: white; margin: 0.6em 0 0 0; }
input[type=radio]:hover ~ .check, input[type=radio]:focus ~ .check { border: dotted 0.1em black; border-radius: 1em; }
input[type=radio] ~ .check div { transition: opacity ease-in-out 0.4s; width: 1em; height: 1em; margin: 0; opacity: 1; background: url('/images/dot6.png'); background-size: 1em; opacity: 0; }
input[type=radio]:checked ~ .check div { width: 1em; height: 1em; margin: 0; opacity: 1; }
input[type=radio]:hover ~ .check div { width: 1em; height: 1em; margin: 0; opacity: 0.4; }
input[type=radio]:hover:checked ~ .check div { width: 1em; height: 1em; margin: 0; opacity: 0.9; }

nav { position: absolute; width: 100%; text-align: center; margin-top: 40vw; }
nav ul { margin: 0; padding: 0; }
nav li { display: inline-block; margin: 0 3em 0 3em; font-family: 'Cormorant Unicase'; font-weight: 700; font-size: calc(8pt + 1vw); text-shadow: white 0 0 5px, white 0 0 1px; }
nav li a { text-decoration: none; color: #444; }
nav li a:hover { color: black; }

input[type=submit] { cursor: pointer; background: url('/images/button.png') center bottom no-repeat; color: #666; background-size: 7em; border: dotted 0.1em #ccc; height: 2em; margin-top: 2em; font-family: 'Cormorant'; font-size: 1.2em; }
a.button { cursor: pointer; background: url('/images/button2.png') center bottom no-repeat; color: #666; background-size: 10em; border: dotted 0.1em #ccc; height: 2em; padding: 0.25em 0.5em; margin: 2em 2em; font-family: 'Cormorant'; font-size: 1.2em; }
a.delete { cursor: pointer; background: url('/images/button3.png') center bottom no-repeat; color: #666; background-size: 10em; border: dotted 0.1em #ccc; height: 2em; padding: 0.25em 0.5em; margin: 2em 2em; font-family: 'Cormorant'; font-size: 1.2em; }
a.button:hover, a.delete:hover { color: black; border-color: black; }
input[type=submit]:hover { color: black; }
label { width: 28vw; margin: 0.5em 2vw 0.3em 0; text-align: right; font-size: 1em; display: inline-block; }
fieldset label { text-align: left; margin: 0.5em 0 0.3em 2vw; width: 80%; }
fieldset>div { width: 100%; display: inline-block; }
.required { color: red; }

#platinum { width: 30vw; max-width: 700px; margin: 0 0 2em 0; transition: all 1s; filter: grayscale(100%) brightness(0); opacity: 0.6; }
#platinum:hover { filter: none; opacity: 1; }

.keynote { text-align: center; border: none; }
.segment div img { height: 7.5em; }
.segment>div { width: calc(50% - 1em); vertical-align: top; padding: 0 0.5em 0; }
.flexible>div { height: auto !important; }
.segment:nth-child(2n+1)>div:nth-child(1) { border-left: solid 0.05em silver; text-align: left; display: inline-block; margin-left: 50%; }
.segment:nth-child(2n)>div:nth-child(1) { border-right: solid 0.05em silver; text-align: right; display: inline-block; margin-right: 50%; }
.venue, .time, .speaker { font-family: 'Cormorant Unicase'; font-size: 0.8em; margin: 0; }
.speaker { font-weight: bold; }
.segment .after { clear: both; }
.segment h2 { font-family: 'Cormorant Unicase'; margin: 0.2em 0 0.2em; font-size: 1.25em; }

#sponsors { font-family: 'Cormorant Unicase'; margin: 0; position: absolute; height: 20vh; width: 96vw; }
#sponsors figure { float: right; padding: 1em; font-size: calc(0.6vh + 0.6vw); margin: 0; }
#sponsors figure img { transition: all 1s; height: calc(3vh + 3vw); width: calc(3vh + 3vw); max-width: 120px; max-height: 120px; position: static; filter: grayscale(100%) brightness(0); opacity: 0.2; margin: 0; }
#sponsors figure figcaption { transition: all 1s; opacity: 0; margin: 0; text-align: center; }
#sponsors figure:hover img { transform: scale(1.3); filter: none; opacity: 1; }
#sponsors figure:hover figcaption { opacity: 1; }

.sponsor { width: 20vw; max-width: 12em; margin: 2em; display: inline-block; }

#sheep { margin-top: 2em; width: 8em; }
#sheep2 { margin-top: 2em; width: 8em; transform: scaleX(-1); -webkit-transform: scaleX(-1); }
#dog { margin-top: 2em; width: 5em; }
#dog2 { margin-top: 2em; width: 5em; transform: scaleX(-1); -webkit-transform: scaleX(-1); }

@media screen and (max-width: 100vh) {
  main { background-size: 100vh; background-image: url('/images/lake.jpg'); background-attachment: fixed; background-position: center; }
  main img { position: absolute; width: 10vh; height: 10vh; margin: 45vh 0 0 calc(50vw - 5vh); }
  main h1 { width: 40vh; margin: 55.5vh 0 0 calc(50vw - 20vh); font-size: 2.5vh; letter-spacing: 0.1em; }
  main h2 { width: 40vh; margin: 65vh 0 0 calc(50vw - 20vh); font-size: 1.5vh; }
  main h3 { width: 40vh; margin: 75vh 0 0 calc(50vw - 20vh); font-size: 1.3vh; }
  main p { width: 80vw; margin: 57.5vh 0 0 10vw; font-size: 1.3vh; }
}

@media screen and (max-height: 100vw) {
  main { background-size: 100vw; background-image: url('/images/lake.jpg'); background-attachment: fixed; background-position: center; }
  main img { position: absolute; width: 10vw; height: 10vw; margin: calc(50vh - 5vw) 0 0 45vw; }
  main h1 { width: 40vw; margin: calc(50vh + 5.5vw) 0 0 30vw; font-size: 2.5vw; letter-spacing: 0.1em; }
  main h2 { width: 40vw; margin: calc(50vh + 15vw) 0 0 30vw; font-size: 1.5vw; }
  main h3 { width: 40vw; margin: calc(50vh + 25vw) 0 0 30vw; font-size: 1.3vw; }
  main p { width: 60vw; margin: calc(50vh + 7.5vw) 0 0 20vw; font-size: 1.3vw; }
}

::selection { background: rgba(0, 0, 0, 0.2); }
::-moz-selection { background: rgba(0, 0, 0, 0.2); }