:root {
    --general-color-1: #D9D9D9;

    --dark-theme-color-1: #67858D;
    --dark-theme-color-2: #3B4852;

    --light-theme-color-1: #3B4852;
    --light-theme-color-2: #67858D;
    
    --car-theme-color-1: #3B4764;
    --car-theme-color-2: #1C2532;

    --nature-theme-color-1: #809076;
    --nature-theme-color-2: #284239;

    --food-theme-color-1: #6B3511;
    --food-theme-color-2: #281507;

    --cloth-theme-color-1: #3A4A54;
    --cloth-theme-color-2: #0D2027;
}
html, body{
    height: 100%;
    background: var(--dark-theme-color-2);
}
.wrapper{
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 150px;
    font-family: "Jura", sans-serif;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--general-color-1);
}
.header{
    padding: 25px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 15px;
    background-color: var(--dark-theme-color-1);
}
.buttons {
    display: flex;
    gap: 0.3em;
    width: 170px;
}
.block {
    display: flex;
    flex-direction: column;
    padding: 0.3em 0.1em;
    border-radius: 7.5px;
    text-align: center;
    justify-content: center;
    transition-duration: .5s;
}
.exit-button {
    padding: .5em 3em;
}
a {
    transition-duration: .5s;
}
.block:hover,a:hover{
    opacity:.5;
    cursor: pointer;
}
.block-1 {
    background: var(--general-color-1);
    color: var(--dark-theme-color-2);
}
.block-2 {
    color: var(--general-color-1);
    border: 1px solid var(--general-color-1);
}
.block-3 {
    background: var(--dark-theme-color-1);
    color: var(--general-color-1);   
}
.block-4 {
    background: var(--dark-theme-color-1);
    color: var(--general-color-1);   
}
.text-1 {
    font-size: 30px;
}
.text-2 {
    font-size: 15px;
}
.text-3 {
    font-size: 10px;
}
.lang-switcher,.theme-switcher {
    width: 80px;
}
.profile {
    width: 170px;
    display: flex;
    justify-content: end;
}
.profile-info {text-align:center;}
.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.main {
    flex: 1 1 auto;
    width: 100%;
    max-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    gap:4em;
    padding:4em;
}
.start-block,.blitz-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 1.3em;
    width: 45em;
}
.blitz-block{
    height:100%;
    width:75%;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    gap:4em
}
.blitz-head {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    gap:10px
}
.case-parameters{
    display: flex;
    gap:10px;
}
.blitz-area{
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center; 
   gap:1em;
}
.case-content{
    padding: 3em 2em;
    line-height:2em;
}
.case-content:hover{opacity: 1;}
.case-buttons {
    display: flex;
    justify-content: center;
    gap: .5em;
}
.case-buttons .block, .blitz-exit .block {
    padding: .5em 3em;
}
h1, .start-block h1 span, .start-block p, .blitz-head {
    letter-spacing: .5em;
    text-align:center;
}
.text-mark{
    color: var(--dark-theme-color-1);
}
.start-block div{
    min-width: 75px;
    padding: 0.5em 0;
}
.sections{
    flex: 1 1 auto;
    width: 45em;
    display:grid;
    justify-content: center;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(2, 50%);
    gap: 15px;
}
.footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.links {
    display:flex;
    align-items:center;
}
.info {
    display:flex;
    justify-content:end;
    align-items:center;
}
.links a,.info a {
    display:flex;
    gap:0.5em;
    align-items:center;
    padding:1em;
}
.links a img,.info a img{
    width:1.3em;
}

@media (max-width: 950px) {
    .wrapper { padding: 10px 15px; }
    .header { padding: 10px 15px; }
    .text-1 { font-size: 15px; }
    .text-2 { font-size: 10px; }
    .text-3 { font-size: 7.5px; }
    .buttons, .profile { max-width: 100px; }
    .lang-switcher,.theme-switcher { max-width: 50px; }
    .logo img {width: 20px;}
    .main{padding:30px 0; gap:30px;}
    .start-block{width: 100%;}
    .sections{
        width: 100%;
        gap:5px;
        grid-template-columns: repeat(2, 150px);
        grid-template-rows: repeat(4, 1fr);
    }
    .blitz-block, .blitz-head{width:100%;}
    .blitz-block{gap:3em;}
    .case-parameters{letter-spacing: .05em;}
    .case-content{padding:1em .5em;}
}

.no-select {  
    -webkit-user-select: none; /* Chrome/Safari */  
    -moz-user-select: none; /* Firefox */  
    -ms-user-select: none; /* IE/Edge */  
    user-select: none; /* Стандартный синтаксис */  
}