html, body {
    background-color: #dfeefe;
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: 1.7vw;
    color: black;
    line-height: 1.7;
    overflow-x: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

* {
  box-sizing: border-box;
}

:focus {
    border: none;
}

body::-webkit-scrollbar {
  display: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#UserGuide_hist_block {
    height: 5vw;
    position: absolute; 
    top: 20vh; 
    right: 3vw; 
    z-index: 1; 
    background-color: 
    #ffffff; 
    border-radius: 50%;
}

a {
    color: aliceblue;
    text-decoration: none;
    font-family: 'Playfair Display', serif;;
}

#navbar {
    color: white;
    position: fixed;
    top: 0;
    padding-left: 2vw;
    font-size: 28px;
    background-color: #2c3e50;
    height: 130px;
    width: 100%;
    z-index: 8;
}

#top_title { 
    height: 40px; 
    user-select: none;
    position: absolute;
    top: 50%; 
    transform: translateY(-50%); 
    left: 80px;
}

#burger_button {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    width: 40px;
    height: 35px;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.burger_line {
    width: 100%;
    height: 5px;
    border-radius: 10px;
    background-color: white;
}

summary::-webkit-details-marker {
  display: none;
}
summary {
    list-style: none;
    cursor: pointer;
}

#sect_list {
    position: relative;
    top: 60px;
    left: 50px;
    background-color: #5d7d9e;
    width: fit-content;
    padding: 10px 40px;
    text-align: center;
    list-style: none;
    border-radius: 0 30px 30px 30px;
    box-shadow: 10px 10px 20px #2c3e50;
}

.det_animation {
    animation: top_enter 1s;
}

@keyframes top_enter {
    0% { top: 0; opacity: 0.6; }
    100% {}
}

#nav_link {
    display: block; 
    background-color: #5d7d9e; 
    padding: 10px; 
    border-radius: 20px; 
    width: fit-content; 
    position: absolute; 
    top: 50%; 
    right: 3vw;
    transform: translateY(-50%); 
}

#top_video {
    pointer-events: none;
    margin-top: 4vh;
    width: 101%;
}

#CasaLoma_history_block {
    position: absolute;
    top: 22vh;
    right: 4vw;
    width: 70vw;
    padding-left: 10px;
    padding-right: 30px;
    background-color: #305376;
    color: aliceblue;
    text-align: center;
    border-radius: 30px;
}

.Block_Off {
    opacity: 0;
    animation: scomparsa 0.5s;
}

.Block_On {
    animation: comparsa 1s;
    opacity: 0.9;
}

@keyframes comparsa {
    0% {opacity: 0;}
    100% {}
}
@keyframes scomparsa {
    0% {opacity: 1;}
    100% {}
}

.description_block {
    text-align: center;
    margin: 0 auto;
    width: 95vw;
    margin-bottom: 15vh;
}

.sect_title {
    font-family: 'Playfair Display', serif;
    background-color: #2c3e50;
    margin: 3vh 2vw;
    width: fit-content;
    padding: 20px;
    border-radius: 50px 10px 50px 10px;
    color: aliceblue;
}

#map {
    border: 0;
    width: 45vw;
    height: 40vh;
    margin-right: 5vw;
}

.section_container {
    display: flex;
    padding: 30px;
    justify-content: space-between;
}

.section_photo {
    border-radius: 50px;
    box-shadow: 10px 10px 20px #2c3e50;
}

.explain_block, .expl_LibG {
    background-color: #95b9de;
    color: #2c3e50;
    width: 55vw;
    height: fit-content;
    text-align: center;
    padding: 20px;
    border-radius: 30px;
}

.events_fascia {
    position: relative;
    padding: 20px 10px;
    margin: 10vh 0;
    height: fit-content;
    width: 100%;
    background-image: linear-gradient(#7b3f45, #bb8187, #7b3f45);
}

#images_container {
    margin-top: 15vh;
    display: flex;
    gap: 20px;
    scroll-behavior: smooth;
    height: 60%;
    width: 100%;
}

.im_cont_norm {
    overflow: auto;
    position: relative;
}

.im_cont_clicked {
    overflow: none;
    position: relative;
    z-index: 6;
}

.Ev_image {
    height: 30vw;
    transition: transform 0.5 ease;
    cursor: pointer;
    z-index: 1;
}


.Ev_image:hover, .Ev_image:focus {
    box-shadow: 0 10px 40px black;
}

.EvIm_clicked {
    position: fixed;
    top: 55%;
    left: 20%;
    transform: translate(-50%, -50%);
    height: 80vh;
    z-index: 6;
    animation: translate linear 2s;

}

