@font-face {
    font-family: "Quadrat Grotesk New W01 Reg";
    src: url("https://db.onlinewebfonts.com/t/475c2ac32dcf3e763c053b43d0e19b2a.eot");
    src: url("https://db.onlinewebfonts.com/t/475c2ac32dcf3e763c053b43d0e19b2a.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/475c2ac32dcf3e763c053b43d0e19b2a.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/475c2ac32dcf3e763c053b43d0e19b2a.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/475c2ac32dcf3e763c053b43d0e19b2a.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/475c2ac32dcf3e763c053b43d0e19b2a.svg#Quadrat Grotesk New W01 Reg")format("svg");
}

@font-face {
    font-family: "Myriad Web Bold";
    src: url("https://db.onlinewebfonts.com/t/8fcc7c799b77786d07533231b10f044e.eot");
    src: url("https://db.onlinewebfonts.com/t/8fcc7c799b77786d07533231b10f044e.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/8fcc7c799b77786d07533231b10f044e.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/8fcc7c799b77786d07533231b10f044e.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/8fcc7c799b77786d07533231b10f044e.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/8fcc7c799b77786d07533231b10f044e.svg#Myriad Web Bold")format("svg");
}

@font-face {
    font-family: "Sans";
    src: url("https://db.onlinewebfonts.com/t/952bab25f6798d6bb1937d67e9bee4dd.eot");
    src: url("https://db.onlinewebfonts.com/t/952bab25f6798d6bb1937d67e9bee4dd.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/952bab25f6798d6bb1937d67e9bee4dd.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/952bab25f6798d6bb1937d67e9bee4dd.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/952bab25f6798d6bb1937d67e9bee4dd.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/952bab25f6798d6bb1937d67e9bee4dd.svg#Sans")format("svg");
}

body {
    font-family: "Quadrat Grotesk New W01 Reg", sans-serif;
    margin: 0;
    padding: 0;
    background: url('img/bg.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

html {
    overflow: hidden;
}

a {
    font-family: "Myriad Web Bold", sans-serif;
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.logo-container {
    text-align: center;
    position: relative;
    z-index: 1;
}

.game-logo {
    max-width: 50%;
    height: auto;
}

.game-text {
    font-family: "Quadrat Grotesk New W01 Reg", sans-serif;
    font-size: 1.5rem;
    color: #ffffff;
    margin-top: 20px;
}

.header h1 {
    font-family: "Quadrat Grotesk New W01 Reg", sans-serif;
    font-size: 3rem;
    color: #fff;
}

.text-content p {
    font-family: "Quadrat Grotesk New W01 Reg", sans-serif;
    font-size: 1.5rem;
    color: #fff;
}

.play-button {
    display: block;
    margin: 20px auto;
    width: 300px;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.play-button:hover {
    filter: brightness(1.2);
}

.footer {
    position: absolute;
    bottom: 5px;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    color: #ffffff;
    font-family: "Myriad Web Bold", sans-serif;
}

.footer-link {
    color: #ffffff;
    text-decoration: none;
    margin: 0 10px;
}

.footer-link:hover {
    text-decoration: underline;
}

.sound-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.sound-button:hover img {
    filter: brightness(1.2);
}

.sound-on, .sound-off {
    width: 100%;
}

#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(255, 115, 0, 0.466), transparent);
}

.particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('img/particle.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: float 6s ease-in-out infinite, fade 6s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes float {
    0% { transform: translateY(0) translateX(0) scale(1); }
    50% { transform: translateY(-200px) translateX(80px) scale(0.6); }
    100% { transform: translateY(-400px) translateX(-80px) scale(1); }
}

@keyframes fade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

.smoke-particle {
    position: absolute;
    background-color: rgba(255, 140, 0, 0.3);
    border-radius: 50%;
    opacity: 0.4;
    animation: smokeFloat 7s ease-in-out infinite, smokeFade 7s ease-in-out infinite;
}

@keyframes smokeFloat {
    0% { transform: translateY(0) translateX(0) scale(1); }
    50% { transform: translateY(-150px) translateX(20px) scale(1.2); }
    100% { transform: translateY(-300px) translateX(-20px) scale(1); }
}

@keyframes smokeFade {
    0%, 70% { opacity: 0.4; }
    100% { opacity: 0; }
}



.cookies {
    position: fixed;
    width: 100%;
    background: var(--dark);
    padding: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    bottom: 0;
    border-top: .06rem solid rgba(255,255,255,.25);
    z-index: 2
}

.cookies p {
    margin: 0;
    padding: 0;
    color: #e6e6e6e8;
    font-size: .875rem
}

.cookies p a {
    text-decoration: none;
    color: var(--green);
    transition: .15s ease
}

.cookies p a:hover {
    opacity: .85
}

.cookies button {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    color: var(--dark);
    font-weight: 500;
    font-size: .875rem;
    background: var(--green);
    padding: .25rem .5rem;
    margin-left: .625rem;
    text-transform: uppercase;
    border-radius: .25rem;
    cursor: pointer;
    transition: .15s ease
}

.cookies button:hover {
    opacity: .85
}

.cookies-int {
    font-family: Open Sans,sans-serif;
    font-style: normal;
    position: fixed;
    bottom: 1.875em;
    z-index: 5;
    background-color: #595959;
    border: .0625em solid var(--white-25);
    border-radius: .75rem;
    padding-bottom: .44rem;
    width: 48.125rem;
    left: 50%;
    transform: translate(-50%);
    font-size: 1rem
}

.cookies-int.cookie-notification_hidden_yes {
    display: none
}

.cookies-int .cookie-main-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-100%);
    color: #ccc;
    font-size: .875rem;
    font-weight: 700;
    font-style: normal;
    line-height: 100%;
    letter-spacing: -.04375rem;
    text-transform: uppercase;
    text-shadow: 0 .125rem .125rem #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: .25rem;
    border: .06rem solid black;
    border-radius: .25rem;
    outline: .25rem solid #595959;
    background: #333;
    width: 11.25rem
}

.cookies-int .heading {
    display: flex;
    color: #fff;
    border-radius: .75rem
}

.cookies-int .heading .option {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: .75rem;
    line-height: 100%;
    letter-spacing: -.02rem;
    text-shadow: 0 .06rem 0 #000;
    font-weight: 600;
    font-style: normal;
    width: 9rem;
    height: 1.75rem;
    margin-top: .44rem;
    margin-left: .44rem;
    margin-bottom: .56rem;
    border-radius: .375rem;
    cursor: pointer;
    z-index: 1
}

.cookies-int .heading .option span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#999,#666,#4d4d4d,#333,#666);
    border: .125rem solid black;
    border-radius: .375rem
}

