body{
    font-family: "Roboto", sans-serif;
    overflow-x: hidden;
}

#content{
    min-height: 100vh;
    background-color: #fff;
    margin-right: 0;
    padding: 0;
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    left: 100px;
    width: calc(100% - 100px);
    max-width: 100vw;

    transition: all 0.3s;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 3rem;            /* Footer height */
    background: #ccc;

}

html:not([data-scroll="0"]) header {
    height: 5%;
    font-size: 30px;
    justify-content: left;
    width: calc(100% - 100px);
}


/*html:not([data-scroll="0"]) header div p {
    margin-left: 150px;
}*/

header{
    color: #fff;
    width: calc(100% - 100px);
    margin: 0;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
    max-width: 100vw;
    z-index: 13;
    font-family: "Archivo Black", sans-serif;
    font-size: 80px;
    padding: 0;
    transition: all 0.3s;
}

.header-title{
    margin-left: auto;
    margin-right: auto;
}

.header-form{
    position: absolute;
    right: 0;
    z-index: 12;
}

.disconnect-button{
    background: #fff;
    border-radius: 15px;
    height: 40px;
    width: 125px;
    margin: 50px 30px;
    color: #000;
    font-size: 14px;
    border: none;
    transition: all 0.3s;
}

.disconnect-button:hover{
    scale: 120%;
    cursor: pointer;
}

.disconnect-button:active{
    translate: 0 20%;
    background: #ccc;
}

.content-box{
    text-align: justify;
    margin-top: 5%;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 5px 5px 10px lightgrey;
    background-color: #eee;
    padding: 20px 40px;
    border-radius: 20px;
    animation: pop 0.5s ease-in;
    transition: all 0.3s;
}

.content-box:first-of-type {
    margin-top: 10%;
}

.content-box:last-of-type{
    margin-bottom: 10%;
}




.content-text{
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 18px;
}

.paragraph{
    margin-bottom: 25px;
}

.paragraph::first-letter{
    margin-left: 25px;
}

.flex-column{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flex-line{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.chorale-img, .saintJacques-img, .presentation-img, .communaute-img{
    width: 100%;
    border-radius: 25px;
    box-shadow: 5px 5px 5px #ccc;
    transition: all 0.3s;
}

.presentation-left{
    margin-right: 20px;
    text-align: justify;
    width: 150%;
}

.presentation-right{
    margin-left: 20px;
    margin-right: 25%;
    width: 100%;
}

.chorale-img:hover, .saintJacques-img:hover, .presentation-img:hover, .communaute-img:hover{
    cursor: zoom-in;
    scale: 140%;
    translate: -20% 0;
}

.chorale-text, .saintJacques-text{
    font-size: 18px;
    margin-right: 50px;
    width: 100%;
}

.bold{
    font-family: "Archivo Black", sans-serif;
}

.tel{
    background-repeat: no-repeat;
    background-size: 100% 0.2rem;
    background-position: 0 100%;
    color: black;
    text-decoration: none;
    transition: all 0.3s;
}

.tel:hover{
    color: #eee;
    background-size: 100% 100%;
    border-radius: 5px;
    padding: 0 5px;
}

.chorale-a{
    background-image: linear-gradient(#af4261, #af4261);
}

@keyframes pop {
    0%{
        opacity: 0;
        translate: 0 50px;
    }
    100%{
        opacity: 100%;
        translate: 0 0;
    }
}

.vtcl-sep{
    height: auto;
    width: 3px;
    border-radius: 5px;
    margin: 0 10px;
    background-color: #ccc;
}

.catechisme-a{
    background-image: linear-gradient(#792ca8,#792ca8);
    padding: 0;
    background-size: 100% 0.2rem;
}

.catechisme-a:first-letter{
    margin: 0
}

.catechisme-topic, .saintJacques-topic{
    font-size: 20px;
    margin-bottom: 20px;
    text-align: left;
    width: 100%
}

.catechisme-left{
    width: 100%;
}

.catechisme-right{
    margin-left: 20px;
    width: 100%;
}


.catechistes{
    justify-content: space-around;
}

.catechisme-text{
    font-size: 18px;
    width: 100%;
}

.minusFont{
    font-size: smaller;
}

.italic{
    font-style: italic;
}

.catechisme-list, .saintJacques-list, .sacrements-list{
    margin: 0 0 -10px 40px;
}

.presentation-list{
    margin: 0 50px -10px 40px;
}

.noMargin{
    margin: 0
}

.google-doc{
    background-color: white;
    border-radius: 50px;
    width: 60%;
    height: 500px;
    border: none;
}

.contact-topic{
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
    background-color: #dddddd;
    padding: 10px 20px;
    border-radius: 25px;
    transition: all 0.3s;
}

.contact-topic:hover{
    scale: 110%;
    color: white;
    background-color: #666666;
}

.noDeco{
    text-decoration: none;
    color: black;
}

.contact-left, .contact-right{
    justify-content: center;
    align-items: center;
    width: 100%;
}

.contact-text{
    font-size: 18px;
}

.contact-a{
    background-image: linear-gradient(#666666, #666666);
}

.box-svg{
    height: 900px;
    width: 100%;
}

.map-svg{
    scale:70%;
    margin-top: -250px;
}

.village-svg{
    position: relative;
    z-index: 8;
    opacity: 0.2;
    transition: opacity 0.3s, fill 0.2s;
}

.zone-svg{
    animation: map-apparition 0.3s ease-in;
    transition: all 0.3s;
}

#arget-svg, #arzacq-svg, #seby-svg, #uzan-svg{
    animation: map-apparition 0.4s ease-in;
}

#montagut-svg, #poursiugues-svg, #fichous-svg, #geus-svg{
    animation: map-apparition 0.5s ease-in;
}

#cabidos-svg, #coublucq-svg, #loncon-svg, #morlanne-svg{
    animation: map-apparition 0.6s ease-in;
}

#piets-svg, #vignes-svg, #mazerolles-svg, #bouillon-svg{
    animation: map-apparition 0.7s ease-in;
}

#malaussanne-svg, #pomps-svg, #larreule-svg, #meracq-svg{
    animation: map-apparition 0.8s ease-in;
}