#Ev_descr_block {
    position: fixed;
    top: 50%;
    transform: translateY(-45%);
    left: 42vw;
    padding: 20px 40px;
    height: fit-content;
    width: 50vw;
    background-color: rgb(95, 95, 230);
    color: aliceblue;
    border-radius: 20px;
    text-align: center;
    z-index: 5;
}

#darker {
    position: fixed;
    height: 200vh;
    width: 200vw;
    top: -50vh;
    left: -50vw;
    z-index: 5;
    background-color: black;
    opacity: 0.7;
}

.hide {display: none;}

@keyframes translate {
    0% {height: 50vh; z-index: 1;}
    50% {left: 90%; transform: translate(-50%, -50%); z-index: 5;}
    60% {left: 90%; transform: translate(-50%, -50%); z-index: 6;}
    100% {}
}



@keyframes left_appear {
    10% {transform: translateX(-8%);}
    50% {transform: translateX(8%);}
}

.left_visible {
    animation: left_appear linear 1s;
}

@keyframes transition_photo {
    50% {opacity: 0%;}
    100% {opacity: 100%;}
}

.transition_photo {
    animation: transition_photo 1s linear;
}


#wedding_video {
    position: relative;
    margin: 40px 0;
    width: 80vw;
    left: 50%;
    transform: translateX(-50%);
    border: solid 3px #a9a9a9;
    border-radius: 50px;

}

.arrow {
    opacity: 0.5;
    width: 5vw;
    position: absolute;
    top: 55%;
    z-index: 6;
}

.arrow:hover, .arrow:focus { 
    opacity: 1;
}

#image_wedd {
    position: absolute;
    width: 60vw;
    height: 65vh;
    object-fit: cover;
    box-shadow: 0px 15px 20px #aecdec;
    border-radius: 30px;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}

.backgr_image {
    display: block;
    position: absolute;
    left: 0;
    padding: 0;
    background-image: url('elements/General/films.jpg');
    object-fit: scale-down;
    background-position: center;
    height: 80vh;
    width: 100%;
}

#film_video {
    height: fit-content;
}

#film_video_vid {
    width: 50%;
}

footer {
    position: relative;
    margin-bottom: 0;
    width: 100%;
    height: auto;
    padding-bottom: 25px;
    text-align: center;
    background-color: #2c3e50;
    color: aliceblue;
    padding-top: 1vh;
    margin-top: 10vw;
    line-height: 1;
    font-size: 1.3vw;
    font-family: 'Playfair Display', serif;
}

.foot_icon_container {
    position: absolute;
    bottom: 0;
    left: 0;
}

.fab {
    font-size: 2vw; 
    margin: 3vh 2vh; 
    color: #a8934c;
}

#copyright_text {
    position: absolute;
    bottom: 0;
    right: 2vw;
    font-size: 1vw;
}

@keyframes left_entrance {
    0% {position: relative; left: -100%;}
    100% {position: relative; left: 0;}
}

@keyframes right_entrance {
    0% {position: relative; right: -100%;}
    100% {position: relative; right: 0;}
}

.burger_clicked {
    animation: burger_animation linear 1s;
}

@keyframes burger_animation {
    25% { transform: translateY(-100%); }
    50% { transform: translateY(0); transform: rotateX(180deg); }
    75% { transform: translateY(100%); transform: rotateX(360deg); }
    100% {}
}


