/* |---------=| ↓ |=--------=| Variables |=--------=| ↓ |=---------| */

:root {
    /* |---------=| Const. Color |=---------| */

    --color-prim: #651440;
    --color-prim-bis: #981D60;
    --color-sec: #F5F5F5;
    --color-sec-transparent: #F5F5F5b3;
    --color-ter: #DBD7D2;
    --color-quad: #eceae8;
    --color-text-light-fix: #F5F5F5;
    --color-text-dark-fix: #0F0F0F;
    --color-shadow-txt: #0F0F0Fcc;
    --color-shadow-button: #0F0F0F80;
    --color-dark-transparent-50: #0F0F0F80;

    /* |---------=| Const. Color |=---------| */



    /* |---------=| Var. Color |=---------| */

    --color-sec-back: #F5F5F5;
    --color-ter-back: #DBD7D2;
    --color-ter-back-rev: #282828;
    --color-prim-text: #651440;
    --color-prim-text-rev: #c87ba7;
    --color-text-light: #F5F5F5;
    --color-text-dark: #0F0F0F;
    --color-light-transp-10: #F5F5F51f;
    --color-light-transp-50: #F5F5F580;
    --color-light-transp-70: #F5F5F5b3;
    --color-light-transp-85: #F5F5F5d9;
    --color-tv-show: #0F0F0F;

    /* |---------=| Var. Color |=---------| */
    
    

    /* |---------=| Size |=---------| */

    --header-position : clamp(40px, 8vw, 190px);
    --font-size-title: calc( .5 * var(--header-position));
    --font-size: clamp(16px, 3vw, 96px);
    --space-w: clamp(10px, 5vw, 150px);

    /* --max-width: 900px; */
    --max-width: 100%;

    /* |---------=| Size |=---------| */
}

@media only screen and (orientation: landscape) {
    :root {
        --header-position : clamp(40px, 8vh, 190px);
        --font-size: clamp(16px, 3vh, 96px);
        --space-w: clamp(10px, 5vh, 150px);
    }
}

.dark-mode {
    --color-sec-back: #353535;
    --color-ter-back: #282828;
    --color-ter-back-rev: #DBD7D2;
    --color-prim-text: #c87ba7;
    --color-prim-text-rev: #651440;
    --color-text-light: #0F0F0F;
    --color-text-dark: #F5F5F5;
    --color-light-transp-10: #0F0F0F1f;
    --color-light-transp-50: #0F0F0F80;
    --color-light-transp-70: #0F0F0Fb3;
    --color-light-transp-85: #0F0F0Fd9;
    --color-tv-show: #000;
}

/* |---------=| ↑ |=--------=| Variables |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| H.O.N.E.Y P.O.T |=--------=| ↓ |=---------| */

.ohnohon{
    opacity: 0;
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* |---------=| ↑ |=--------=| H.O.N.E.Y P.O.T |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| ScrollBar |=--------=| ↓ |=---------| */

/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-prim) var(--color-ter-back);
  }

  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 12px;
  }
  
  *::-webkit-scrollbar-track {
    background: var(--color-ter-back);
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: var(--color-prim);
    border-radius: 20px;
    border: 3px solid var(--color-ter-back);
    -webkit-transition: background-color 0.5s linear,
                box-shadow 0.5s linear,

                /* border-color 0.5s linear, */
                scrollbar-color 0.5s linear;
}

/* |---------=| ↑ |=--------=| ScrollBar |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| General |=--------=| ↓ |=---------| */

/* stylelint-disable */
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    transition: background-color 0.5s linear,
                box-shadow 0.5s linear,

                /* border-color 0.5s linear, */
                scrollbar-color 0.5s linear;
    -webkit-transition: background-color 0.5s linear,
                box-shadow 0.5s linear,

                /* border-color 0.5s linear, */
                scrollbar-color 0.5s linear;
    -moz-transition: background-color 0.5s linear,
                box-shadow 0.5s linear,

                /* border-color 0.5s linear, */
                scrollbar-color 0.5s linear;
    -o-transition: background-color 0.5s linear,
                box-shadow 0.5s linear,
                
                /* border-color 0.5s linear, */
                scrollbar-color 0.5s linear;
}
/* stylelint-enable */

a {
    text-decoration: none;
    color: var(--color-text-dark);
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: justify;
    scroll-behavior:smooth;
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    height: 100vh;
    font-size: var(--font-size);
    color: var(--color-text-dark);
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    overflow-x: hidden;
}

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

main {
    position: relative;
    top: var(--header-position);
}

.no-pointer {
   pointer-events: none;
}

[class^="checkbox-"] {
    display: none;
}

/* |---------=| ↑ |=--------=| General |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| Backgrounds |=--------=| ↓ |=---------| */

[class*="bg-"] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-color0 {
    background-color: var(--color-sec-back);
}

.bg-color1 {
    background: var(--color-ter-back);
}

.bg-transparent {
    background-color: transparent;
}

.bg-transparent-0 {
    background-color: var(--color-light-transp-85);
}

.bg-transparent-01 {
    background-color: var(--color-light-transp-50);
}

.bg-transparent-02 {
    background-color: var(--color-dark-transparent-50);
}

.img-section {
    width: 100%;
}

.img-section-working {
    width: 100%;
    object-fit: contain;
    max-height: calc(100vh - var(--header-position));
    position: absolute;
}

/* |---------=| ↑ |=--------=| Backgrounds |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| Fixed video Background |=--------=| ↓ |=---------| */

.video-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc( 100vh - var(--header-position));
    max-height: fit-content;
    
    /* padding-bottom: calc( 2 * var(--space-w)); */
}

