:root {
    --taupe: #bf7f6f;
    --teal: #7fa79c;
    --teal2: #9cb990;
    --orange: #c65d28;
    --sienna: #702a15;
    --blue: #2e3489;
    --paper: #edeed0;
    --green: #5c8a54;
    --salmon: #ba6c80;
    --bright-salmon: #C68696;
    --speech-bubble-color: #6cbaa8;

    --tracker-height: max(35vh, 400px);
    --tracker-right-margin: max(20px, calc(50% - 600px));
}

@font-face {
    font-family: 'dsert-semibold';
    src: url('assets/fonts/dsert-semibold-webfont.woff2') format('woff2'),
         url('assets/fonts/dsert-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Laviossa-Medium';
    src: url('assets/fonts/Laviossa-Medium.woff2') format('woff2'),
         url('assets/fonts/Laviossa-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proza Libre';
    src: url('assets/fonts/ProzaLibre-Regular.woff2') format('woff2'),
         url('assets/fonts/ProzaLibre-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset */
html, body {
    padding: 0;
    margin: 0;
}

/* layout and shared design */
body {
    font-family: 'Proza Libre', sans-serif;
    background-color: var(--salmon);
}

h1, h2, h3 {
    font-family: 'dsert-semibold';
    font-size: 300%;
}

.map-key {
    background-color: var(--bright-salmon);
    padding: 0 4px;
    border: solid black 1px;
    border-radius: 4px;
    font-weight: bold;
}

h2 {
    margin-block-end: 0.4em;
}

a, a:visited {
    color: var(--salmon);
    filter: brightness(0.8);
}

.content-extent {
    max-width: min(99vw, 800px);
    min-width: 300px;
    margin: 0 auto 16px auto;
    padding: 16px;

    /**
     * bottom padding looks weird with google form shadow at the bottom
     * we might want to add this padding back if we add content after the survey
     *
     * padding-bottom: 0px;
     **/

    background-color: var(--paper);
    box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.09),
        0 3px 8px hsla(0, 0%, 0%, 0.09),
        0 4px 13px hsla(0, 0%, 0%, 0.13);
}

.image-header {
    width: 100%;
}

@media only screen and (max-width: 600px) {
    .content-extent {
        padding-top: 0
    }
    .full-bleed-on-mobile {
        width: calc(100% + 32px);
        margin-left: -16px;
    }
}

h1.headline {
    color: color(srgb 0.9286 0.4298 0.2528);
    text-shadow: 1px 1px 1px #000,
                -1px -1px 1px #000,
                0 0 2px #8de035,
                0 0 4px #8de035,
                0 0 8px #8de035;
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 140px;
    top: -50px;
}

/**
 * bike bubble video
 */
.bike-vid {
    transition: transform 2s;
    position: absolute;
    border-radius: 50%;
    max-width: 20vw;
    max-height: 20vw;
    width: 150px;
    height: 150px;
}

.bike-vid video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
}



/**
 * Iframe integration
 */

.unframed {
    margin-left: -16px;
    margin-right: -16px;
    position: relative;
}

.unframed-background {
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.05);
}

.unframed iframe {
    z-index: 1;
    margin: 0;
    padding: 0;
}

.unframed-shadow {
    position: absolute;
    height: 100%;
    width: 100%;
    box-shadow:
        inset 0px 11px 8px -10px #333,
        inset 0px -11px 8px -10px #333;
}

/**
 * pop-ups
 */

.farewell {
    margin-left: 16px;
    margin-bottom: calc(var(--tracker-height) - 50px);
    text-align: right;
    /* approximate aspect ratio of image */
    margin-right: calc(var(--tracker-height) * 0.45 + var(--tracker-right-margin));
}

.speech-bubble {
    float: right;
    padding: 16px;
	position: relative;
	border-radius: .4em;
	background: none;
    transition: 0.3s;
}

.at-bottom .speech-bubble {
	background: var(--speech-bubble-color);
    transition: 0.3s;
}

.at-bottom .speech-bubble:after {
	border-left-color: var(--speech-bubble-color);
    transition: 0.3s;
}

.speech-bubble:after {
    transition: 0.3s;
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right: 0;
	border-bottom: 0;
	margin-top: -10px;
	margin-right: -20px;
}

#tracker {
    position: fixed;
    height: var(--tracker-height);
    right: var(--tracker-right-margin);
    bottom: calc((var(--tracker-height) - 200px) * -1);
    transition: 0.3s;
}