.ev_arrow {display: none;}
@media (pointer: fine) {
    .ev_arrow {
        display: block;
        opacity: 0.5;
        background-color: #5d7d9e;
        width: 50px;
        height: 30vw;
        object-fit: scale-down;
        position: absolute;
        top: 0;
        z-index: 1;
        filter: box-shadow(8px 0px 5px #aecdec);
    }

    .ev_arrow:hover, .ev_arrow:focus {
        opacity: 0.9;
    }

    .arrow:hover, .arrow:focus { 
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        padding: 5px;
    }
}

@media (max-width: 500px) and (orientation: portrait) and (pointer: coarse) {

    html, body {
        font-size: 3.8vw;
    }

    #top_title { height: 25px; left: 60px; }

    #nav_link {font-size: 4vw;}

    #burger_button {
        width: 25px;
        height: 20px;
        left: 20px;
    }

    .burger_line {
        height: 3px;
        border-radius: 10px;
    }

    #sect_list {
        font-size: 5vw;
        left: 50px;
    }

    #top_video { margin-top: 16vh; }

    #UserGuide_hist_block { height: 10vw; }

    #CasaLoma_history_block { width: 90vw; }

    .section_container {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        justify-content: none;
        height: 80vh;
    }

    .section_photo {
        position: absolute;
        top: 5%;
        left: 5%;
        margin: 0;
        width: 90%;
        z-index: 0;
        box-shadow: 0px 0px 40px #2c3e50;
    }

    #map {
        position: relative;
        left: 5vw;
        width: 90vw;
        height: 40vh;
    }

    #expl_map {
        bottom: 8vh;
    }

    .expl_LibG {
        opacity: 0.9;
        width: 80%;
        margin-bottom: 8vh;
    }


    #text_subcontainer {
        display: block;
        position: relative;
        left: 10%;
        top: 5vh;
    }

    .left_enter {
        animation: left_entrance 1s linear;
        z-index: 1;
    }
    .right_enter {
        animation: right_entrance 1s linear;
        z-index: 1;
    }

    .sect_title {
        font-size: 5vw;
        border-radius: 30px 10px 30px 10px;   
    }

    .Ev_image {
        height: 35vh;
    }

    .EvIm_clicked {
        height: 80vw;
        left: 50%;
        top: 40%;
        animation: zoom-in linear 1s;
    }

    
    @keyframes zoom-in {
        0% { height: 30vw; z-index: 1; }
        50% { z-index: 5; }
        60% { z-index: 6; }
        100% {}
    }

    #Ev_descr_block {
        transform: translate(0, 0);
        width: 90vw;
        left: 5vw;
        top: 60vh;
    }

    .explain_block {
        position: absolute;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
    }

    #images_container {
        gap: 15px;
        margin-top: 10vh;
        height: fit-content;
    }

    #wedding_video {
        border-radius: 20px;
        width: 98%;
        margin: 20px 0;
    }

    .arrow {
        opacity: 1;
        width: 10vw;
        top: 60%;
        background-color: white;
        border-radius: 50%;
        padding: 10px;
    }

    #image_wedd {
        height: auto;
        width: 90vw;
    }

    #film_video_vid {
        width: 90vw;
        margin-bottom: 0;
    }

    #film_video {
        bottom: 20vh;
        margin: 0;
    }

    footer {
        height: 15vh;
        font-size: 3vw;
    }

    .fab {
        font-size: 4vw;
        margin: 2vw;
    }

    #copyright_text {
        font-size: 2vw;
    }

}

@media (min-width: 600px) and (orientation: portrait) and (pointer: coarse) {

    html, body { font-size: 2.5vw; }

    #navbar { font-size: 10px; }

    #top_title {height: 40px;}

    #sect_list {
        font-size: 4.5vw;
        top: 45px;
    }

    .burger_line {
        height: 4px;
        border-radius: 10px;
    }

    #nav_link {font-size: 3.5vw;}

    #top_video { margin-top: 10vh; }

    #UserGuide_hist_block { height: 7vw; top: 15vh; }

    #CasaLoma_history_block { width: 90vw; top: 17vh; }

    #contain_LibG { height: 95vh; }

    .section_container {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        justify-content: none;
        height: 80vh;
    }

    .section_photo {
        position: absolute;
        top: 5%;
        left: 10%;
        margin: 0;
        width: 80%;
        z-index: 0;
        box-shadow: 0px 0px 40px #2c3e50;
    }

    #map {
        width: 80%;
        height: 50vh;
    }

    .expl_LibG {
        opacity: 0.9;
        margin: 10vh;
        width: 80vw;
        font-size: 3vw;
    }

    #text_subcontainer {
        display: block;
        position: relative;
        left: 0%;
        top: 4vh;
    }

    .left_enter {
        animation: left_entrance 1s linear;
        z-index: 1;
    }
    .right_enter {
        animation: right_entrance 1s linear;
        z-index: 1;
    }

    .sect_title {
        font-size: 5vw;
        border-radius: 30px 10px 30px 10px;   
    }

    .Ev_image {
        height: 35vh;
    }

    .EvIm_clicked {
        height: 80vw;
        left: 50%;
        top: 38%;
        animation: zoom-in linear 1s;
    }

    
    @keyframes zoom-in {
        0% { height: 30vw; z-index: 1; }
        50% { z-index: 5; }
        60% { z-index: 6; }
        100% {}
    }

    #Ev_descr_block {
        transform: translate(0, 0);
        width: 90vw;
        left: 5vw;
        top: 66vh;
    }

    .explain_block {
        position: absolute;
        width: 90%;
        left: 5%;
        bottom: 0;
        font-size: 3vw;
    }

    #images_container {
        gap: 20px;
        margin-top: 10vh;
        height: fit-content;
    }

    #wedding_video {
        border-radius: 20px;
        width: 98%;
        margin: 20px 0;
    }

    #image_wedd {
        height: auto;
        width: 90vw;
    }

    .arrow {
        opacity: 1;
        width: 8vw;
        top: 60%;
        background-color: white;
        border-radius: 50%;
        padding: 10px;
    }

    #film_video_vid {
        width: 90vw;
        left: 5vw;
        margin: 0;
    }

    #film_video {
        bottom: 15vh;
        margin: 0;
    }

    footer {
        height: 16vh;
        font-size: 2.5vw;
    }

    .fab {
        font-size: 4vw;
        margin: 2vw;
    }

    #copyright_text {
        font-size: 2vw;
    }

}

