:root {

    --text-color-7: #ffffff;
    --text-color-8: #cecece;
    --text-color-9: #ebebeb;

    --gradient-1: linear-gradient(180deg, var(--color-1) 0%, var(--color-2) 100%);
    --gradient-2: linear-gradient(135deg, var(--color-3) 0%, var(--color-4) 100%);

    --gradient-1-reverted: linear-gradient(-180deg, var(--color-2) 0%, var(--color-1) 100%);
    --gradient-2-reverted: linear-gradient(-135deg, var(--color-3) 0%, var(--color-4) 100%);

    --gradient-1-vertical: linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%);
    --gradient-2-vertical: linear-gradient(180deg, var(--color-3) 0%, var(--color-4) 100%);

    --text-size-sm: 13px;
    --text-size-md: 15px;
    --text-size-lg: 20px;
    --text-size-xl: 25px;
    --text-size-xxl: 35px;

    --sidebar-expand-width:250px;
    --sidebar-width:90px;
    --sidebar-start-img-width: 40px;

    --button-text-size:var(--text-size-md);
    --mini-button-text-size:var(--text-size-sm);
    --title-text-size:var(--text-size-lg);
    --mini-title-text-size:var(--text-size-md);
    --paragraphe-text-size:var(--text-size-sm);
    --content-padding: 40px;

    --button-padding: 15px 20px;

}
::-webkit-scrollbar {
    height: 12px;
    width: 7px;
    background: rgba(255, 255, 255, 0.178);
}

::-webkit-scrollbar-thumb {
    background: var(--text-color-3);
}
*::selection {
    background:#b3b3b386;
}
body {
    overflow:hidden;
}
@font-face {
  font-family: global;
  src: url(https://studio.arking.fr/storage/fonts/global.ttf);
}
@font-face {
  font-family: darwin;
  src: url(https://studio.arking.fr/storage/fonts/Fontspring-DEMO-darwinpro-regular.otf);
}
#app {
    display:flex;
    height:100vh;
    overflow:hidden;
    color:var(--text-color-1);
    font-family: 'Nunito', sans-serif;
}
#content {
    background:var(--gradient-2);
    margin-left:var(--sidebar-width);
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    background-attachment: fixed;
    background-size:cover;
    font-family: 'Darwin Pro', sans-serif;
}
#content .content-wrapper {
    min-height:100vh;
    padding: calc(var(--content-padding) / 2) var(--content-padding);
    background-image: url(https://studio.arking.fr/storage/img/bg-squares.webp);
    background-attachment: fixed;
    background-size:cover;
}
#socialLinks {
    position:absolute;
    bottom:100%;
    left:0;
    right:0;
    display:flex;
    align-items: center;
    justify-content:center;
    padding-bottom:10px;
}
#socialLinks .social-item {
    width:50px;
    height:50px;
    display:flex;
    align-items: center;
    justify-content:center;
    margin:0 10px;
    background:var(--color-4);
    border-radius:50px;
    font-size:20px;
    transition: all ease 0.3s;
}
#socialLinks .social-item:hover {
    transform:scale(1.15);
    transition: all ease 0.3s;
}
#socialLinks .social-item i {
    line-height:0;
}
#bigfooter {
    min-height:200px;
    border-radius: 0 !important;
}
#bigfooter .bigfooter-image {
    width:70%;
    align-self: center;
    transition: all ease 0.3s;
}
#bigfooter .bigfooter-image:hover {
    transform:scale(1.1);
    transition: all ease 0.3s;
}
#bigfooter .bigfooter-link {
    color:var(--text-color-1);
    transition: all ease 0.3s;
}
#bigfooter .bigfooter-link:hover {
    color:var(--text-color-2);
    font-weight: bold;
    transition: all ease 0.3s;
    text-decoration: none;
}
#bigfooter .bigfooter-link i  {
    display:inline-block;
    color:var(--text-color-2);
    transform:scale(1.2);
    transition: all ease 0.3s;
}
#footer {
    position: relative;
    font-weight: bold;
    border-radius: 0px!important;
    background: #eaeaea;
    color: var(--text-color-1);
}
#footer .sloyni-copyright {
    text-decoration: none;
    color:var(--text-color-1);
}
#footer .sloyni-copyright:hover {
    color:var(--text-color-2);
}