.near-bottom #tracker {
    bottom: 0;
    transition: 0.3s;
}

/**
 * photo rows
 */

.photo-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.flex-item {
    flex: 1;
    display: flex;
}

.flex-item img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
}

/**
 * Itinerary
 */

#itinerary h3 {
    font-size: 200%;
}

#itinerary h4, p {
    margin-top: 8px;
    margin-bottom: 8px;
}

#itinerary li {
    margin-bottom: 16px;
}

/**
 * Fireworks
 * stolen from https://codepen.io/hmaw/pen/qBEMLxV
 */

.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  to {
    box-shadow: -110px -379.6666666667px #ff5500, -246px -258.6666666667px darkorange, 40px -35.6666666667px #ffc400, 134px -375.6666666667px #ff00ae, 95px -280.6666666667px #0066ff, 153px 10.3333333333px #bbff00, 5px -284.6666666667px #9500ff, -15px -362.6666666667px #ff009d, -216px -37.6666666667px #00ff66, 245px -378.6666666667px #1a00ff, -180px -320.6666666667px #00ffdd, -53px 15.3333333333px #e6ff00, 195px -30.6666666667px #00ff88, 121px -221.6666666667px #00ff15, -110px -296.6666666667px #00ff26, 32px -240.6666666667px #ff00f2, 150px -131.6666666667px #ff0073, -222px -56.6666666667px #ff0088, -207px -3.6666666667px #ffa600, -49px -351.6666666667px #1a00ff, 11px -17.6666666667px #ff0009, 116px -287.6666666667px #1500ff, -231px -110.6666666667px #ff8000, 190px -214.6666666667px #0091ff, -81px -300.6666666667px #00ff55, 188px -249.6666666667px #6600ff, -187px -18.6666666667px #b700ff, 106px -300.6666666667px #00ff4d, -240px 9.3333333333px #1500ff, 104px -7.6666666667px #0044ff, -122px -290.6666666667px #2600ff, 16px 19.3333333333px blue, 27px -135.6666666667px #00ff11, -248px 27.3333333333px #7b00ff, 248px -256.6666666667px #b7ff00, 72px -374.6666666667px #15ff00, -50px 72.3333333333px #00ffea, 121px -0.6666666667px #6a00ff, -241px -102.6666666667px #2600ff, -237px -352.6666666667px #00ff15, -121px -86.6666666667px #0088ff, -214px -327.6666666667px #ff00f7, 232px -45.6666666667px #00ff3c, -49px -21.6666666667px #ff006a, -107px 19.3333333333px #00fff2, 194px -289.6666666667px #62ff00, -120px -72.6666666667px #00ff62, -134px -63.6666666667px #00ddff, 137px -299.6666666667px #aa00ff, -162px -224.6666666667px #9d00ff, 205px -348.6666666667px #00ff4d;
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: -110px -379.6666666667px #ff5500, -246px -258.6666666667px darkorange, 40px -35.6666666667px #ffc400, 134px -375.6666666667px #ff00ae, 95px -280.6666666667px #0066ff, 153px 10.3333333333px #bbff00, 5px -284.6666666667px #9500ff, -15px -362.6666666667px #ff009d, -216px -37.6666666667px #00ff66, 245px -378.6666666667px #1a00ff, -180px -320.6666666667px #00ffdd, -53px 15.3333333333px #e6ff00, 195px -30.6666666667px #00ff88, 121px -221.6666666667px #00ff15, -110px -296.6666666667px #00ff26, 32px -240.6666666667px #ff00f2, 150px -131.6666666667px #ff0073, -222px -56.6666666667px #ff0088, -207px -3.6666666667px #ffa600, -49px -351.6666666667px #1a00ff, 11px -17.6666666667px #ff0009, 116px -287.6666666667px #1500ff, -231px -110.6666666667px #ff8000, 190px -214.6666666667px #0091ff, -81px -300.6666666667px #00ff55, 188px -249.6666666667px #6600ff, -187px -18.6666666667px #b700ff, 106px -300.6666666667px #00ff4d, -240px 9.3333333333px #1500ff, 104px -7.6666666667px #0044ff, -122px -290.6666666667px #2600ff, 16px 19.3333333333px blue, 27px -135.6666666667px #00ff11, -248px 27.3333333333px #7b00ff, 248px -256.6666666667px #b7ff00, 72px -374.6666666667px #15ff00, -50px 72.3333333333px #00ffea, 121px -0.6666666667px #6a00ff, -241px -102.6666666667px #2600ff, -237px -352.6666666667px #00ff15, -121px -86.6666666667px #0088ff, -214px -327.6666666667px #ff00f7, 232px -45.6666666667px #00ff3c, -49px -21.6666666667px #ff006a, -107px 19.3333333333px #00fff2, 194px -289.6666666667px #62ff00, -120px -72.6666666667px #00ff62, -134px -63.6666666667px #00ddff, 137px -299.6666666667px #aa00ff, -162px -224.6666666667px #9d00ff, 205px -348.6666666667px #00ff4d;
  }
}
@-o-keyframes bang {
  to {
    box-shadow: -110px -379.6666666667px #ff5500, -246px -258.6666666667px darkorange, 40px -35.6666666667px #ffc400, 134px -375.6666666667px #ff00ae, 95px -280.6666666667px #0066ff, 153px 10.3333333333px #bbff00, 5px -284.6666666667px #9500ff, -15px -362.6666666667px #ff009d, -216px -37.6666666667px #00ff66, 245px -378.6666666667px #1a00ff, -180px -320.6666666667px #00ffdd, -53px 15.3333333333px #e6ff00, 195px -30.6666666667px #00ff88, 121px -221.6666666667px #00ff15, -110px -296.6666666667px #00ff26, 32px -240.6666666667px #ff00f2, 150px -131.6666666667px #ff0073, -222px -56.6666666667px #ff0088, -207px -3.6666666667px #ffa600, -49px -351.6666666667px #1a00ff, 11px -17.6666666667px #ff0009, 116px -287.6666666667px #1500ff, -231px -110.6666666667px #ff8000, 190px -214.6666666667px #0091ff, -81px -300.6666666667px #00ff55, 188px -249.6666666667px #6600ff, -187px -18.6666666667px #b700ff, 106px -300.6666666667px #00ff4d, -240px 9.3333333333px #1500ff, 104px -7.6666666667px #0044ff, -122px -290.6666666667px #2600ff, 16px 19.3333333333px blue, 27px -135.6666666667px #00ff11, -248px 27.3333333333px #7b00ff, 248px -256.6666666667px #b7ff00, 72px -374.6666666667px #15ff00, -50px 72.3333333333px #00ffea, 121px -0.6666666667px #6a00ff, -241px -102.6666666667px #2600ff, -237px -352.6666666667px #00ff15, -121px -86.6666666667px #0088ff, -214px -327.6666666667px #ff00f7, 232px -45.6666666667px #00ff3c, -49px -21.6666666667px #ff006a, -107px 19.3333333333px #00fff2, 194px -289.6666666667px #62ff00, -120px -72.6666666667px #00ff62, -134px -63.6666666667px #00ddff, 137px -299.6666666667px #aa00ff, -162px -224.6666666667px #9d00ff, 205px -348.6666666667px #00ff4d;
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: -110px -379.6666666667px #ff5500, -246px -258.6666666667px darkorange, 40px -35.6666666667px #ffc400, 134px -375.6666666667px #ff00ae, 95px -280.6666666667px #0066ff, 153px 10.3333333333px #bbff00, 5px -284.6666666667px #9500ff, -15px -362.6666666667px #ff009d, -216px -37.6666666667px #00ff66, 245px -378.6666666667px #1a00ff, -180px -320.6666666667px #00ffdd, -53px 15.3333333333px #e6ff00, 195px -30.6666666667px #00ff88, 121px -221.6666666667px #00ff15, -110px -296.6666666667px #00ff26, 32px -240.6666666667px #ff00f2, 150px -131.6666666667px #ff0073, -222px -56.6666666667px #ff0088, -207px -3.6666666667px #ffa600, -49px -351.6666666667px #1a00ff, 11px -17.6666666667px #ff0009, 116px -287.6666666667px #1500ff, -231px -110.6666666667px #ff8000, 190px -214.6666666667px #0091ff, -81px -300.6666666667px #00ff55, 188px -249.6666666667px #6600ff, -187px -18.6666666667px #b700ff, 106px -300.6666666667px #00ff4d, -240px 9.3333333333px #1500ff, 104px -7.6666666667px #0044ff, -122px -290.6666666667px #2600ff, 16px 19.3333333333px blue, 27px -135.6666666667px #00ff11, -248px 27.3333333333px #7b00ff, 248px -256.6666666667px #b7ff00, 72px -374.6666666667px #15ff00, -50px 72.3333333333px #00ffea, 121px -0.6666666667px #6a00ff, -241px -102.6666666667px #2600ff, -237px -352.6666666667px #00ff15, -121px -86.6666666667px #0088ff, -214px -327.6666666667px #ff00f7, 232px -45.6666666667px #00ff3c, -49px -21.6666666667px #ff006a, -107px 19.3333333333px #00fff2, 194px -289.6666666667px #62ff00, -120px -72.6666666667px #00ff62, -134px -63.6666666667px #00ddff, 137px -299.6666666667px #aa00ff, -162px -224.6666666667px #9d00ff, 205px -348.6666666667px #00ff4d;
  }
}
@keyframes bang {
  to {
    box-shadow: -110px -379.6666666667px #ff5500, -246px -258.6666666667px darkorange, 40px -35.6666666667px #ffc400, 134px -375.6666666667px #ff00ae, 95px -280.6666666667px #0066ff, 153px 10.3333333333px #bbff00, 5px -284.6666666667px #9500ff, -15px -362.6666666667px #ff009d, -216px -37.6666666667px #00ff66, 245px -378.6666666667px #1a00ff, -180px -320.6666666667px #00ffdd, -53px 15.3333333333px #e6ff00, 195px -30.6666666667px #00ff88, 121px -221.6666666667px #00ff15, -110px -296.6666666667px #00ff26, 32px -240.6666666667px #ff00f2, 150px -131.6666666667px #ff0073, -222px -56.6666666667px #ff0088, -207px -3.6666666667px #ffa600, -49px -351.6666666667px #1a00ff, 11px -17.6666666667px #ff0009, 116px -287.6666666667px #1500ff, -231px -110.6666666667px #ff8000, 190px -214.6666666667px #0091ff, -81px -300.6666666667px #00ff55, 188px -249.6666666667px #6600ff, -187px -18.6666666667px #b700ff, 106px -300.6666666667px #00ff4d, -240px 9.3333333333px #1500ff, 104px -7.6666666667px #0044ff, -122px -290.6666666667px #2600ff, 16px 19.3333333333px blue, 27px -135.6666666667px #00ff11, -248px 27.3333333333px #7b00ff, 248px -256.6666666667px #b7ff00, 72px -374.6666666667px #15ff00, -50px 72.3333333333px #00ffea, 121px -0.6666666667px #6a00ff, -241px -102.6666666667px #2600ff, -237px -352.6666666667px #00ff15, -121px -86.6666666667px #0088ff, -214px -327.6666666667px #ff00f7, 232px -45.6666666667px #00ff3c, -49px -21.6666666667px #ff006a, -107px 19.3333333333px #00fff2, 194px -289.6666666667px #62ff00, -120px -72.6666666667px #00ff62, -134px -63.6666666667px #00ddff, 137px -299.6666666667px #aa00ff, -162px -224.6666666667px #9d00ff, 205px -348.6666666667px #00ff4d;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}