.cookies-int .heading .option:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% + .12rem);
    height: calc(100% + .12rem);
    border-radius: .375rem;
    background: linear-gradient(180deg,#ffffff40,#fff);
    z-index: -1
}

.cookies-int .heading .option:hover {
    filter: brightness(1.1)
}

.cookies-int .heading .chosen {
    cursor: default;
    pointer-events: none
}

.cookies-int .heading .chosen span {
    background: linear-gradient(180deg,#60bf60,#408040,#363,#1e4c1e,#3d663d)
}

.cookies-int .main-block {
    position: relative;
    border-radius: .375rem;
    margin-right: .44rem;
    margin-left: .44rem;
    margin-bottom: .56rem;
    font-family: Open Sans,sans-serif;
    color: #00e500;
    height: 12.5em;
    font-style: normal;
    padding: .5rem .187rem .187rem;
    background: #0d260d
}

.cookies-int .main-block:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% + .12rem);
    height: calc(100% + .12rem);
    border-radius: .375rem;
    background: linear-gradient(180deg,#0d260d,#fff);
    z-index: -1
}

.cookies-int .main-block .title {
    font-size: 1rem;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: .5rem
}

.cookies-int .main-block .text-approval {
    font-size: .75rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.03rem
}

.cookies-int .main-block .option-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cookies-int .main-block .option-header .title {
    font-size: 1em
}

.cookies-int .main-block .info-table {
    margin-top: .5em;
    border-collapse: collapse;
    display: none;
    width: 100%;
    font-size: .75rem
}

.cookies-int .main-block .info-table.visible {
    display: table
}

.cookies-int .main-block .info-table th,.cookies-int .main-block .info-table td {
    border: .0625em solid #496980;
    border-radius: .375em;
    padding: .5em;
    text-align: -webkit-center
}

