/* ================================
BODY
=================================*/

body {
    background-color:var(--GC-COLOR-BACKGROUND);
    font-family:var(--GC-FONT2);
    font-size:16px;
    margin:0;
    overflow-x:hidden;
}

h1 {
    font-family:var(--PAGE-TITLE-FONT);
    color:var(--PAGE-TITLE-COLOR);
    font-size:160%;
    text-transform:uppercase;
    font-weight:bold;
}

h2 {
    font-family:var(--PAGE-TITLE-FONT);
    color:var(--PAGE-TITLE-COLOR);
    font-size:130%;
    margin-top:30px;
    padding-top:20px;
    font-weight:bold;
}

h3 {
    font-family:var(--PAGE-TITLE-FONT);
    color:var(--PAGE-TITLE-COLOR);
    font-size:110%;
    margin-top:10px;
    padding-top:20px;
    font-weight:bold;
}

p, span, div, td {
    color:var(--GC-COLOR-TEXT);
    margin-block-end:0;
}

a {
    color:var(--GC-COLOR-LINK);
    font-style:italic;
    text-decoration:none;
    cursor:pointer;
}
a[data-hx="button"], header a, nav a, a.nav, a.cta, a.article, a.category, section > a {
    font-family:inherit; 
    font-size:inherit; 
    font-weight:inherit;
    font-style:inherit;
}

ul,ol {
    color:var(--GC-COLOR-TEXT);
    padding-inline-start:15px;
}
li {
    margin-top:5px;
}

button {
    width:max-content;
    padding:5px 20px;
    margin:0 5px;
    border:none;
    border-radius:0.5em;
    cursor:pointer;
    box-shadow:3px 3px 3px #30303055;
    transition:0.3s;
}
button:hover {
    background-color:var(--GC-COLOR-BUTTON-HOVER);
}
button:active {
    box-shadow:none;
}

input, textarea, select {
    font-family:sans-serif;
    font-size:100%;
}
input::placeholder { opacity:0.3 }

section {
    position:relative;
    width:100%;
    height:max-content;
}
section h1:first-child,
section h2:first-child,
section h3:first-child { 
    margin-top:0; 
}


pre {
    position:relative;
    white-space:pre-line;
    background-color:#F0F0F0;
    border-left:5px solid var(--GC-COLOR2);
    border-radius:0.5em;
    padding:5px;
    box-sizing:border-box;
}
div.result {
    position:relative;
    background-color:#F0F0F0;
    border-left:5px solid var(--GC-COLOR1);
    border-radius:0.5em;
    padding:5px;
}

pre.example::before {
    content:"Exemple";
    position:absolute;
    top:-8px;
    right:10px;
    font-size:80%;
    color:var(--GC-COLOR1);
}
div.result::before {
    content:"Résultat";
    position:absolute;
    top:-8px;
    right:10px;
    font-size:80%;
    color:var(--GC-COLOR1);
}

figure     { margin:unset }
figure img { width:100% }
figure figcaption {
    opacity:0;
    font-size:60%;
    text-align:center;
    margin-top:-10px;
    transition:0.3s;
}
figure:hover figcaption { opacity:1 }


a.cta, input.cta {
    background-color:var(--GC-COLOR2);
    color:var(--GC-COLOR-BACKGROUND);
    display:block;
    width:100%;
    max-width:300px;
    margin:0 auto 0 auto;
    padding:5px;
    box-sizing:border-box;
    border:none;
    border-radius:calc(var(--GC-FRAME-BORDER-RADIUS));
    text-align:center;
    font-size:120%;
    text-shadow:0px 0px 5px #00000077;
    transition:0.3s;
}

.cta:hover, input.cta:hover {
    text-shadow:0px 0px 0px #00000077;
    opacity:0.9;
}

.citation {
    margin:2em 0;
    padding-left:10%;
    padding-right:10%;
    opacity:0.7;
}
.citation span:nth-child(1) {
    font-size:150%;
    font-style:italic;
}
.citation span:nth-child(1)::before {
    content:"❝";
    font-size:120%;
    line-height:0.8em;
    margin-right:5px;
}
.citation span:nth-child(1)::after {
    content:"❞";
    font-size:120%;
    line-height:0.8em;
    margin-right:5px;
}


.carousel {
    border:var(--GC-FRAME-BORDER);
    border-radius:var(--GC-FRAME-BORDER-RADIUS);
    box-shadow:var(--GC-FRAME-SHADOW);
    padding:5px;
    background-color:white;
    width:max-content;
    margin:0 auto 50px auto;
    overflow:hidden;
}
.carousel .title {
    margin:0 0 20px 0;
    padding:0;
}
.carousel .content {
    width:300px;
    height:300px;
}

.moodboard img {
    border-radius:var(--GC-FRAME-BORDER-RADIUS);
}
.moodboard .colors {
    border-radius:var(--GC-FRAME-BORDER-RADIUS);
    overflow:hidden;
}

.colorpalette img {
    border-radius:var(--GC-FRAME-BORDER-RADIUS);
}