:root{
    --color-1 : #f5f5f5 ;
    --color-1_1 :#DFDFDF ;
    --color-1_1 : #f5f5f500 ;
    --color-2 : #202020 ;
    --color-2_1 :#202020db ;
    --color-2_2 : #20202000 ;
    --color-3 : #FA04A0 ;
    --color-4: #FFB300;
}

html{
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #202020;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(3deg, #202020 10%, #202020f5 50%,#202020 90%), url("./img/webp/motif_blanc.webp");
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}
main{
    color: var(--color-1);
    text-align: center;

    h1{
        font-family: clash display;
        font-size: 4vmax;
        margin: 0;
        padding: 0;
    }

    h2{
        font-family: galyon;
        font-weight: normal;
        font-size: 1vmax;
        margin: 0;
        padding: 0;
    }

    div{
        display: grid;
        padding:0 10%;
        grid-template-columns:0.5fr 0.5fr;
        column-gap: 8vw;
        margin-top: 10vh;

        a{
            text-decoration: none;
            text-transform: uppercase;
            color: var(--color-1);
            font-family: fibra one;
            background: linear-gradient(-500deg, var(--color-3), var(--color-4) );
            padding: 5% 2%;
            border-radius: 5px;
            transition: ease-out 300ms;


        }
        a:hover{
            transform: scale(1.1);
            transition: ease-in-out 400ms;
        }

    }
}

@font-face {
    font-family: 'Fibra One Bold It';
    src: url('./font/FibraOne-BoldIt.woff2') format('woff2'),
        url('./font/FibraOne-BoldIt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-Heavy.woff2') format('woff2'),
        url('./font/FibraOne-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-Light.woff2') format('woff2'),
        url('./font/FibraOne-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-HeavyIt.woff2') format('woff2'),
        url('./font/FibraOne-HeavyIt.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-LightIt.woff2') format('woff2'),
        url('./font/FibraOne-LightIt.woff') format('woff');
    font-weight: light;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-SemiBold.woff2') format('woff2'),
        url('./font/FibraOne-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One It';
    src: url('./font/FibraOne-RegularIt.woff2') format('woff2'),
        url('./font/FibraOne-RegularIt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One SemiBold It';
    src: url('./font/FibraOne-SemiBoldIt.woff2') format('woff2'),
        url('./font/FibraOne-SemiBoldIt.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One Thin It';
    src: url('./font/FibraOne-ThinIt.woff2') format('woff2'),
        url('./font/FibraOne-ThinIt.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-UltraBold.woff2') format('woff2'),
        url('./font/FibraOne-UltraBold.woff') format('woff');
    font-weight: bolder;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-UltraBoldIt.woff2') format('woff2'),
        url('./font/FibraOne-UltraBoldIt.woff') format('woff');
    font-weight: bolder;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-Thin.woff2') format('woff2'),
        url('./font/FibraOne-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Fibra One';
    src: url('./font/FibraOne-Bold.woff2') format('woff2'),
        url('./font/FibraOne-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'clash display';
    src: url('./font/ClashDisplay-Light.woff') format('woff');
    font-weight: light;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'clash display';
    src: url('./font/ClashDisplay-Medium.woff') format('woff');
    font-weight: medium;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'clash display';
    src: url('./font/ClashDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'clash display';
    src: url('./font/ClashDisplay-Extralight.woff') format('woff');
    font-weight: lighter;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'clash display';
    src: url('./font/ClashDisplay-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'clash display';
    src: url('./font/ClashDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'galyon';
    src: url('./font/Galyon-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'galyon';
    src: url('./font/Galyon-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'galyon';
    src: url('./font/Galyon-Bold-Italic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'galyon';
    src: url('./font/Galyon-Book-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}