*{margin: 0; padding: 0; transition: all 0.3s; user-select: none;}
body
{
    display: flex;
    align-items: center;
    flex-direction: column;
    color: white;
    background-color: #331017;
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    
}

main
{
    width: 75%;
    min-height: max-content;
    padding-bottom: clamp(2.625rem, 0.8077rem + 8.0769vw, 10.5rem);
    overflow: visible;
    font-family: 'FuturaDemiC';
    flex: 1;
}

@media (max-width: 1024px) {
    main
    {
            width: 90%;
    }
}
@media (max-width: 640px) {
    main
    {
            width: 95%;
    }
}


header
{
    /* background-image: url(parlax_bg.png); */
    max-width: 100%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;


    overflow: hidden;
    color: var(--header_text_color);
}

#parlax_fr_id
{
    width: 100%;
    height: 100%;
    position: relative;
    top: 10px;
}

#header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;

    /* padding: 1.5rem; no adaptive */

    padding-left: 1.5rem;
    padding-right: 1.5rem;
    
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    
    gap: 2rem;
}

@media (max-width: 640px) {
    #header-content
    {

        padding-left: 0.25rem   !important;
        padding-right: 0.25rem  !important;
        padding-top: 1rem    !important;
        padding-bottom: 1rem !important;
        /* flex-direction: column; */
        gap: 0.5rem !important;
        flex-direction: column;
    }
}

#header-content h1
{
    z-index: 2;
    font-family: 'AKONY';
    width: fit-content;
    overflow: visible;
    /* font-size: 42px; no adaptive */
    font-size: clamp(1.5rem, 0.3173rem + 1.9231vw, 2.625rem);
}

@media (max-width: 1024px) {
    #header-content h1 {
        text-align: center;
    }
}

#header-content #nav-header {
    z-index: 2;
    font-family: 'FuturaDemiC';
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    /* gap: 4px; */
    gap:  clamp(10.625rem, -11.875rem + 18.75vw, 28.4375rem);
    font-size: clamp(0.875rem, 0.6731rem + 0.8974vw, 1.75rem);
    /* font-size: 28px;  no adaptive*/
}

@media (max-width: 1920px) {
    #header-content #nav-header {
        gap: clamp(3.875rem, -3.8393rem + 12.0536vw, 10.625rem) !important;
    }
}

@media (max-width: 1024px) {
    #header-content #nav-header {
        justify-content: space-around !important;
        gap: 2rem !important;
    }
}

@media (max-width: 640px) {
    #header-content #nav-header {
        justify-content: space-around !important;
        gap: 1rem !important;
    }
}

#header-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6%;
  right: -6%;
  background: linear-gradient(
    to right,
    #e3342f 0%,
    #e3342f 45%,
    #8e3a84 45%,
    #8e3a84 60%,
    #4a1717 60%,
    #4a1717 80%,
    #ff3c00 80%,
    #ff3c00 100%
  );
  transform: skewX(60deg);
  transform-origin: left;
}

@media (max-width: 1024px) {
    #header-content::before {
        left: -21% !important;
        right: -21% !important;
          background: linear-gradient(
    to right,
    #e3342f 0%,
    #e3342f 45%,
    #e3342f 45%,
    #e3342f 60%,
    #e3342f 60%,
    #e3342f 80%,
    #e3342f 80%,
    #e3342f 100%
  ) !important;

    }
}

#social_buttons
{
    padding-top: 25px;
    padding-bottom: 25px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    overflow: visible;
    font-family: 'FuturaDemiC';
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 640px) {
    #social_buttons {
        flex-direction: column;
        gap: 1.5rem;
    }
}

th {
    background-color: #541414;
    color: white;

    padding: 12px 15px;
    
    text-align: left;
    font-weight: bold;
    border: solid white clamp(0.125rem, 0.0817rem + 0.1923vw, 0.3125rem);

    margin: 0;
    font-size: clamp(0.5rem, 0.2692rem + 1.0256vw, 1.5rem);
    text-transform: uppercase;
}

th:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

th:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

td {
    background-color: #541414;
    border: solid white clamp(0.125rem, 0.0817rem + 0.1923vw, 0.3125rem);
    padding: 12px 15px;

    margin: 0;
    color: #e0e0e0;
    font-size: clamp(0.5rem, 0.2692rem + 1.0256vw, 1.5rem);
}

@media (max-width: 1024px) {
    td, th
    {
        text-align: center;
        padding: 8px 4px;
    }
}

td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

td:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

table {
    width: 100%;
    border-collapse: separate;
    /* border-spacing: 0 14px; */
    border-spacing: 0 4px;
}

.controls
{
    display: flex;
    gap: 5%;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10%;
    padding-top: clamp(2rem, 1.7404rem + 1.1538vw, 3.125rem);
    padding-bottom: clamp(2.625rem, 2.3077rem + 1.4103vw, 4rem);

    /* padding-top: 50px; */
    /* padding-bottom: 64px; */
}

.controls h3
{
    box-shadow: 4px 4px 0px #E6332A;
    border-radius: 0px 18px 0px 18px;
    text-align: center;
    font-size: clamp(1.125rem, 0.4615rem + 2.9487vw, 2.8rem);
    font-family: 'FuturaDemiC';
    padding: 
        clamp(1.125rem, 1.0096rem + 0.5128vw, 1.625rem)
        clamp(0.5rem, 0.3558rem + 0.641vw, 1.125rem)
        clamp(1.125rem, 1.0096rem + 0.5128vw, 1.625rem)
        clamp(0.5rem, 0.3558rem + 0.641vw, 1.125rem);

    /* transform: scale(0.9); */
    /* 25px  */
    /* 18px  */
    /* 25px  */
    /* 18px; */
    background-color: #FFF0A6;
    color: #331017;
}

/* #tf2Btn
{
    background-color: #BE1622;
    color: wheat;
}

#discordBtn
{
    background-color: #FFF0A6;
    color: #331017;
} */

.pressed
{
    background-color: #BE1622 !important;
    color: wheat !important;
    transform: scale(1.2);
}

@media (max-width: 640px) {
    .pressed
    {
        background-color: #BE1622 !important;
        color: wheat !important;
        transform: scale(1.1);
    }
}