@media (max-width: 800px) and (orientation: landscape) and (pointer: coarse) {
    #navbar {
        padding-left: 2vw;
        font-size: 20px;
        height: 100px;
        width: 100%;
        z-index: 8;
    }

    #top_title { height: 30px; }

    #top_video { margin-top: 25vh; }

    #UserGuide_hist_block { top: 30vh; }

    #CasaLoma_history_block { top: 30vh; }

    #nick_photo { width: 40%; margin-left: 10px; }

    .explain_block { width: 50vw; }

    

    .arrow {
        opacity: 1;
        width: 8vw;
        top: 60%;
        background-color: white;
        border-radius: 50%;
        padding: 10px;
    }

}

@media (max-width: 900px) and (pointer: fine) {
    
    html, body { font-size: 2vw; }
    
    #nav_link {font-size: 3.5vw;}
    
    #top_video { margin-top: 16vh; }
    
    #UserGuide_hist_block { height: 7vw; top: 25vh; }
    
    #CasaLoma_history_block { width: 90vw; }

    #contain_LibG { height: 95vh; }

    .section_container {
        display: block;
        position: relative;
        margin: 10vh 0 20vh 0;
        padding: 0;
        justify-content: none;
        height: fit-content;
    }

    .section_photo {
        margin-top: 0%;
        margin-left: 50%;
        transform: translateX(-50%);
        height: 65vw;
        width: auto;
        z-index: 0;
        box-shadow: 0px 0px 40px #2c3e50;
    }

    #map {
        width: 70vw;
        height: 50vh;
        margin-bottom: 2vh;
    }

    #nick_photo {
        width: auto;
        height: 100%;
        z-index: 0;
    }

    .expl_LibG {
        opacity: 0.9;
        width: 100vw;
        font-size: 3vw;
    }

    #text_subcontainer {
        display: block;
        position: absolute;
        width: 90vw;
        left: 5vw;
        top: 5vh;
    }

    .left_enter {
        animation: left_entrance 1s linear;
        z-index: 1;
    }
    .right_enter {
        animation: right_entrance 1s linear;
        z-index: 1;
    }

    .sect_title {
        font-size: 5vw;
        border-radius: 30px 10px 30px 10px;   
    }

    .Ev_image {
        height: 50vh;
    }

    .EvIm_clicked {
        height: 60vh;
        left: 50%;
        top: 38%;
        animation: zoom-in linear 1s;
    }

    
    @keyframes zoom-in {
        0% { height: 30vw; z-index: 1; }
        50% { z-index: 5; }
        60% { z-index: 6; }
        100% {}
    }

    #Ev_descr_block {
        transform: translate(0, 0);
        width: 90vw;
        left: 5vw;
        top: 68vh;
        font-size: 2.8vw;
    }

    .ev_arrow {
        height: 50vh;
        width: 40px;
    }

    .explain_block {
        width: 90%;
        margin-left: 5%;
        font-size: 3vw;
    }

    #images_container {
        gap: 20px;
        margin-top: 10vh;
        height: fit-content;
    }

    footer {
        height: 25vw;
        font-size: 2.5vw;
    }

    #wedding_video {
        border-radius: 20px;
        width: 98%;
        margin: 20px 0;
    }

    #image_wedd {
        height: auto;
        width: 75vw;
    }

    .arrow {
        opacity: 0.5;
        width: 5vw;
        position: absolute;
        top: 55%;
        z-index: 6;
        filter: drop-shadow(8px 0px 5px #aecdec);
    }

    #film_video_vid {
        position: relative;
        width: 80%;
        height: auto;
    }

    .fab {
        font-size: 4vw;
        margin: 2vw;
    }

    #copyright_text {
        font-size: 2vw;
    }

}