.cookies-int .main-block .info-table th.no-padding,.cookies-int .main-block .info-table td.no-padding {
    padding-left: 0!important;
    padding-right: 0!important
}

.cookies-int .main-block .info-table th.no-padding span,.cookies-int .main-block .info-table td.no-padding span {
    width: 100%;
    display: block;
    padding: .25em .5em;
    border-bottom: .0625em solid #496980
}

.cookies-int .main-block .info-table th.no-padding span:first-child,.cookies-int .main-block .info-table td.no-padding span:first-child {
    padding-top: 0
}

.cookies-int .main-block .info-table th.no-padding span:last-child,.cookies-int .main-block .info-table td.no-padding span:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.cookies-int .main-block .text {
    display: none;
    overflow: auto;
    height: 11.5rem;
    padding-left: .44rem;
    padding-right: .625rem
}

.cookies-int .main-block .text.chosen {
    display: block
}

.cookies-int .main-block .text::-webkit-scrollbar {
    opacity: .1;
    background: transparent;
    width: .375rem;
    height: 1rem;
    right: .5rem;
    border-radius: .375rem;
    border: .125rem solid rgba(0,255,0,.5)
}

.cookies-int .main-block .text::-webkit-scrollbar-track {
    background-color: #bfd5ff00;
    border-radius: .375rem
}

.cookies-int .main-block .text::-webkit-scrollbar-thumb {
    background-color: #00e500;
    border-radius: .375rem;
    width: .125rem;
    border: .06rem solid black
}

.cookies-int .main-block .text .details-option {
    margin-bottom: 1.375em
}

.cookies-int .main-block .text .details-option .details-settings {
    display: flex;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    align-items: center;
    cursor: pointer;
    opacity: 1;
    transition: .3s ease;
    margin-top: .125em
}

.cookies-int .main-block .text .details-option .details-settings .arrow-details {
    background: url("data:image/svg+xml,%3csvg%20width='8'%20height='8'%20viewBox='0%200%208%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0.195262%201.86128C0.455612%201.60093%200.877722%201.60093%201.13807%201.86128L4%204.72321L6.86193%201.86128C7.12228%201.60093%207.54439%201.60093%207.80474%201.86128C8.06509%202.12163%208.06509%202.54374%207.80474%202.80409L4.4714%206.13742C4.21106%206.39777%203.78895%206.39777%203.5286%206.13742L0.195262%202.80409C-0.0650874%202.54374%20-0.0650874%202.12163%200.195262%201.86128Z'%20fill='white'/%3e%3c/svg%3e") no-repeat center center;
    height: .5em;
    width: 1em;
    margin-left: .125em;
    transition: transform .3s ease-in-out 0s;
    transform: rotate(0)
}

.cookies-int .main-block .text .details-option .details-settings.active .arrow-details {
    transform: rotate(180deg)
}

.cookies-int .main-block .text.info a,.cookies-int .main-block .more-info,.cookies-int .main-block .decline-cookies {
    color: #fff;
    text-decoration: none;
    transition: .3s ease;
    cursor: pointer
}

.cookies-int .main-block .text.info a:hover,.cookies-int .main-block .more-info:hover,.cookies-int .main-block .decline-cookies:hover {
    opacity: 1
}

.cookies-int .buttons-block {
    display: flex;
    margin-left: .562rem;
    gap: .562rem;
    margin-right: .562rem;
    cursor: pointer;
    color: #fff
}

.cookies-int .buttons-block div {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: .75rem;
    padding: .125rem;
    border-radius: .375rem;
    text-shadow: 0 .06rem 0 #000;
    cursor: pointer;
    width: 100%;
    height: 3rem;
    z-index: 1
}

.cookies-int .buttons-block div span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#999,#666,#4d4d4d,#333,#666);
    border: .125rem solid black;
    border-radius: .375rem
}

.cookies-int .buttons-block div:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: calc(99% + .12rem);
    height: calc(93% + .12rem);
    border-radius: .375rem;
    background: linear-gradient(180deg,#ffffff40,#fff);
    z-index: -1
}

