/* Common baseline for course pages (HTML/CSS/JS/PHP/Git) */
/* Typography, layout grid, aside hero, code blocks, tables, retour link */
/* Combined styles from: style.css, example-styles.css, and course-specific styles */

/* ======================================== */
/* FONTS */
/* ======================================== */
@font-face {
    font-family: Mallory;
    font-weight: 400;
    src: url(../assets/fonts/Mallory-Book.woff) format("woff");
}

@font-face {
    font-family: Mallory;
    font-weight: 400;
    font-style: italic;
    src: url(../assets/fonts/Mallory-Book-Italic.woff) format("woff");
}

@font-face {
    font-family: Mallory;
    font-weight: 700;
    src: url(../assets/fonts/Mallory-Bold.woff) format("woff");
}

@font-face {
    font-family: Mallory;
    font-weight: 700;
    font-style: italic;
    src: url(../assets/fonts/Mallory-Bold-Italic.woff) format("woff");
}

@font-face {
    font-family: "Pitch Sans";
    font-weight: 500;
    src: url(../assets/fonts/PitchSansWeb-Medium.woff) format("woff");
}

@font-face {
    font-family: NotoColorEmojiLimited;
    unicode-range: U+1F1E6-1F1FF;
    src: url("https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf");
}

.emoji {
    font-family: "NotoColorEmojiLimited", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ======================================== */
/* CSS VARIABLES - COURSE THEMES */
/* ======================================== */
:root {
    --course-tint: hsl(34, 74%, 43%);
    --course-link: hsl(30, 100%, 43%);
    --course-selection: hsla(30, 100%, 43%, 0.5);
    --course-code-bg: hsla(30, 100%, 43%, 0.3);
    --image-tint: #274466;
    --link-color: hsl(30, 100%, 43%);
    --selection-color: hsla(30, 100%, 43%, 0.5);
    --code-background: hsla(30, 100%, 43%, 0.3);
}

/* Course Theme Variables - Override when theme class is present */
/* HTML Course Theme - Orange */
html.theme-html {
    --course-tint: hsl(34, 74%, 43%);
    --course-link: hsl(30, 100%, 43%);
    --course-selection: hsla(30, 100%, 43%, 0.5);
    --course-code-bg: hsla(30, 100%, 43%, 0.3);
    --image-tint: hsl(34, 74%, 43%);
    --link-color: hsl(30, 100%, 43%);
    --selection-color: hsla(30, 100%, 43%, 0.5);
    --code-background: hsla(30, 100%, 43%, 0.3);
}

html.theme-htmlaside>div {
    background-image: url(../assets/medias/images/jpgs/html-default.jpg);
}

/* CSS Course Theme - Blue */
html.theme-css {
    --course-tint: hsl(228, 78%, 52%);
    --course-link: hsl(228, 100%, 52%);
    --course-selection: hsla(228, 100%, 52%, 0.5);
    --course-code-bg: hsla(228, 100%, 52%, 0.3);
    --image-tint: hsl(228, 78%, 52%);
    --link-color: hsl(228, 100%, 52%);
    --selection-color: hsla(228, 100%, 52%, 0.5);
    --code-background: hsla(228, 100%, 52%, 0.3);
}

html.theme-cssaside>div {
    background-image: url(../assets/medias/images/jpgs/css-default.jpg);
}

/* JavaScript Course Theme - Yellow */
html.theme-js {
    --course-tint: hsl(53, 93%, 35%);
    --course-link: hsl(53, 100%, 52%);
    --course-selection: hsla(53, 100%, 52%, 0.5);
    --course-code-bg: hsla(53, 100%, 52%, 0.2);
    --image-tint: hsl(53, 93%, 35%);
    --link-color: hsl(53, 100%, 52%);
    --selection-color: hsla(53, 100%, 52%, 0.5);
    --code-background: hsla(53, 100%, 52%, 0.2);
}

html.theme-jsaside>div {
    background-image: url(../assets/medias/images/jpgs/js-default.jpg);
}

/* PHP Course Theme - Dark Blue */
html.theme-php {
    --course-tint: hsl(212, 45%, 28%);
    --course-link: hsl(208, 100%, 43%);
    --course-selection: hsla(208, 100%, 43%, 0.5);
    --course-code-bg: hsla(208, 100%, 43%, 0.3);
    --image-tint: hsl(212, 45%, 28%);
    --link-color: hsl(208, 100%, 43%);
    --selection-color: hsla(208, 100%, 43%, 0.5);
    --code-background: hsla(208, 100%, 43%, 0.3);
}

html.theme-phpaside>div {
    background-image: url(../assets/medias/images/jpgs/php-default.jpg);
}

/* Git Course Theme - Red */
html.theme-git {
    --course-tint: hsl(9, 74%, 43%);
    --course-link: hsl(9, 100%, 43%);
    --course-selection: hsla(9, 100%, 43%, 0.1);
    --course-code-bg: hsla(9, 100%, 43%, 0.1);
    --image-tint: hsl(9, 74%, 43%);
    --link-color: hsl(9, 100%, 43%);
    --selection-color: hsla(9, 100%, 43%, 0.1);
    --code-background: hsla(9, 100%, 43%, 0.1);
}

html.theme-gitaside>div {
    background-image: url(../assets/medias/images/jpgs/git-default.jpg);
}

/* ======================================== */
/* SCROLLBAR STYLING */
/* ======================================== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #2c2c2c #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #2c2c2c;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

/* ======================================== */
/* SELECTION */
/* ======================================== */
::selection {
    background: var(--course-selection);
}

::-moz-selection {
    background: var(--course-selection);
}

/* ======================================== */
/* BASE TYPOGRAPHY */
/* ======================================== */
html {
    font-size: 17px;
    line-height: 1.6;
    font-family: Mallory, Verdana, sans-serif;
    color: #444;
    accent-color: var(--course-link);
}

body,
html {
    margin: 0;
    overflow-y: auto;
}

h1 {
    font-size: 2rem;
    letter-spacing: -0.01em;
    line-height: 1.333;
    font-weight: 400;
}

h2 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 2rem;
}