.zone-svg:hover{
    z-index: 9;
    scale: 120%;
    translate: -125px -125px;
}

.zone-svg:hover .village-svg{
    fill: #ccc;
    opacity: 1;
    cursor: pointer;
}

.text-svg{
    font-size: 35px;
    font-family: "Quicksand", sans-serif;
    font-weight: bold;
}

.text-svg:hover, .church-svg:hover, .chapel-svg:hover{
    cursor: pointer;
}

#montagut-svg .text-svg, #pouliacq-svg .text-svg, #geus-svg .text-svg, #coublucq-svg .text-svg, #fichous-svg .text-svg, #poursiugues-svg .text-svg, #bouillon-svg .text-svg, #louvigny-svg .text-svg {
    font-size: 23px;
}

#luyBearn-svg .text-svg, #luyFrance-svg .text-svg{
    font-size: 30px;
}

.water-svg .text-svg{
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 45px;
}

@keyframes map-apparition {
    0%{
        opacity: 0;
        scale: 150%;
        translate: -250px -250px;
    }
    100%{
        opacity: 100%;
        scale: 100%;
        translate: 0 0;
    }
}

.presentation-topic{
    margin-top: 25px;
    font-size: 30px;
}

.presentation-text{
    font-size: 22px;
    text-align: left;
}

.presentation-a{
    background-image: linear-gradient(#2b586c,#2b586c);
}

.communaute-a{
    background-image: linear-gradient(#4c23ad,#4c23ad);
}

.sacrements-text, .communaute-text{
    font-size: 18px;
}

.sacrements-subtitle, .communaute-subtitle, .histoire-subtitle{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px 0;
    font-size: 40px;
}

.content-subBox{
    background-color: #ddd;
    border-radius: 25px;
    padding: 10px 30px;
    margin-bottom: 25px;
    transition: all 0.3s;
}

.sacrements-topic, .communaute-topic, .histoire-topic{
    padding: 20px;
    font-size: 25px;
}

.sacrements-text{
    padding: 0 25px;
}

.underline{
    background-image: linear-gradient(black, black);
    background-repeat: no-repeat;
    background-size: 100% 0.1rem;
    background-position: 0 100%;
}

.first-letter{
    background-position: 25px 100%;
}

.sacrements-item{
    margin-bottom: 10px;
}

.communaute-item, .presentation-item{
    margin-bottom: 10px;
}

.evenements-list{
    margin-left: -40px;
    list-style-type: none;
}

.evenements-subBox{
    width: 30%;
}

.evenements-text{
    align-items: center;
    font-size: 18px;
    text-align: center;
}

.evenements-subtitle{
    font-size: 50px;
}

.evenements-topic{
    font-size: 22px;
}

div.evenements-topic{
    font-size: 30px;
}

.evenements-a{
    background-image: linear-gradient(#f78c0a,#f78c0a);
}

.accueil-header{
    left: 0;
    width: 100vw;
}

.select-box-content{
    display: flex;
    justify-content: center;
    align-items: center;
    left:0;
    margin: 12% 0 0 0;
    width: 100vw;
    animation: pop 0.3s ease-in;
}

.select-box-line{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    column-count: 3;
}

.select-box-column{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-bottom: 100px;
    width: 100%;
}

.select-box-background{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin: auto;
    width: 200px;
    height: 200px;
    background-color: #eee;
    border-radius: 20px;
    box-shadow: 10px 10px 10px lightgrey;
    transition: all 0.2s;
}

.accueil-box-background{
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: auto;
    width: 200px;
    height: 200px;
    background-color: #eee;
    border-radius: 20px;
    box-shadow: 10px 10px 10px lightgrey;
    transition: all 0.2s;
}

.select-box-item{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    text-decoration: none;
    background-color: #ccc;
    width:  80%;
    height: 80%;
    scale: 125% 130%;
    border-radius: 10px;
    transform: translateY(10%);
    transition: all 0.3s;
}

.select-box-item:hover, .select-box-background:hover .select-box-item{
    border-radius: 10px 10px 20px 20px;
    transform-origin: top center;
    cursor: pointer;
    transform: translateY(-50px);
}

.select-box-item:hover, .accueil-box-background:hover .select-box-item{
    border-radius: 10px 10px 20px 20px;
    transform-origin: top center;
    cursor: pointer;
    transform: translateY(-20px);
}

#diocese-img{
    scale:140%;
    border-radius: 5px;
    transition: all 0.3s;
}

.select-box-text:hover, .select-box-background:hover{
    cursor: default;
}

.select-box-text:hover, .accueil-box-background:hover{
    cursor: pointer;
}

.select-box-icon{
    width: 50%;
}

.select-box-text{
    display: flex;
    margin: auto auto 10px auto;
    font-family: "Quicksand", sans-serif;
    font-weight: bold;
    text-align: center;
    z-index: 2;
    font-size: 25px;
    transform: translateY(-10px);
}

#presentation-select-box{
    background-color: #429E9D;
}

#histoire-select-box{
    background-color: #187d0f;
}

