/************* CODE BRUTE *************/

/* ARRET NAVBAR */ 

/*
nav {
    position: relative !important;
}*/

.social-container {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    color: white;
    margin-left: auto;
    margin-right: auto;
}
.social-infos {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 0.5 1 0;
    padding: 50px;
}
.icon-profil {
    height: 200px;
    width: 200px;
    border-radius: 25%;
    background-image: url('https://static-cdn.jtvnw.net/jtv_user_pictures/9c95c2e2-b0c8-4e38-9262-94e92305f86a-profile_image-300x300.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 2px solid #ffffff26;
}
.social-description {
    width: 80%;
}
.social-description h1 {
    font-family: "CaustenRound Black";
    padding: 25px 0 10px ;
}
.social-description p {
    font-family: "CaustenRound Regular";
}
.social-grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 0.5 1 0;
}
.social-gridbox {
    grid-template-columns: repeat(auto-fill, 8.5em);
    grid-auto-rows: 8.5em;
    grid-auto-flow: row dense;
    display: grid;
    grid-gap: 24px;
    gap: 24px;
    justify-content: center;
    /*padding:0 24px;*/
    width: 100% 
}
.social-grid h1 {
    /*left: 3vw;*/
    position: relative;
    padding: 80px 0 25px 0;
    font-size: 25px;
    font-family: "CaustenRound Black";
}
.social-grid-box-1 h1 {
    padding-top: 0px;
}
.box-link {
    display: block;
    height: 100%;
    padding: 15px;
}
.box-text {
    display: block;
    position: absolute;
}
.box-pseudo {
    display: flex;
    flex-direction: column;
    margin-top: .3rem;
}
.box-button {
    margin-top: .3rem;
    padding: 5px 15px;
    width: fit-content;
}
.box-text .box-pseudo span:nth-child(1) {
    font-family: "CaustenRound Bold";
    font-size: var(--fontSize-box-spanSocial);
}
.box-text .box-pseudo span:nth-child(2) {
    font-family: "CaustenRound Regular";
    font-size: var(--fontSize-box-spanPseudo);
}
/* TWITTER BOX */
.box-twitter {
    background-color: black;
    transition: background-color 1s ease 0ms;
}
.box-twitter:hover {
    background-color: #101010;
    transition: background-color 1s ease 0ms;
}
.box-twitter .box-text div:nth-child(1) {
    display: inline-block;
    position: relative;
    border-radius: 8px;
    font-size: 10px;
    padding: 8px 10px 7px;
    background-color: #474747;
}
.box-twitter .box-text div:nth-child(2) {
    position: relative;
}
.box-twitter .box-text div:nth-child(3) {
    display: block;
    position: relative;
    text-align: center;
    background-color: #474747;
    border-radius: 50px;
    font-family: "CaustenRound Bold";
    font-size: var(--fontSize-box-spanlink);
    transition: background-color 1s ease 0ms;
}
.box-twitter .box-text div:nth-child(3):hover {
    background-color: #6b6b6b;
    transition: background-color 1s ease 0ms;
}
/* INSTAGRAM BOX */
.box-insta {
    background: url('https://img.freepik.com/vecteurs-libre/fond-instagram-degrade-couleurs_23-2147821883.jpg');
    background-size: 120%;
    background-position: -5px -5px;
    transition: 1s ease 0ms;
}
.box-insta:hover {
    background: url('https://img.freepik.com/vecteurs-libre/fond-instagram-degrade-couleurs_23-2147821883.jpg');
    background-size: 120%;
    background-position: -20px -20px;
    transition: 1s ease 0ms;
}
.box-insta .box-text div:nth-child(1) {
    display: inline-block;
    position: relative;
    border-radius: 8px;
    font-size: 10px;
    padding: 8px 10px 7px;
    background-color: #ffffff54;
}
.box-insta .box-text div:nth-child(2) {
    position: relative;
}
.box-insta .box-text div:nth-child(3) {
    display: block;
    position: relative;
    text-align: center;
    background-color: #ffffff54;
    border-radius: 50px;
    font-family: "CaustenRound Bold";
    font-size: var(--fontSize-box-spanlink);
    transition: background-color 1s ease 0ms;
}
.box-insta .box-text div:nth-child(3):hover {
    background-color: #ffffffa5;
    transition: background-color 1s ease 0ms;
}
/* YOUTUBE BOX */
.box-youtube {
    background-color: #e61e1e;
    transition: background-color 1s ease 0ms;
}
.box-youtube:hover {
    background-color: #f33f3f;
    transition: background-color 1s ease 0ms;
}
.box-youtube .box-text div:nth-child(1) {
    display: inline-block;
    position: relative;
    border-radius: 8px;
    font-size: 10px;
    padding: 8px 10px 7px;
    background-color: #ffffff54;
}
.box-youtube .box-text div:nth-child(2) {
    position: relative;
}
.box-youtube .box-text div:nth-child(3) {
    display: block;
    position: relative;
    text-align: center;
    background-color: #ffffff54;
    border-radius: 50px;
    font-family: "CaustenRound Bold";
    font-size: var(--fontSize-box-spanlink);
    transition: background-color 1s ease 0ms;
}
.box-youtube .box-text div:nth-child(3):hover {
    background-color: #ffffffa5;
    transition: background-color 1s ease 0ms;
}
/* TIKTOK BOX */
.box-tiktok {
    background-color: #040404;
    transition: background-color 1s ease 0ms;
}
.box-tiktok video {
    width: 105%;
    height: 105%;
    position: absolute;
    object-fit: cover;
    z-index: 0;
    top: -5px;
    right: -5px;
    opacity: 0.3;
    transition: opacity 1s ease 0ms;
}
.box-tiktok video:hover {
    opacity: 0.5;
    transition: opacity 1s ease 0ms;
}
.box-tiktok .box-text div:nth-child(1) {
    display: inline-block;
    position: relative;
    border-radius: 8px;
    font-size: 10px;
    padding: 8px 10px 7px;
    background-color: #ffffff54;
}
.box-tiktok .box-text div:nth-child(2) {
    position: relative;
}
.box-tiktok .box-text div:nth-child(3) {
    display: block;
    position: relative;
    text-align: center;
    background-color: #ffffff54;
    border-radius: 50px;
    font-family: "CaustenRound Bold";
    font-size: var(--fontSize-box-spanlink);
    transition: background-color 1s ease 0ms;
}
.box-tiktok .box-text div:nth-child(3):hover {
    background-color: #ffffffa5;
    transition: background-color 1s ease 0ms;
}
/* DISCORD BOX */
.box-discord {
    background-color: #627acc;
    transition: background-color 1s ease 0ms;
}
.box-discord:hover {
    background-color: #4f67be;
    transition: background-color 1s ease 0ms;
}
.box-discord .box-image {
    height: 100%;
    width: 60%;
    float: right;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 3px 20px -5px rgba(0, 0, 0, 0.3);
}
.box-discord .box-image::before {
    content: "";
    position: absolute;
    height: 200%;
    width: 200%;
    top: -80%;
    left: -40%;
    z-index: 1;
    background: url(https://vivre-de-son-site-internet.com/wp-content/uploads/discord-outil-communication.jpg) -30px 60px no-repeat;
    background-size: 100%;
    transform: rotate(5deg);
}
.box-discord .box-text div:nth-child(1) {
    display: inline-block;
    position: relative;
    border-radius: 8px;
    font-size: 10px;
    padding: 8px 10px 7px;
    background-color: #ffffff54;
}
.box-discord .box-text div:nth-child(2) {
    position: relative;
}
.box-discord .box-text div:nth-child(3) {
    display: block;
    position: relative;
    text-align: center;
    background-color: #ffffff54;
    border-radius: 50px;
    font-family: "CaustenRound Bold";
    font-size: var(--fontSize-box-spanlink);
    transition: background-color 1s ease;
}
.box-discord .box-text div:nth-child(3):hover {
    background-color: #ffffffa5;
    transition: background-color 1s ease;
}
/* THREADS BOX */
.box-threads {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIYi92rdDCK1FYKhSYdN3sjsdX-meedUDAuSsb5bOwiTE8_aEpgeykLlIoWCARL-wxxhxBW_k5_CHUomeuSLPwH1xrgWHlapnNE069bHGkb8KsC-hP8CnEcgRlenfOOv3JK1id6NwGGeDvopLTHJcIv0xkMFuOJ2alRDB5SCHKnTsr8gz1Zg6Q6fENs0ME/s1422/threads-by-instagram-2.png');
    background-size: 250%;
    background-position: -5px 5px;
    transition: background-position 1s ease;
}
.box-threads:hover {
    background-size: 260%;
    background-position: -8px -2px;
    transition: background-position 1s ease;
}
.box-threads .box-text div:nth-child(1) {
    display: inline-block;
    position: relative;
    padding: 8px 10px 7px;
    border-radius: 8px;
    font-size: 10px;
    background-color: #474747db;
}
.box-threads .box-text div:nth-child(2) {
    position: relative;
}
.box-threads .box-text div:nth-child(3) {
    display: block;
    position: relative;
    text-align: center;
    background-color: #474747db;
    border-radius: 50px;
    font-family: "CaustenRound Bold";
    font-size: var(--fontSize-box-spanlink);
    transition: background-color 1s ease 0ms;
}
.box-threads .box-text div:nth-child(3):hover {
    background-color: #6b6b6b;
    transition: background-color 1s ease 0ms;
}
/* TWITCH BOX */
.box-twitch {
    background-color: #9147ff;
    transition: background-color 1s ease 0ms;
}
.box-twitch:hover {
    background-color: #9b57ff;
    transition: background-color 1s ease 0ms;
}
.box-twitch .box-text {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.box-twitch .box-pseudo-full {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fontSize-box-spanPseudoFull);
    font-family: "CaustenRound Bold";
}
.box-twitch .box-pseudo-full span {
    padding: 0 5px;
}
.box-twitch .box-pseudo-full .fa-brands {
    font-size: 45px;
    top: 5.5px;
    position: relative;
}
/* CITATION BOX */
.box-citation {
    background-color: #616161;
    transition: background-color 1s ease 0ms;
}
.box-citation:hover {
    background-color: #7b7b7b;
    transition: background-color 1s ease 0ms;
}
.box-citation .box-text {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.box-citation .box-inter-text {
    width: 100%;
    height: 100%;
    font-family: "CaustenRound Bold";
}
.box-citation .box-text div:nth-child(1) {
    font-size: var(--fontSize-Box-spanIcon);
    top: -5px;
    position: relative;
}
.box-citation .box-text div:nth-child(2) {
    display: block;
    text-align: center;
    top: 5px;
    position: relative;
    font-size: var(--fontSize-box-spanText);
}
.box-citation .box-pseudo-full .fa-brands {
    font-size: 65px;
    top: 8px;
    position: relative;
}
/* PLANNING BOX */
.box-planning {
    background-color: #1e1e1e;
    transition: background-color 1s ease 0ms;
}
.box-planning:hover {
    background-color: #252525;
    transition: background-color 1s ease 0ms;
}
.box-planning .box-text {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.box-planning .box-inter-text {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.box-planning .box-text span:nth-child(1) {
    font-size: 11.5px;
    line-height: 15px;
    padding-bottom: 5px;
    font-family: "CaustenRound Bold";
}
.box-planning .box-text span:nth-child(2) {
    font-size: 13px;
    padding-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: "CaustenRound Bold";
}
.box-planning .box-text span:nth-child(3) {
    font-size: 11px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 10px;
    font-family: "CaustenRound Regular";
}
.box-planning .box-text span:nth-child(4) {
    font-size: 11px;
    font-family: "CaustenRound Bold";
    padding-top: 5px;
}
/* CONTACT BOX */
.box-contact {
    background-color: #616161;
    transition: background-color 1s ease 0ms;
}
.box-contact:hover {
    background-color: #7b7b7b;
    transition: background-color 1s ease 0ms;
}
.box-contact .box-text {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.box-contact .box-inter-text {
    width: 100%;
    height: 100%;
    font-family: "CaustenRound Bold";
}
.box-contact .box-text div:nth-child(1) {
    font-size: calc(var(--fontSize-Box-spanIcon) - 5px);
    position: relative;
}
.box-contact .box-text div:nth-child(2) {
    display: block;
    text-align: center;
    position: relative;
    top: 15px;
    font-size: var(--fontSize-box-spanText);
}
.box-contact .box-text .box-inter-text span svg {
    display: none;
}
.box-contact .box-pseudo-full .fa-brands {
    font-size: 65px;
    top: 8px;
    position: relative;
}
/* GENSHIN BOX */
.box-genshin {
    background-image: url("../img/genshin_aether-3e483333e2bfcda40ee5bbf159f5efc2.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color 1s ease 0ms;
}
.box-genshin .box-text {
    width: 100%;
}
.box-genshin .box-text div:nth-child(1) {
    position: relative;
    width: 28px;
    float: right;
    right: 30px;
    top: 5px;
    transform: rotate(50deg);
}
.box-genshin .box-text div:nth-child(1)::before {
    content: '';
    display: inline-block;
    position: absolute;
    padding: 15px;
    top: -6px;
    right: 6px;
    z-index: -1;
    border-radius: 50px;
    background-color: #ffffff54;
}
/* FORTNITE BOX */
.box-fortnite {
    background-image: url("../img/fortnite_loop_chapter4end-260b9f014cf19bf427b4c55e02b4568c.gif");
    background-size: cover;
    background-position: 20% center;
    background-repeat: no-repeat;
    transition: background-color 1s ease 0ms;
}
.box-fortnite .box-text {
    width: 100%;
}
.box-fortnite .box-text div:nth-child(1) {
    position: relative;
    width: 28px;
    float: right;
    right: 30px;
    top: 5px;
    transform: rotate(50deg);
}
.box-fortnite .box-text div:nth-child(1)::before {
    content: '';
    display: inline-block;
    position: absolute;
    padding: 15px;
    top: -6px;
    right: 6px;
    z-index: -1;
    border-radius: 50px;
    background-color: #ffffff54;
}
/* DOFUS BOX */
.box-dofus {
    background-image: url("../img/dofus_logo-b8b82256ad969198d5f2f96bfb434b38.jpg");
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color 1s ease 0ms;
}
.box-dofus .box-text {
    width: 100%;
}
.box-dofus .box-text div:nth-child(1) {
    position: relative;
    width: 28px;
    float: right;
    right: 30px;
    top: 5px;
    transform: rotate(50deg);
}
.box-dofus .box-text div:nth-child(1)::before {
    content: '';
    display: inline-block;
    position: absolute;
    padding: 15px;
    top: -6px;
    right: 6px;
    z-index: -1;
    border-radius: 50px;
    background-color: #ffffff54;
}

/* IMAGINE BOX */
.box-imagine {
    background-color: #2e2e2e;
    transition: background-color 1s ease 0ms;
}
.box-imagine:hover {
    background-color: #3e3e3e;
    transition: background-color 1s ease 0ms;
}
.box-imagine .box-text {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}
.box-imagine .box-pseudo-full {
    text-transform: uppercase;
    font-size: var(--fontSize-box-spanPseudoFull);
    font-family: "CaustenRound Bold";
    background: #5589ff;
    font-size: 1.5em;
    border-radius: 50px;
    padding: 8px 25px 5px 25px;
    border-bottom-right-radius: 10px;
}
/* SETUP BOX */
.box-setup {
    background-color: #1e1e1e;
    transition: background-color 1s ease;
}
.box-setup:hover {
    background-color: #252525;
    transition: background-color 1s ease;
}
.box-setup .box-text {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.box-setup .box-inter-text {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "CaustenRound Bold";
}
.box-setup .box-text img {
    width: 25px;
    height: 25px;
}
.box-setup .box-text span:nth-child(2) {
    text-align: center;
    font-size: calc(var(--fontSize-box-spanText) - 5px);
}
.box-setup .box-text span:nth-child(3) {
    text-align: center;
    font-size: var(--fontSize-box-spanPseudo);
}
/** GRID FONCTION **/
.social-grid {
    padding: 25px 0;
}
.s, .m, .ml, .l {
    border-radius: 25px;
    border: 1px solid #ffffff30;
    display: block;
    position: relative;
    box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    transition: all .9s ease;
}

.s:hover, .m:hover, .ml:hover, .l:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 2;
    transition: all .9s ease;
}
.s {
    grid-column-end: span 1;
    grid-row-end: span 1;
}
.m {
    grid-column-end: span 1;
    grid-row-end: span 2;
}
.ml {
    grid-column-end: span 2;
    grid-row-end: span 1;
}
.l {
    grid-column-end: span 2;
    grid-row-end: span 2;
}
@media (max-width: 410px) {
    .l {
        grid-column-end: span 1;
        grid-row-end: span 1;
   }
    .ml {
        grid-column-end: span 1;
        grid-row-end: span 1;
   }
    .box-twitch .box-pseudo-full span svg {
        display: none;
   }
    .box-twitch .box-pseudo-full span {
        padding: 0;
        font-size: calc(var(--fontSize-box-spanPseudoFull) - 30%);
   }
    .box-contact .box-text div:nth-child(1) {
        display: none;
   }
    .box-contact .box-text .box-inter-text span svg {
        display: block;
        align-content: center;
        height: 100%;
        position: relative;
        margin: auto;
        width: calc(var(--fontSize-box-spanPseudoFull) + 40%);
   }
    .box-contact .box-text .box-inter-text span:nth-child(2) {
        display: none;
   }
    .box-discord .box-image {
        display: none;
   }
    .box-imagine .box-pseudo-full {
        font-size: 1.2em;
        padding: 8px 18px 5px 18px;
   }
    .box-citation .box-text div:nth-child(2) {
        line-height: 1em;
   }
}
@media (max-width: 1300px) {
    #fixed {
        position: static !important;
        width: 100% !important;
    }
    .social-infos {
        align-items: center;
    }
    .social-container {
        flex-direction: column;
        margin: auto;
   }
    .social-description {
        width: calc(var(--width-container-column) + 10%);
   }
}
@media screen and (max-width: 600px) {
    .social-infos {
        padding: 20px;
   }
}