/*https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap*/
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 300 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/merriweather/v31/u-4t0qyriQwlOrhSvowK_l5UcA6ht3ZEqezpPbXEE55RlL_DB7Ctww.woff2)
        format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 300 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/merriweather/v31/u-4r0qyriQwlOrhSvowK_l5-eTxCVw8XP0LuKH2Gy9thlrXCJbWNw07r.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --autumnRed: #94211E;
    --bannerColor: darkolivegreen;
    --bodyColor: #6F7561;
    --cottagecoreCream: #EBDDC2;
    --darkTerracotta: #AB4212;
    --deepJuniper: #375462;
    --forestGreen: #385542;
    --plumBrown: #553B38;
    --sageGreen: #74795B;
    --sunflowerYellow: #DA9202;
}
.flex-container {
    display: flex;
}
.flex-child {
    flex: 1;
    border: 2px var(--sunflowerYellow) solid;
    width: 300px;
}
.flex-child:first-child {
    margin-right: 20px;
}
.hiddenElement {
    visibility: hidden;
}
.visibleElement {
    visibility: visible;
}
a.registryLink {
    right: 15vw;
    position: relative;
    text-align: right;
}
body {
    margin: auto;
    background-color: var(--bodyColor);
    min-height: 1200px;
}
div {
    font-family: 'Merriweather', serif;
    font-style: normal;
    font-weight: normal;
}
div.banner {
    background-color: var(--bannerColor);
    height: 225px;
    margin: auto;
}
div.bannerInput {
    left: 38%;
    position: absolute;
    top: 190px;
}
div.hotelBox {
    font-size: 18pt;
    position: relative;
    text-align: left;
    width: 300px;
}
div.inputContainer {
    margin-left: 20%;
    margin-right: 20%;
}
div.nameContainer {
    margin-bottom: 5px;
    margin-top: 5px;
}
div.page {
    text-wrap: balance;
    text-align: center;
}
div.pageContent {
    margin-left: 15%;
    margin-right: 15%;
}
div.pageBox {
    background-color: var(--cottagecoreCream);
    margin-top: 5%;
    min-height: 400px;
    padding-top: 5%;
    padding-bottom: 5%;
}
div.pageTagline {
    font-style: italic;
}
div.photoBox {
    background-color: var(--cottagecoreCream);
    max-height: 550px;
}
div.registryItem {
    background-color: white;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 5px;
    min-height: 3em;
}
div.textBox {
    text-align: center;
}
h1 {
    font-size: 50pt;
    margin-bottom: 10px;
    margin-top: 20px;
}
h2 {
    font-size: 25pt;
}
h3 {
    font-size: 20pt;
    margin-bottom: 10px;
}
img {
    text-align: center;
}
img.banner {
    height: 150px;
    left: 43%;
    position: absolute;
    top: 25px;
    width: 150px;
}
/* 451 x 498, 676.5 x 747 */
img.homePage {
    height: 762px;
    left: 34%;
    position: absolute;
    width: 429px;
}
img.photoAlbum {
    max-height: 500px;
    position: relative;
    margin: 25px;
}
input.leftArrow {
    background: url("../img/leftArrow.png");
    bottom: 250px;
    height: 75px;
    position: relative;
    right: 75px;
    width: 75px;
}
input.rightArrow {
    background: url("../img/rightArrow.png");
    bottom: 250px;
    height: 75px;
    position: relative;
    left: 75px;
    width: 75px;
}
input.leftSide {
    position: relative;
    left: 0;
}
label.leftSide {
    position: relative;
    right: 0;
}
p {
    font-size: 18pt;
}
p.pageTagline {
    margin: 0;
}
ul {
    font-size: 16pt;
    margin-top: 0;
}