html {
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    overflow-x: hidden;
}

html::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}


.Layer {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    overflow: hidden;
    transform: scaleX(-1);
}
.Leaf1 {
    //background-image: url('../Paralax Layers/Leaves2.png');
    background-repeat: repeat;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.Leaf2 {
    //background-image: url('../Paralax Layers/Leaves2.png');
    background-repeat: repeat;
    height: 130%;
    width: 130%;
    z-index: 3;
}
.Leaf3 {
    //background-image: url('../Paralax Layers/Leaves.png');
    background-color: transparent;
    background-repeat: repeat;
    height: 200%;
    width: 200%;
    z-index: 8;
}
.L1 {
    //background-image: url('../Paralax Layers/Arch.png');
    //background-image: url('../Paralax Layers/SarahAndHenry.png');
    background-image: url('../Paralax Layers/Guitars.jpg');
    background-size: contain;
    background-color: #00000077;
    background-repeat: no-repeat;
    background-position-y: 60%;
    background-position-x: center;
    height: 100%;
    //background-color: transparent;
    //z-index: 2;
    //background-size: contain;
    //height: 100%;
    //top: 8%;
    backdrop-filter: blur(8px);
}

.L3 {
    //background-image: url('../Paralax Layers/Flowers.png');
    z-index: 6;
    background-image: url('../Paralax Layers/Guitar_Paralax.png');
    background-size: contain;
    //background-color: #111111AA;
    background-repeat: no-repeat;
    background-position-y: 60%;
    background-position-x: center;
    height: 100%;
}

@media (max-width: 3072px) {
    .L3 {
        background-image: url('../Paralax Layers/Guitar_Paralax_lite.png');
    }
    .L1 {
        background-image: url('../Paralax Layers/Guitars_lite.jpg');
    }
}

@media (max-width: 1024px) {
    .L3 {
        background-image: url('../Paralax Layers/Guitar_Paralax_lite2.png');
    }
    .L1 {
        background-image: url('../Paralax Layers/Guitars_lite2.jpg');
    }
}
@media (max-width: 512px) {
    .L3 {
        background-image: url('../Paralax Layers/Guitar_Paralax_lite3.png');
    }
    .L1 {
        background-image: url('../Paralax Layers/Guitars_lite3.jpg');
    }
}


@media (max-width: 150vh) {
    .L1, .L3 {
        background-size: Cover;
    }
}

@media (max-width: 100vh) {
    .L1, .L3  {
        background-position-x: 38%;
    }
}

.L2 {
top: 7%;
    width: 100%;
    height: 81%;
    //transform: scaleX(1);
}

.L2 .Crane {
    background-image: url('../Paralax Layers/Crane_Square.png');
    z-index: 5;
    height: 50px;
    width: 50px;
}

.L4 {
    //background-image: url('../Paralax Layers/Bushes.png');
    z-index: 6;
}
.L5 {
    //background-image: url('../Paralax Layers/Branch.png');
    z-index: 7;
}

.MText {
    top: 10%;
    bottom: 25%;
    left: 75%;
    width:20%;
    text-shadow: 1px 1px black,-1px 1px white;
    font-family: 'Bad Script', cursive;
    transform: rotate(-18deg);
    font-size: 5vmin;
    color: #FFEFDF;
    z-index: 10;
}

.String {
    //position: fixed;
    height: 80%;
    width: 100%;
    //transform: scaleY(-1);
}
 body {
    height: 100%;
    margin: 0;
}


.Page {
    min-height: 100%;
    height: 100%;
    height: calc(50vmin + 50vmax + 25em + 200px);
    overflow: hidden;
    position: relative;
    padding-top: 14.5%;
    padding-top: calc(125px + 5%);
}


@media (max-width: 1250px) {
    .Page {
        height: calc(50vmin + 50vmax + 25em + 350px);
    }
}

@media (max-width: 1000px) {
    .Page {
        height: calc(50vmin + 50vmax + 25em + 200px);
        padding-top: calc(125px + 14%);
    }
}


@media (max-width: 750px) {
    .Page {
        padding-top: 16%;
        padding-top: calc(125px + 5%);
        height: calc(50vmin + 50vmax + 25em + 200px);
    }
}



.Page h1 {
    text-shadow: 0.8px 0px black,-0.8px -0px black, 0px 0.8px black, 0px -0.8px black;
    font-size: 250%;
}


#Home {
    background-image: url('../Paralax Layers/Guitars_lite3.jpg');
    background-size: contain;
    background-color: #111;
    background-repeat: repeat-x;
    transform: scaleX(-1);
    background-position-y: 60%;
    background-position-x: center;
    height: 100%;
}
@media (max-width: 150vh) {
    #Home {
        background-size: Cover;
    }
}