.contact__item__title {
    background: #dd4e49;
    color: #fff;
    font-family: Montserrat,sans-serif;
    font-size: 22px;
    padding: 15px;
    width: 275px;
}
.contact__item__content {
    font-size: 20px;
    margin: 17px 0 23px 47px;
}

#content .download_content_mac {
    border-radius: 0px;
    box-shadow: 0 200px 100px -100px #F3F3F7 inset;
    width: 100%;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block;  /* Assurez-vous que le bouton peut être transformé */
    color: #000000ad;
}

#content .download_content_windows {
    border-radius: 0px;
    box-shadow: 0 200px 100px -100px #0078D6 inset;
    width: 100%;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block;  /* Assurez-vous que le bouton peut être transformé */
}

#content .download_content_linux {
    border-radius: 0px;
    box-shadow: 0 200px 100px -100px #FCC624  inset;
    width: 100%;
    color: white;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block;  /* Assurez-vous que le bouton peut être transformé */
}

.download_content_windows:hover {
    transform: scale(1.05);  /* Zoom sur le bouton lors du survol */
}

.download_content_mac:hover {
    transform: scale(1.05);  /* Zoom sur le bouton lors du survol */
    color: #0078D6;  /* Change la couleur du texte lors du survol */
}

.download_content_linux:hover {
    transform: scale(1.05);  /* Zoom sur le bouton lors du survol */
    color: #0078D6;  /* Change la couleur du texte lors du survol */
}

#content .inscription_button {
    border-radius: 0px;
    box-shadow: 0 200px 100px -100px #FCC624  inset;
    width: 100%;
    color: white;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block;  /* Assurez-vous que le bouton peut être transformé */
}

.inscription_button:hover {
    transform: scale(1.05);  /* Zoom sur le bouton lors du survol */
}

#content .connexion_button {
    border-radius: 0px;
    box-shadow: 0 200px 100px -100px #d82323  inset;
    width: 100%;
    color: white;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block;  /* Assurez-vous que le bouton peut être transformé */
}

.connexion_button:hover {
    transform: scale(1.05);  /* Zoom sur le bouton lors du survol */
}

#content .server_content {
    border-radius: 0px;
    box-shadow: 0 200px 100px -100px #d82323  inset;
    width: 100%;
    color: white;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block;  /* Assurez-vous que le bouton peut être transformé */
}

.server_content:hover {
    transform: scale(1.05);  /* Zoom sur le bouton lors du survol */
}


#content .discord_content {
    border-radius: 0px;
    box-shadow: 0 200px 100px -100px #404eed  inset;
    width: 100%;
    color: white;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block;  /* Assurez-vous que le bouton peut être transformé */
}

.discord_content:hover {
    transform: scale(1.05);  /* Zoom sur le bouton lors du survol */
}

#content .h1_download {
	background-size: cover;
    padding: 14px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin-bottom: 0px;
    background-image: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 37%)), url(https://studio.arking.fr/storage/img/boutique_background_lootbonus.webp);
    text-align-last: center;
}

#content .border-top-radius {
    border-top-right-radius: 0px!important;
    border-top-left-radius: 0px!important;
}

#content .h1_faq {
    background-size: cover;
    padding: 14px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin-bottom: 0px;
    background-image: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 37%)), url(https://studio.arking.fr/storage/img/boutique_background_packagespecial.webp);
    text-align-last: center;
}

#content .banner_home_2 {
    margin-bottom: 9px;
    border-radius: 0px!important;
    background-position: top;
    background-image: url('https://studio.arking.fr/storage/posts/Fs3rxsiYzoGeWBzQJyEQUTKnP8G3fDrkN9ZC3tpk.webp');
}

#content .banner_home_2:hover {
    filter: saturate(3.5);
}

#content .banner_home_1 {
    margin-bottom: 9px;
    border-radius: 0px!important;
    background-position: top;
    background-image: url('https://studio.arking.fr/storage/img/page_1.webp');
}

#content .banner_home_1:hover {
    filter: saturate(3.5);
}

#content .banner_home_3 {
    margin-bottom: 9px;
    border-radius: 0px!important;
    background-position-y: 84%;
    background-position-x: 20%;
    background-image: url(https://studio.arking.fr/storage/img/boutique_background_submarine.webp);
}

#content .banner_home_3:hover {
    filter: saturate(3.5);
}

#content .footer_background {
    background-image: url(https://studio.arking.fr/storage/img/footer_grass.webp);
    background-size: 21%;
    background-repeat: no-repeat;
    background-position-x: 66%;
    background-position-y: -4px;
}