#communaute-select-box{
    background-color: #4c23ad;
}

#evenements-select-box{
    background-color: #f78c0a;
}

#chorale-select-box{
    background-color: #af4261;
}

#sacrements-select-box{
    background-color: #e8af13;
}

#catechisme-select-box{
    background-color: #792ca8;
}

#saintJacques-select-box{
    background-color: #9c5333;
}

#chaletlescun-select-box{
    background-image: linear-gradient(40deg, #0a4234, #187d0f, #429E9D, cornflowerblue);
}

#chaletlescun-select-box~.select-box-text{
    font-size: 24px
}

#diocese-select-box{
    background-color: #eee;
    box-shadow: inset 2px 2px 20px #ccc,
    inset -2px -2px 20px #ccc;
}

#contact-select-box{
    background-color: #666;
}

.histoire-text{
    width: 100%;
}

.histoire-img-church, .histoire-img-interior, .histoire-img-exterior{
    width: 500px;
    margin: 50px;
    border-radius: 20px;
    box-shadow: 10px 10px 10px #aaa;
    transition: all 0.3s;
}

.histoire-img-church:hover{
    scale: 120%;
    cursor: zoom-in;
}

.histoire-img-interior, .histoire-img-exterior{
    width: 200px;
}

.histoire-img-interior:hover, .histoire-img-exterior:hover {
    cursor: zoom-in;
    scale: 200%;
}

.histoire-text-interior{
    align-items: stretch;
    justify-content: stretch;
}

.select-box-text-histoire{
    font-family: "Anton", sans-serif;
    font-size: 40px;
    color: white;
    text-shadow: 5px 5px 10px black;
    filter: brightness(150%);
}

#insert-form{
    margin-top: 10%;
    margin-bottom: -5%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

#insert-section-button{
    opacity: 0;
    position: absolute;
    width: 300px;
    height: 60px;
    margin-bottom: 100px;
    margin-top: -100px;
    z-index: 12;
}

#insert-section-button:hover{
    cursor: pointer;
}

#add-section-button, #submit-file, #insert-section-label{
    width: auto;
    font-size: 24px;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #eee;
    box-shadow: 5px 5px 10px lightgrey;
    border: none;
    z-index: 11;
    margin-bottom: 100px;
    margin-top: -100px;
    transition: all 0.3s;
}

#submit-file{
    position: absolute;
    margin-top: 50px;
}

#add-section-button:hover, #submit-file:hover, #insert-section-button:hover + #insert-section-label, #insert-section-label:hover, .section-button:hover{
    scale: 110%;
    cursor: pointer;
}

#add-section-button:active, #submit-file:active, #insert-section-button:active + #insert-section-label, #insert-section-label:active{
    translate: 0 20%;
    background-color: #ccc;
}

.section-button{
    width: auto;
    font-size: 24px;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #ccc;
    box-shadow: 5px 5px 10px lightgrey;
    border: none;
    transition: all 0.3s;
}

.section-button:active{
    translate: 0 20%;
    background-color: #aaa;
}

.section-button-bar{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20px;
    gap: 40px;
    animation: pop 0.5s ease-in;
}

.select-box-accueil-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 100px;
    grid-auto-rows: minmax(100px, auto);
}


@media (max-width: 1200px){
    .select-box-accueil-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 100px;
        grid-auto-rows: minmax(100px, auto);
    }
}