@media (max-width: 100vh) {
    #Home {
        background-position-x: 38%;
    }
}



#About {
    background: radial-gradient(#121212, #101010);
    border-top: 3px solid #000;
    color: white;
    font-family: 'Bad Script', cursive;
    //height: 125em;
    //min-height: 650px;
    //min-height: calc(50vmin + 50vmax);


}

    #About p {
        font-family: 'Quicksand', sans-serif;
        font-size: 2vmin;
        font-size: calc(8px + 1vmin);
        padding-left: 5%;
        padding-right: 5%;
    }

#Gallery {
    background: radial-gradient(#424242, #404040);
    border-top: 3px solid #000;
    color: white;
    font-family: 'Bad Script', cursive;
    min-height: 650px;
    //height: calc(50vmin + 50vmax + 125px);
}

    #Gallery table {
        left: 7.5%;
        top: 25%;
        bottom: 10%;
        width: 85%;
        height: 70vmin;
        position: absolute;
        background: #333;
        border: 5px solid #333;
        border-spacing: 10px;
        //border-collapse: collapse;
        border-radius: 20px;
        margin-top: 20px;
    }

        #Gallery td {
            //width: 12.5vmin;
            height: 20vmin;
            background-size: cover;
            //background-color: #222;
            background-position: top;
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: center;
            // border: 10px solid #333;
            border-radius: 10px;
        }

@media only screen and (max-width: 1000px) {
    #GFullImage {
        display: none;
    }

    #Gallery table {
        height: 95vmin;
        width: 95%;
        left: 2.5%;
    }

    #Gallery td {
        //background-size: contain;
        background-position-y: center !important;
        background-color: #111;
    }
}



    @media (max-width: 960px) {
        #Gallery td {
            //background-size: cover;
        }
    }

    /*#Gallery tbody > :nth-child(1) > :nth-child(5) {
        background: #333;
        border: 0px solid transparent;
    }*/
    #Gallery tbody > :nth-child(1) > :nth-child(5) {
        background: #222;
        background-size: contain;
        background-position-x: center;
        background-position-y: center;
        background-repeat: no-repeat;
    }

    #Gallery tr > :nth-child(1) {
        // height: 33.33%;
    }


    #Ceremony {
        //background-image: linear-gradient(60deg,rgba(210, 210, 226, 0.65), rgba(224, 192, 192, 0.65)),url('../Images/Lace.jpg');
        background: #FFF;
        //radial-gradient(#D2D2D2, #E0C0C0);
        border-top: 3px solid #000;
        color: white;
        font-family: 'Bad Script', cursive;
        min-height: 1500px;
        min-height: calc(1500px + 10em);
    }

    @media (max-width: 1000px) {
        #Ceremony {
            height: 160%;
            min-height: 2000px;
            height: calc(200% - 5vw);
        }
    }

    @media (max-width: 768px) {
        #Ceremony {
            height: 150%;
            min-height: 2100px;
            height: calc(200% - 5vw);
        }
    }

    @media (max-width: 768px) {
        #Ceremony {
            height: 150%;
            min-height: 2100px;
            height: calc(200% - 5vw);
            min-height: calc(2100px - 5vw);
        }
    }




    #Registry {
        background: radial-gradient(#424242, #404040);
        border-top: 3px solid #000;
        color: white;
        font-family: 'Bad Script', cursive;
        min-height: 1000px;
        height: 160%;
        height: calc(50vmin + 50vmax + 25em + 400px);
    }

    @media (max-width: 1200px) {
        #Registry {
            min-height: 140%;
        }
    }

    @media (max-width: 992px) {
        #Registry {
            min-height: 100%;
        }
    }

    @media (max-width: 768px) {
        #Registry {
            min-height: 400vmin;
        }
    }

    #Registry > div {
        height: 100%;
    }

    #RSVP {
        background: radial-gradient(#424242, #404040);
        border-top: 3px solid #000;
        color: white;
        font-family: 'Bad Script', cursive;
        min-height: 100%;
        height: 160%;
        height: calc(50vmin + 50vmax + 25em + 200px);
        //padding-top: 10%;
    }