h3 {
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 2rem;
}

h4 {
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 2rem;
}

h5 {
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.3);
    margin-top: 2rem;
}

/* ======================================== */
/* LINKS */
/* ======================================== */
a {
    text-decoration: none;
    color: #444;
    border-bottom: 1px solid var(--course-link);
    position: relative;
    transition: color 0.15s ease-out;
}

a:hover,
a:focus,
a:active {
    color: var(--course-link);
}

/* ======================================== */
/* CODE STYLING */
/* ======================================== */
code {
    font-family: "Pitch Sans", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.8rem;
    list-style-type: decimal-leading-zero;
    background-color: var(--course-code-bg);
    color: var(--image-tint);
    margin: 2rem 0;
    list-style-position: inside;
    padding: 4px;
    border-radius: 4px;
}

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
}

code.hljs {
    padding: 3px 5px;
}

.hljs {
    color: #444;
}

.hljs-comment {
    color: #697070;
}

.hljs-punctuation,
.hljs-tag {
    color: #444a;
}

.hljs-tag .hljs-attr,
.hljs-tag .hljs-name {
    color: #444;
}

.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-name,
.hljs-selector-tag {
    font-weight: 700;
}

.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
    color: #800;
}

.hljs-section,
.hljs-title {
    color: #800;
    font-weight: 700;
}

.hljs-link,
.hljs-operator,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
    color: #ab5656;
}

.hljs-literal {
    color: #695;
}

.hljs-meta {
    color: #1f7199;
}

.hljs-ln-n {
    text-align: end;
}

.hljs-ln td {
    padding-inline-end: 10px;
}

/* ======================================== */
/* AUTO-NUMBERING */
/* ======================================== */
h1 {
    counter-reset: h1;
}

h2 {
    counter-reset: h2;
}

h3 {
    counter-reset: h3;
}

h4 {
    counter-reset: h4;
}

h5 {
    counter-reset: h5;
}

h6 {
    counter-reset: h6;
}

h3:before {
    counter-increment: h2;
    content: counter(h2) ". ";
}

h4:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) ". ";
}

h5:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}

h6:before {
    counter-increment: h5;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}

/* ======================================== */
/* LAYOUT */
/* ======================================== */
.flex {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 5fr;
}

@media (min-width: 1280px) {
    .grid {
        display: grid;
        grid-template-columns: 1fr 5fr;
    }
}

.main {
    overflow-y: auto;
    scroll-behavior: smooth;
    height: 100vh;
    overflow-x: hidden;
}

.main * {
    scroll-margin: 20px;
}

main>section {
    padding: 5% 15%;
}

/* ======================================== */
/* ASIDE VISUAL */
/* ======================================== */
aside {
    background-color: var(--course-tint);
    overflow: hidden;
}