.cookies-int .buttons-block div.agree span {
    background: linear-gradient(180deg,#60bf60,#408040,#363,#1e4c1e,#3d663d)
}

.cookies-int .buttons-block div.agree:hover {
    filter: brightness(1)
}

.cookies-int .buttons-block div:hover {
    filter: brightness(1.1)
}

.cookies-int .info-text {
    position: relative
}

.cookies-int .info-text:hover,.cookies-int .info-text.active {
    opacity: 1
}

.cookies-int .info-text .text-approval {
    margin-bottom: .375rem;
    padding-right: 2rem
}

.cookies-int .save-settings {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-family: Open Sans,serif;
    font-style: normal;
    font-weight: 600;
    font-size: .75rem;
    line-height: 1.125em;
    transition: .3s ease;
    border-radius: .375rem;
    text-shadow: 0 .06rem 0 #000;
    cursor: pointer;
    color: #fff;
    width: 100%;
    height: 3rem;
    margin-bottom: .125em;
    z-index: 1
}

.cookies-int .save-settings span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#999,#666,#4d4d4d,#333,#666);
    border: .125rem solid black;
    border-radius: .375rem
}

.cookies-int .save-settings:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% + .12rem);
    height: calc(100% + .12rem);
    border-radius: .375rem;
    background: linear-gradient(180deg,#ffffff40,#fff);
    z-index: -1
}

.cookies-int .save-settings:hover {
    filter: brightness(1.1)
}

.cookies-int .toggle-button {
    position: relative;
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3csvg%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0.5'%20y='0.5'%20width='29'%20height='29'%20rx='6.5'%20fill='url(%23paint0_linear_32466_99370)'/%3e%3crect%20x='0.5'%20y='0.5'%20width='29'%20height='29'%20rx='6.5'%20stroke='url(%23paint1_linear_32466_99370)'/%3e%3crect%20x='3.5'%20y='3.5'%20width='23'%20height='23'%20rx='3.5'%20fill='url(%23paint2_linear_32466_99370)'/%3e%3crect%20x='3.5'%20y='3.5'%20width='23'%20height='23'%20rx='3.5'%20stroke='url(%23paint3_linear_32466_99370)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_32466_99370'%20x1='15'%20y1='1'%20x2='15'%20y2='29'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0.5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_32466_99370'%20x1='15'%20y1='1'%20x2='15'%20y2='29'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='white'%20stop-opacity='0.25'/%3e%3cstop%20offset='1'%20stop-color='white'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_32466_99370'%20x1='15'%20y1='3'%20x2='15'%20y2='27'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23999999'/%3e%3cstop%20offset='0.25'%20stop-color='%23666666'/%3e%3cstop%20offset='0.5'%20stop-color='%234D4D4D'/%3e%3cstop%20offset='0.75'%20stop-color='%23333333'/%3e%3cstop%20offset='1'%20stop-color='%23666666'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_32466_99370'%20x1='15'%20y1='3'%20x2='15'%20y2='27'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='white'%20stop-opacity='0.5'/%3e%3cstop%20offset='1'%20stop-color='white'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: body 3s ease;
    cursor: pointer
}