.video-header video,
.video-header #video-placeholder {
    position: fixed;
    object-fit: cover;
    z-index: -1;
    top: var(--header-position);
    width: 100vw;
    height: calc( 100vh - var(--header-position));
    background-color: var(--color-ter-back);
}

.video-header video {
    display: none;
}

.video-header img {
    display: block;
}

.quote q {
    display: inline;
    line-height: 2.5;
}

.quote p {
    width: 100%;
}

.quote div {
    display: flex;
    justify-content: center;
    width: 100%;
}

.video-header .quote .bible-link {
    margin: calc( 2 * var(--font-size)) 0;
    color: var(--color-sec);
    text-decoration: underline;
    opacity: .7;
    cursor: pointer;
}

.video-header .quote .bible-link:hover {
    opacity: 1;
}

/* |---------=| ↑ |=--------=| Fixed video Background |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| Content |=--------=| ↓ |=---------| */

.max-width {
    max-width: var(--max-width);
    margin: 0 auto;
}

.max-width-80 {
    max-width: calc( .8 * var(--max-width));
    width: calc( .8 * var(--max-width));
    margin: 0 auto;
}

.max-width-60 {
    max-width: calc( .6 * var(--max-width));
    margin: 0 auto;
}

.acceuil {
    font-size: calc( .8 * var(--font-size));
}

.acceuil h1, h2  {
    color: var(--color-prim-text);
}

.acceuil h1  {
    font-size: var(--font-size-title);
    width: 100%;
    text-align: center;
}

.acceuil h2  {
    font-size: calc(.8 * var(--font-size-title));
}

.acceuil ul li  {
    margin-left: calc( 1 * var(--space-w));
    list-style-type: disc;
}

ul.list li {
    margin-left: calc( 1 * var(--space-w));
    list-style-type: "- ";
}

.highlight {
    font-weight: bold;
}

.title {
    color: var(--color-prim-text);
}

.nowrap {
    white-space: nowrap;
}

.highlight .title {
    white-space: wrap;
}

h1.title::before,
h1.title::after {
    content: " — ";
}

.full-screen {
    min-height: calc( 100vh - var(--header-position));
    max-height: fit-content;
    overflow: hidden;
}

.box-content {
    margin: var(--space-w) 0;
    padding: 0 calc( 1 * var(--space-w));
    width: 100%;
    box-sizing: border-box;
}

.margin-height {
    margin-top: calc( 1 * var(--space-w));
    margin-bottom: calc( 1 * var(--space-w));
}

.quote {
    color: var(--color-sec);
    font-size: var(--font-size);
    font-weight: bolder;
    text-align: center;
    text-shadow: 5px 5px 5px var(--color-shadow-txt);
    text-transform: uppercase;
    margin: 0 calc( 2 * var(--space-w));
}

.align-v {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.align-h{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

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

.img-cover {
    position: fixed;
    object-fit: cover;
    z-index: -1;
    width: 100vw;
    top: var(--header-position);
    height: calc(100vh - var(--header-position));
}

@media screen and (width <= 991px) {
    .align-v.max-width-80 {
        max-width: calc( 1 * var(--max-width));
        width: calc( 1 * var(--max-width));
    }
}

.center {
    width: 100%;
    text-align: center;
}

.link {
    text-decoration: underline;
}


/* |---------=| ↑ |=--------=| Content |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| Button |=--------=| ↓ |=---------| */

[class^="button"] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    border-radius: 100vw;
    border: solid var(--color-sec) thin;
    box-shadow: 5px 5px 5px var(--color-shadow-button);
    background-color: var(--color-prim);
    color: var(--color-sec-transparent);
    cursor: pointer;
    padding: 0 calc( 1 * var(--font-size));
    transition: none;
    box-sizing: border-box;
    opacity: .7;
}

[class^="button"]:hover {
    background-color: var(--color-prim-bis);
    color: var(--color-sec);
    opacity: 1;
}

[class^="button"]:active {
    box-shadow: none;
    transform: translateY(calc( .15 * var(--space-w)))!important;
    color: var(--color-sec);
    opacity: 1;
}

[class^="button"] .button {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* |---------=| ↑ |=--------=| Button |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| Contact |=--------=| ↓ |=---------| */

.contact-logo {
    width: calc( 3.5 * var(--header-position));
    filter: invert(100%);
}

.contact-logo .link {
    display: block;
    height: 100%;
}

.dark-mode .contact-logo {
    filter: invert(0);
}

.contact-text {
    text-align: center;
}

.contact-text p {
    font-size: calc( 1.5 * var(--font-size));
    font-weight: bolder;
}

/* |---------=| ↑ |=--------=| Contact |=--------=| ↑ |=---------| */




/* |---------=| ↓ |=--------=| Bible |=--------=| ↓ |=---------| */

.bible {
    display: flex;
    position: relative;
    justify-content: center;
    max-width: calc( 10 * var(--header-position));
    width: 100%;
    box-sizing: border-box;
    margin-top: calc(1* var(--space-w));
    cursor: pointer;
}

.bible img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.bible .span {
    position: relative;
    transition: transform 0.25s ease-in-out;
}

.bible:hover .span{
    transform: scale(1.05);
}

.bible .span::after, .bible .span::before {
    content: " ";
    position: absolute;
    top: 89.5%;
	width: 80%;
    height: 5%;
	box-shadow: 0 calc( .4 * var(--space-w)) calc( .2 * var(--space-w)) var(--color-shadow-txt);
    z-index: -1;
}

.bible .span::before {
    left: 1%;
	transform: rotate(-3deg);
}

.bible .span::after {
    right: 1%;
	transform: rotate(3deg);
}

/* |---------=| ↑ |=--------=| Bible |=--------=| ↑ |=---------| */