*,
*::before,
*::after{
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

:root {

    /* Cursor */
    --Pointer: url(../img/asset/Cursor_perso.svg);
    --Hand: url(../img/asset/Hand_perso.svg);

    /* Images */
    --Bkg-img : url(../img/asset/Paper.jpg);
    --Bkg-img-2k : url(../img/asset/Paper_2k.jpg);
    --Bkg-img-1k : url(../img/asset/Paper_1k.jpg);
    --Bkg-img-700 : url(../img/asset/Paper_700.jpg);

    /* Couleur Principales*/
    --Black: #1e1e1e;
    --White: #f6f6f6;
    --Blue : #264de4;
    --Green : #095C41;
    --Yellow : #DDB031;
    --Grey : #e8e8e8;

    /* Radius  */
    --Rad-int: 10px;
    --Rad-ext: 20px;
    --Rad-main: 30px 30px 0px 0px;

    /* Font */
    --Barracuda: 'Barracuda', Arial, Helvetica, sans-serif;
    --Stolzl: 'Stolzl', Arial, Helvetica, sans-serif;
}

/* Font */

@font-face {
	font-family: 'Barracuda';
	font-weight: 400;
    font-style: normal;
	src: url('../font/Barracuda/Barracuda-regular.woff2') format('woff2'),
        url('../font/Barracuda/Barracuda-regular.woff') format('woff');
}

@font-face {
	font-family: 'Barracuda';
	font-weight: 700;
    font-style: normal;
    src: url('../font/Barracuda/Barracuda-Bold.woff2') format('woff2'),
        url('../font/Barracuda/Barracuda-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Stolzl';
	font-weight: 400;
    font-style: normal;
    src: url('../font/Stolzl/Stolzl-Regular.woff2') format('woff2'),
        url('../font/Stolzl/Stolzl-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Stolzl';
	font-weight: 500;
    font-style: normal;
    src: url('../font/Stolzl/Stolzl-Medium.woff2') format('woff2'),
        url('../font/Stolzl/Stolzl-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Stolzl';
	font-weight: 700;
    font-style: normal;
    src: url('../font/Stolzl/Stolzl-Bold.woff2') format('woff2'),
        url('../font/Stolzl/Stolzl-Bold.woff') format('woff');
    
}

@font-face {
	font-family: 'NotoColorEmoji';
	font-weight: 400;
    font-style: normal;
    src: url('../font/NotoColorEmoji/NotoColorEmoji-Regular.woff2') format('woff2'),
        url('../font/NotoColorEmoji/NotoColorEmoji-Regular.woff') format('woff');
}

html {
    background-color: var(--Black);
}

body {
    margin: 0px;
    padding: 0px;
    cursor: var(--Pointer), auto;
    font-family: var(--Stolzl);
    font-weight: 500;
    background-color: var(--White);
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: var(--Black);
}


::-webkit-scrollbar-thumb {
    background: var(--Blue);
    border-radius: 5px;
}

::-moz-selection {
    background-color: var(--Blue);
    color: var(--White);
}

::selection {
    background-color: var(--Blue);
    color: var(--White);
}

footer {
    background-color: var(--White);
}

p, a {
    font-size: 0.875rem;
}

.h1 {
    font-family: var(--Barracuda);
    font-weight: 700;
    font-size: 3rem;
    margin: 0px;
}

.h2 {
    font-family: var(--Barracuda);
    color: var(--Blue);
    font-size: 1.875rem;
    text-transform: capitalize;
}

.h4 {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: capitalize;
}

a, button {
    cursor: var(--Hand), auto;
}

.noDeco {
    text-decoration: none;
}
.bluecolor {
    color: var(--Blue);
}

.blue {
    display: block;
    color: var(--Blue);
    transition: 0.3s;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.blue:hover {
    color: var(--White);
}

.blue::after {
    /* position: relative; */
    display: block;
    background-color: var(--Blue);
    background-position: -100%;
    content: "";
    height: 20px;
    width: 0%;
    margin-top: -20px;
    margin-left: -1%;
    transition: 0.3s;
    /* z-index: 20; */
    /* mix-blend-mode: difference; */
}

.blue:hover::after {
    width: 102%;
}

.black {
    display: inline-block;
    color: var(--Black);
    transition: 0.3s;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.black:hover {
    color: var(--White);
}

.black::after {
    /* position: relative; */
    display: block;
    background-color: var(--Black);
    background-position: -100%;
    content: "";
    height: 20px;
    width: 0%;
    margin-top: -20px;
    margin-left: -1%;
    transition: 0.3s;
    /* z-index: 20; */
    /* mix-blend-mode: difference; */
}

.black:hover::after {
    width: 102%;
}

.bloc {
    display: block;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.emoji {
    font-family: 'NotoColorEmoji';
}

@media (min-width: 600px) {
    p, a {
        font-size: 1rem;
    }
}

@media (min-width: 800px) {
    
    .h2 {
        font-size: 2.188rem;
    }
    
    .h4 {
        font-size: 1.5rem;
    }
}

@media (min-width: 900px) {
    .h1 {
        font-size: 5rem;
    }
}

/*   _____     _____
    |  _  |   |  _  |
   -| | | |---| | | |-
    |_____| 7 |_____|  ~B!nro~
*/