/*
Made By :

888b     d888          888    888                       d8b
8888b   d8888          888    888                       Y8P
88888b.d88888          888    888
888Y88888P888  8888b.  888888 88888b.  888  888 888d888 888 88888b.
888 Y888P 888     "88b 888    888 "88b 888  888 888P"   888 888 "88b
888  Y8P  888 .d888888 888    888  888 888  888 888     888 888  888
888   "   888 888  888 Y88b.  888  888 Y88b 888 888     888 888  888
888       888 "Y888888  "Y888 888  888  "Y88888 888     888 888  888

From :

8888888888 .d88888b.  8888888b.  8888888888
888       d88P" "Y88b 888  "Y88b 888
888       888     888 888    888 888
8888888   888     888 888    888 8888888
888       888     888 888    888 888
888       888     888 888    888 888
888       Y88b. .d88P 888  .d88P 888
8888888888 "Y88888P"  8888888P"  8888888888
*/




html,body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.overflow_y {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    max-height: 100%;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.overflow_x {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    max-height: 100%;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.overflow_y::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space /
    background: transparent;  / Optional: just make scrollbar invisible */
}

.overflow_x::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space /
    background: transparent;  / Optional: just make scrollbar invisible */
}

/* Fonts */
@font-face {
    font-family: 'Baron Neue';
    src: url('../fonts/BaronNeueBlack.ttf') format('truetype');
}
@font-face {
    font-family: 'Baron Neue regular';
    src: url('../fonts/BaronNeue.woff2') format('woff2'),
    url('../fonts/BaronNeue.woff') format('woff');
    font-weight: thin;
}
@font-face {
    font-family: 'Georgia';
    src: url('../fonts/GEORGIAB.ttf') format('truetype');
}
.baron {
    font-family: 'Baron Neue';
    text-shadow: 1px 1px 2px black;
}
.baron-regular {
    font-family: 'Baron Neue regular'
}
.georgia {
    font-family: 'Georgia';
    text-shadow: 1px 1px 2px black;
    font-weight: 100;
}


/* Responsive */
@media (max-width: 1024px) {
    .card>div>h3 {
        font-size: 2vw !important;
    }
    .card>div>p {
        font-size: 1vw !important;
    }
}
@media (max-width: 768px) {
    .card>div>h3 {
        font-size: 2vw !important;
    }
    .card>div>p {
        font-size: 1.3vw !important;
    }
}
/* 3-to-1 cards */
@media (max-width: 600px) {
    .card {
        width: 90vw !important;
        height: 61.4vw !important;
        margin-top: 3vw;
    }
    .card>img {
        width: 50vw !important;
    }
    .card>div>h3 {
        font-size: 6vw !important;
        margin-top: 4vw !important;
        margin-left: 4vw !important;
    }
    .card>div>p {
        font-size: 3vw !important;
        margin-left: 4vw !important;
    }
    .page-desc {
        width: 90% !important;
    }
}


/* Background */
.background-grinn-universe {
    background-image: url(../images/Background-bis.png);
    background-repeat: no-repeat;
    background-color: black;
    background-size: cover;
    width: auto;
    height: auto;
}


/* Title */
h2 {
    font-size: 35px;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.8);
    margin-left: 5.5vw;
    margin-bottom: 10px;
}
.page-desc {
    margin-left: 5.5vw;
    width: 50vw;
    margin-bottom: 0;
    font-size: 15px;
}


/* Cards */
.container {
    display: flex;
    flex-wrap: wrap;
    width: 90vw;
    justify-content: space-between;
    margin: 0 auto;
}
.container>a {
    cursor: pointer;
    margin-top: 1.5vw;
    text-decoration: none;
}
.card {
    width: 29vw;
    height: 19.83vw;
    border-radius: 3px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    transition-duration: .3s;
}
.orange_background {
    background-image: linear-gradient(to bottom, rgba(228, 140, 59, 0.5), rgba(228, 140, 59, 0.5)), url(../images/cards_background.svg);
    box-shadow: inset -7px -7px 17px #EBBB5D, inset 7px 7px 17px #EBBB5D;
    border: #FFE1BD 1px solid;
}
.blue_background {
    background-image: linear-gradient(to bottom, rgba(51, 202, 221, 0.45), rgba(51, 202, 221, 0.45)), url(../images/cards_background.svg);
    box-shadow: inset -7px -7px 17px #33CADD, inset 7px 7px 17px #33CADD;
    border: #B4F6FF 1px solid;
}
.orange_background:hover{
    box-shadow: inset -20px -20px 50px #EBBB5D, inset 20px 20px 50px #EBBB5D;
}
.blue_background:hover{
    box-shadow: inset -20px -20px 50px #33CADD, inset 20px 20px 50px #33CADD;
}
.card>img {
    width: 18vw;
    position: absolute;
    right: 0;
    bottom: 20px;
    z-index: 0;
    transition-duration: .3s;
}
.card:hover img {
    width: 19vw;
    right: -0.5vw;
    bottom: calc(20px - 0.5vw);
}
.card>div>h3 {
    font-size: 2vw;
    margin: 1.5vw 0 0 1.5vw;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4), 0 2px 1px #071442;
}
.card>div>p {
    font-size: 0.8vw;
    margin: 15px 0 0 1.5vw;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4), 0 2px 1px #071442;
    width: 50%;
}


/* Mentions Légales */
.mentions_legales {
    position: absolute;
    user-select: none;
    display: flex;
    width: 100%;
    justify-content: center;
}
.mentions_legales>a {
    color: white;
    margin-left: 10px;
    margin-top: 15px
}


/* General */
.color-white {
    color: #fff;
}

.color-blue {
    color: #B4F6FF;
}

h1 {
    font-size: 25px;
}

h1 span {
    font-size: 15px;
}

* {
    transition: all 1s linear;
}