aside>div {
    background-image: url(https://source.unsplash.com/random/?code),
        url(../assets/medias/images/jpgs/default.jpg);
    mix-blend-mode: luminosity;
    background-size: cover;
    opacity: 0.75;
    background-repeat: no-repeat;
    filter: grayscale(1);
    background-position: center center;
    width: 100%;
    height: 100%;
}

/* ======================================== */
/* MEDIA */
/* ======================================== */
img,
video {
    width: 100%;
    margin: auto;
    display: block;
    border: 1px solid #444;
}

/* ======================================== */
/* TABLES */
/* ======================================== */
table:not(.hljs-ln),
td:not(.hljs-ln-line),
th {
    border: 1px solid #444;
    border-collapse: collapse;
}

table:not(.hljs-ln) tbody tr td,
table:not(.hljs-ln) thead tr th {
    padding: 5px 15px;
}

/* ======================================== */
/* EXAMPLES */
/* ======================================== */
.example {
    border: 1px solid #000;
    padding: 10px;
    border-radius: 4px;
}

.example-main,
.example-header,
.example-footer,
.example-nav,
.example-article,
.example-section {
    background-color: var(--course-code-bg);
}

.example-h1 {
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.type {
    margin-top: 2rem;
    list-style-type: none;
    padding: 0;
    color: #777777;
    font-size: 0.9rem;
}

/* ======================================== */
/* RETOUR LINK */
/* ======================================== */
.retour {
    position: fixed;
    right: 35px;
    bottom: 5px;
    background-color: #ffffffaa;
    padding: .5rem;
}

.home {
    position: fixed;
    left: 35px;
    bottom: 5px;
    background-color: #ffffffaa;
    padding: .5rem;
}

/* ======================================== */
/* EXAMPLE STYLES - For interactive demos */
/* ======================================== */
.example .p {
    color: blue;
}

.example .exemple {
    font-size: 12px;
}

.example #carre {
    background-color: #333;
    width: 35px;
    height: 35px;
}

.example a[target="_blank"] {
    color: red;
}

.example .paragraph {
    color: green;
}

.example .container>.directp {
    font-weight: bold;
}

.example .container .immediate+p {
    margin-top: 10px;
}

.example .container .general~p {
    color: #777777;
}

.example .firstline::first-line {
    font-weight: bold;
}

.example .link:hover {
    color: orange;
}

.example .container-b {
    width: 100%;
    margin: 0 auto;
}

.example .container-b .block-item {
    width: 100%;
    margin-bottom: 20px;
    background-color: #f0f0f0;
}

.example .inline-container .inline-item {
    display: inline;
    margin-right: 10px;
    background-color: #e0e0e0;
}

.example .inline-container .inline-block-item {
    display: inline-block;
    width: 30%;
    margin-right: 10px;
    background-color: #e0e0e0;
}

.example .flex-container {
    display: flex;
    justify-content: space-between;
}

.example .flex-item {
    flex: 1;
    background-color: #c0c0c0;
}

.example .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.example .grid-item {
    background-color: #90a0b0;
}

.example .body {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.example .color h1 {
    color: var(--course-tint);
    background-color: #ecf0f1;
}

.example .gradient {
    background: linear-gradient(to right, #3498db, #2ecc71);
    width: 100%;
    height: 55px;
}

.example .advancedText {
    font-size: 16px;
    font-weight: 400;
    line-height: 3;
}

.example button {
    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.example button:hover {
    color: #ffffff;
    font-size: 18px;
}

@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.example .spin {
    width: 35px;
    height: 35px;
    background-color: var(--course-tint);
    animation: rotateAnimation 2s linear infinite;
}

.example .scale {
    transition: transform 0.3s ease-in-out;
    transform-origin: 0 50%;
}

.example .scale:hover {
    transform: scale(1.2);
}

.example .responsiveImage {
    max-width: 350px;
}

.example .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-align: center;
    background-color: #3498db;
    color: #ffffff;
    text-decoration: none;
}

.example .button__text {
    font-weight: bold;
}

.example .button--large {
    font-size: 20px;
    padding: 15px 30px;
}

/* ======================================== */
/* MOBILE RESPONSIVE */
/* ======================================== */
@media (max-width: 768px) {
    h1 {
        font-size: 1.4rem;
    }

    .flex {
        display: flex;
        flex-direction: column;
    }

    aside>div {
        height: 200px;
        background-position: center center;
    }

    body,
    html {
        overflow-x: hidden;
    }

    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    img {
        width: 100%;
        display: block;
    }

    .main>section {
        padding: 2% 5%;
    }

    .main>section ol {
        padding-inline-start: 20px;
    }

    .main>section ul {
        padding-inline-start: 5px;
    }

    .specialTableContainer {
        overflow-x: auto;
    }

    .example .mediaqueries {
        font-size: 10px;
    }
}

/* ======================================== */
/* HOME BUTTON STYLES */
/* ======================================== */
@media(min-width: 768px) {
    .home {
        left: 35%;
    }


}