.cookies-int .toggle-button.on {
    background-image: url("data:image/svg+xml,%3csvg%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0.5'%20y='0.5'%20width='29'%20height='29'%20rx='6.5'%20fill='url(%23paint0_linear_10_42)'/%3e%3crect%20x='0.5'%20y='0.5'%20width='29'%20height='29'%20rx='6.5'%20stroke='url(%23paint1_linear_10_42)'/%3e%3crect%20x='3.5'%20y='3.5'%20width='23'%20height='23'%20rx='3.5'%20fill='url(%23paint2_linear_10_42)'/%3e%3crect%20x='3.5'%20y='3.5'%20width='23'%20height='23'%20rx='3.5'%20stroke='url(%23paint3_linear_10_42)'/%3e%3cg%20filter='url(%23filter0_d_10_42)'%3e%3cpath%20d='M13%2020L7%2014H10L13%2017L20%2010H23L13%2020Z'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_10_42'%20x='7'%20y='7'%20width='16'%20height='17'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='1'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_10_42'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_10_42'%20result='shape'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_10_42'%20x1='15'%20y1='1'%20x2='15'%20y2='29'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0.5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_10_42'%20x1='15'%20y1='1'%20x2='15'%20y2='29'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='white'%20stop-opacity='0.25'/%3e%3cstop%20offset='1'%20stop-color='white'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_10_42'%20x1='15'%20y1='3'%20x2='15'%20y2='27'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23999999'/%3e%3cstop%20offset='0.25'%20stop-color='%23666666'/%3e%3cstop%20offset='0.5'%20stop-color='%234D4D4D'/%3e%3cstop%20offset='0.75'%20stop-color='%23333333'/%3e%3cstop%20offset='1'%20stop-color='%23666666'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_10_42'%20x1='15'%20y1='3'%20x2='15'%20y2='27'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='white'%20stop-opacity='0.5'/%3e%3cstop%20offset='1'%20stop-color='white'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center
}

.cookies-int .toggle-button.on.default {
    opacity: .3;
    pointer-events: none
}

@media (max-width: 1024px) {
    .cookies-int {
        bottom:1rem
    }

    .cookies-int .cookie-main-title {
        font-size: .75rem;
        width: 9rem
    }

    .cookies-int .heading .option {
        width: 6rem;
        font-size: .625rem
    }

    .cookies-int .main-block .title {
        font-size: .875rem
    }

    .cookies-int .main-block .text-approval {
        font-size: .625rem
    }

    .cookies-int .info-table th,.cookies-int .info-table td {
        font-size: .6rem
    }

    .cookies-int .buttons-block div {
        height: 2.5rem
    }

    .cookies-int .save-settings {
        font-size: .875rem;
        height: 2.5rem
    }

    .cookies-int .buttons-block {
        height: 2.5rem
    }
}

@media (max-width: 768px) {
    .cookies-int {
        width:95%;
        padding-bottom: .25rem
    }

    .cookies-int .cookie-main-title {
        font-size: .6875rem;
        width: 8rem
    }

    .cookies-int .heading .option {
        width: 5rem;
        font-size: .5625rem
    }

    .cookies-int .main-block {
        height: auto;
        padding: .125rem
    }

    .cookies-int .main-block .title {
        font-size: .8125rem
    }

    .cookies-int .main-block .text-approval {
        font-size: .5625rem
    }

    .cookies-int .info-table th,.cookies-int .info-table td {
        font-size: .7rem
    }

    .cookies-int .buttons-block div {
        height: 2.25rem
    }

    .cookies-int .save-settings {
        font-size: .8125rem;
        height: 2.5rem;
        margin-bottom: .3rem
    }

    .cookies-int .buttons-block {
        height: 2.5rem
    }
}

@media (max-width: 480px) {
    .cookies-int {
        width:95%;
        bottom: .5rem;
        padding-bottom: .125rem
    }

    .cookies-int .cookie-main-title {
        font-size: .625rem;
        width: 6.5rem
    }

    .cookies-int .heading .option {
        width: 4.5rem;
        font-size: .5rem
    }

    .cookies-int .main-block {
        height: auto;
        padding: .0625rem
    }

    .cookies-int .main-block .title {
        font-size: .75rem
    }

    .cookies-int .main-block .text-approval {
        font-size: .5rem;
        padding-right: 2.5rem
    }

    .cookies-int .info-table th,.cookies-int .info-table td {
        font-size: .5rem
    }

    .cookies-int .buttons-block div {
        height: 2rem
    }

    .cookies-int .save-settings {
        font-size: .75rem;
        height: 2rem
    }

    .cookies-int .buttons-block {
        height: 2.2rem
    }

    .cookies-int .toggle-button {
        width: 1.5rem;
        height: 1.5rem
    }
}

.faq-section {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    font-family: "Sans", sans-serif;
  }
  
  .faq-title {
    font-size: 2rem;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .faq-item {
    margin-bottom: 15px;
  }
  
  .faq-question {
    font-size: 1.25rem;
    color: #00e500;
    margin-bottom: 5px;
  }
  
  .faq-answer {
    font-size: 1rem;
    color: #fff;
  }
  
  .faq-answer a {
    color: #00e500;
    text-decoration: none;
  }
  
  .faq-answer a:hover {
    text-decoration: underline;
  }
  
  .language-button {
    position: absolute;
    top: 20px;
    right: 80px;
    width: 40px;
    cursor: pointer;
    transition: filter 0.3s ease;
  }
  
  .language-button:hover img {
    filter: brightness(1.2);
  }
  
  .language-icon {
    width: 100%;
  }
  