html, body, header, footer, aside, div, span, a, h1,h2,h3,h4,h5,h6,p,tr,td
{
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.font {
    font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
footer a {
    transition: 0.4s;
}
a {
    all: unset;
}
.block_link {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
}
:root {
    --first-black: #050505;
    --second-black: #121212;
    --third-black: #1a1a1a;
    --fourth-black: #212121;
    
    --main-color: #FF073A;
    --second-color: #FFD700;
    --third-color: rgba(255,255,255,0.7);
}
.big {
    max-width: 128px;
    max-height: 128px;
}
.medium-big {
    max-height: 96px;
    max-width: 96px;
}
.medium {
    max-width: 64px;
    max-height: 64px;
}
.small {
    max-width: 32px;
    max-height: 32px;
}
.medium-small {
    max-height: 48px;
    max-width: 48px;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background:
    url(/images/backgrounds/main/phone.png) repeat-y,
    url(/images/backgrounds/main/phone2.png) repeat-y right,
        linear-gradient(to right, #050505);
    /*  background: repeating-linear-gradient(-5deg, #050505,#050505 280px,#141414 280px,#141414 560px); */
    /*  background: linear-gradient(#050505), url(images/pattern.png); */
    /*  background: #050505; */
    position: relative;
    color: white;
    gap:64px;
}
.header {
    display: flex;
    flex-direction: row;
    gap: 24px;
    position: relative;
    padding: 16px;
    justify-content: center;
    align-items: center;
}
.header_block {
    width:max-content;
    height: max-content;
}
.header_nav {
    font-size: 1.5rem;
    font-weight: 600;
    transition: 0.2s;
    padding: 4px 12px;
    
}
.logo_container {
    width: max-content;
    height: max-content;
    max-width: 256px;
    max-height: 256px;
}
.header_decoration {
    position: absolute;
    bottom:0;
    width:256px;
    height:64px;
    left:10px;
}
.header_decoration_second {
    position: absolute;
    bottom:0;
    width:256px;
    height:64px;
    right:10px;
    transform: scaleX(-1);
}
.footer {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    gap:32px;
    padding:32px 16px;
    background-color: var(--main-color);
}
.footer_block {
    display: flex;
    flex-direction: column;
    width: max-content;
    gap:32px;
}
.footer_info_container {
    display: flex;
    flex-direction: column;
    width: max-content;
    gap:12px;
}
.footer_info_container_name {
    font-size: 1.5rem;
    font-weight: 600;
    width: max-content;
    height: max-content;
}
.footer_info_container_content {
    display: flex;
    flex-direction: column;
    gap:4px;
    width: max-content;
}
.footer_info_row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap:8px;
}
.footer_info {
    font-size: 1.25rem;
    flex-grow: 1;
    color: var(--third-color);
}
.footer_logo_container {
    display: flex;
    flex-direction: row;
    gap:12px;
    align-items: center;
}
.copyright_container {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    color: var(--third-color);
    font-size: 0.75rem;
}
.page_content_container {
    display: flex;
    flex-direction: column;

    align-content: center;
    align-items: center;
    
    width: 100%;
    min-height: 90vh;
}

.page_content_block {
    display: flex;
    flex-direction: column;
    width:80%;
    border-left: 4px solid var(--main-color);
    border-right: 4px solid var(--main-color);
    height: max-content;
    padding: 32px;
    justify-content: center;
    align-items: center;
    gap:32px;
}

.hot_content_block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 70%;
    aspect-ratio: 16 / 7;
    border-radius: 4px;
    border: 1px solid var(--fourth-black);
    padding: 24px;
    font-size: 2rem;
    font-weight: 600;
    transition: 0.4s;
    position: relative;
}

.content_block {
    display: flex;
    flex-direction: row;
    gap:32px;
    width: 100%;
    justify-content: center;
}

.main_content_block {
    display: flex;
    flex-direction: column;
    gap:32px;
    flex-grow: 1;
}

.match_list_container {
    display: flex;
    flex-direction: column;
    gap:24px;
    width: 100%;
}

.match_list_block {
    background-color: var(--second-black);
    border-radius: 8px;
    border:1px solid var(--third-black);
    padding: 24px;
    width:100%;
    display: flex;
    flex-direction: column;
    gap:24px;
    
}

.match_list_name {
    font-size: 1.5rem;
    color: var(--main-color);
}

.match_list {
    display: flex;
    flex-direction: column;
    gap:16px;
    width:100%;
}

.match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding:8px;
    border-left: 1px solid red;
    border-right: 1px solid red;
    background: linear-gradient(to right, rgba(255,0,0,0.3),rgba(255,0,0,0.2)50%, rgba(255,0,0,0.3)100%);
    gap:32px;
    position: relative;
}

.match_content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    gap:8px;
}
.match_contents {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: max-content;
    gap:8px;
}

.score {
    font-size: 2rem;
    font-weight: 600;
}

.aside_content_block {
    display: flex;
    flex-direction: column;
    gap:24px;
    min-width: 420px;
}

.main_news_aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 4px;
    border: 1px solid var(--fourth-black);
    padding: 12px;
    background:radial-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.6)),
        url(images/brimstone-and-omen-wallpapers-v0-vpbk09v68cv41.png);
    background-size: cover;
    font-size: 1.25rem;
    font-weight: 400;
    position: relative;
    transition: 0.4s;
}

.news_aside_block {
    width:100%;
    display: flex;
    flex-direction: column;
    gap:12px;
}

.small_news_aside {
    display: flex;
    flex-direction: row;
    gap:12px;
    width: 100%;
    
}

.small_news {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
    aspect-ratio: 16 / 12;
    border-radius: 4px;
    border: 1px solid var(--fourth-black);
    padding: 12px;
    background-size: cover;
    font-size: 1.25rem;
    font-weight: 400;
    position: relative;
    transition: 0.4s;
}

.rating_aside_block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:24px;
}

.aside_rating_table {
    width: 100%;
    text-align: left;
    table-layout: auto;
    border-collapse: collapse;
}
.aside_rating_table caption {
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 8px;
    color:var(--main-color);
}
.aside_rating_table td {
    text-align: left;
    padding:8px;
    font-size: 1.25rem;
    border-bottom: 1px solid #1a1a1a;
}
.aside_rating_table tr:nth-child(odd) {
    background-color:#121212;
}

.last_stroke_aside_table {
    font-size: 1rem;
    color: var(--main-color);
}
.last_stroke_aside_table td {
    border-bottom: 0;
}

.match_info_content {
    position: absolute;
    top:8px;
    left: 8px;
    font-size: 0.75;
    color: var(--third-color);
}

.winner_score {
    color:var(--second-color);
}

.match_info_content_complete {
    position: absolute;
    top:8px;
    right:8px;
    padding:8px;
    background-color: #121212;
    border-radius: 8px;
    border:1px solid #1a1a1a;
    transition: 0.1s;
}

.comands_container {
    display: flex;
    flex-direction: column;
    gap:32px;
    width:90%;
}

.commands_list_block {
    display: flex;
    flex-direction: column;
    gap:24px;
    padding:24px;
    background-color:var(--second-black);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
}

.command_list_name {
    font-size: 2rem;
    font-weight: 400;
    color: var(--main-color);
    width:max-content;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--third-black);
    width: 100%;
    text-align: center;
}

.command_list {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
    width: 100%;
    gap:16px;
    
}

.command_card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    padding: 16px 16px;
    font-size: 2rem;
    gap:8px;
    box-shadow: 0 0 2px 2px rgba(255,0,0,0.2);
    justify-content: center;
    flex-grow: 1;
    max-width: 320px;
    transition: 0.3s;
    aspect-ratio: 2/1;
}
.sorte {
    text-align: center;
}
.command_card_info {
    display: flex;
    flex-direction: row;
    gap:16px;
    justify-content: flex-start;
    align-items: center;
    overflow-wrap: break-word;
    height: 100%;
}
.command_card_info p {
    overflow-wrap: break-word;
    font-size: 1.5rem;
}

.main_table {
    overflow-x: auto;
    font-size: 1rem;
    color:white;
    width: 100%;
    border-collapse: collapse;
    text-align:left;
}
.main_table thead {
    border-left: 1px solid var(--main-color);
    border-right: 1px solid var(--main-color);
    background: linear-gradient(to right, rgba(255,0,0,0.2),rgba(255,0,0,0.1),rgba(255,0,0,0.2));
}
.main_table th {
    padding: 12px;
    color: rgba(255,255,255,0.7);
}
.main_table td {
    padding:12px;
}
.main_table tbody tr:nth-child(odd) {
    background-color:#1a1a1a;
}

.double_rating_box {
    display: flex;
    flex-direction: row;
    gap:8px;
    align-items: center;
}
.sorte_box {
    justify-content: center;
}

.page_document_block {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-size:1.25rem;
    gap:16px;
    flex-wrap: wrap;
}

.first_stroke {
    font-size: 1.5rem;
    font-weight: 600;
    color:var(--main-color);
}

.news_page_container {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap:32px;
    justify-content: center;
    align-items: center;
    background-color: var(--second-black);
    padding: 32px;
    border-radius: 8px;
}

.news_page_lsit {
    display: grid;
    gap: 16px;
    width:100%;
    grid-template-columns: repeat(3, 1fr);
}

.news_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 25%;
    aspect-ratio: 5 / 3;
    border-radius: 4px;
    border: 1px solid var(--fourth-black);
    padding: 24px;
    font-size: 1.5rem;
    font-weight: 600;
    position: relative;
    word-break: break-all;
    transition: 0.4s;
}

.hot_content_block_news_page {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 4px;
    border: 1px solid var(--fourth-black);
    padding: 24px;
    font-size: 2rem;
    font-weight: 600;
    position: relative;
    transition: 0.4s;
}

.news_content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width:100%;
}

.news_name {
    font-size: 2rem;
    font-weight: 600;
    color: var(--main-color);
    text-align: left;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--third-black);
}

.news_image_and_date {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 4px;
    border: 1px solid var(--fourth-black);
    padding: 24px;
    font-size: 2rem;
    font-weight: 600;
}

.news_text {
    font-size: 1.25rem;
}

.main_comand_card {
    display: flex;
    flex-direction: column;
    gap:16px;
    padding: 32px;
    border-left: 1px solid var(--main-color);
    background: linear-gradient(to right, rgba(255,0,0,0.2),rgba(255,0,0,0.2)60%,rgba(255,0,0,0)95%);
}

.command_name_and_logo {
    display: flex;
    flex-direction: row;
    font-size: 2.25rem;
    gap:16px;
    align-items: center;
    
}

.stat_list {
    display: flex;
    flex-direction: row;
    gap:12px;
    border-bottom: 1px solid var(--main-color);
    width: 100%;
    justify-content: center;
    padding-bottom: 8px;
}

.stat {
    display: flex;
    flex-direction: column;
    font-size:1rem;
    color:rgba(255,255,255,0.7);
    width: max-content;
    text-align: center;
    align-items: center;
    gap:4px;
}
.stat p:nth-child(2) {
    font-size: 1.25rem;
    color: white;
}

.player_card {
    display: flex;
    flex-direction: column;
}
.players_card_container {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.player_photo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 4/2 ;
    gap:4px;
    font-size: 1rem;
    font-weight: 600;
    align-items: center;
    padding: 8px;
    border: 1px solid (--third-black);
    border-right: 0;
    word-break: break-all;
}

.player_stat {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    border: 1px solid var(--main-color);
    border-top: 0;
    background: linear-gradient(to right,rgba(255,0,0,0), rgba(255,0,0,0.2)40%,rgba(255,0,0,0.2)60%,rgba(255,0,0,0)95%);
    padding: 16px;
    gap:8px;
    align-items: center;
}

.dop {
    margin-bottom: 8px;
}

.main_content_block_comand {
    display: flex;
    flex-direction: column;
    gap:32px;
}

.aside_content_block_comand {
    display: flex;
    flex-direction: column;
    gap:24px;
    min-width: 420px;
    flex-grow: 1;
}

.match_page_block {
    width:90%;
    display: flex;
    flex-direction: column;
    gap:32px;
    padding: 16px;
    
}

.commands_players {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:128px;
}

.match_content_tounament {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:16px;
    font-size: 2rem;
}

.score_stat_box {
    display: flex;
    flex-direction:column;
    width: 100%;
    gap:64px;
    justify-content: center;
    align-items: center;
}

.all_maps {
    display: flex;
    flex-direction: row;
    width:80%;
    gap:128px;
    justify-content: center;
    align-items: center;
}

.map {
    padding: 64px;
    background: url(images/brimstone-and-omen-wallpapers-v0-vpbk09v68cv41.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.score_box {
    width:100%;
}

.player_box {
    display: flex;
    flex-direction: row;
    gap:16px;
    align-items: center;
}

.match_table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
.match_table thead {
    padding: 4px;
    font-size: 1.25rem;
    color:rgba(255,255,255,0.7);
    background-color: var(--third-black);
}
.match_table th {
    border-bottom: 1px solid var(--third-black);
    padding:8px;
}
.match_table td {
    padding: 8px;
    font-size: 1rem;
    background-color: rgba(255,0,0,0.2);
}
.enemy td {
    background-color: rgba(0,255,0,0.2);
}
.map {
    display: flex;
    flex-direction: column;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
}
.map_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:16px;
}
.customiframe {
    width:70%;
    max-width: 70%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;

}
@media (max-width: 1400px) { 
    .command_name_hide {
        display: none;
    }
}
@media (max-width: 1000px) { 
    .content_block {
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    .page_content_block {
        width:95%;
    }
    .hot_content_block {
        width: 100%;
    }
    .content_block {
        flex-direction: column;
    }
    .footer {
        flex-direction: column;
    }
    .main_table {
        max-width: 100%;
        overflow-x:auto;
    }
    .page_document_block {
        font-size: 1rem;
    }
    .news_page_container {
        padding: 8px;
        width: 100%;
    }
    .customiframe {
    width:80%;
    max-width: 80%;
}
}
@media (max-width: 480px) {
    .page_content_block {
        width:95%;
        border:0;
        padding: 8px;
    }
    .news_page_lsit {
        grid-template-columns: repeat(1, 1fr);
    }
    .command_name_hide {
        display: none;
    }
    .match_list_block {
        padding:8px;
    }
    .match_info_content {
        position: relative;
        top: 0;
        left:0;
    }
    .match {
        flex-wrap: wrap;
    }
    .aside_content_block {
        min-width: 26px;
    }
    .footer {
        padding: 4px;
    }
    .footer_block {
        flex-wrap: wrap;
    }
    .header {
        flex-direction: column;
    }
    .footer_info {
        font-size: 0.75rem;
    }
    .medium-big {
        max-width: 64px;
        max-height: 64px;
    }
    .footer_info_container_name {
        font-size: 1rem;
    }
    .comands_container {
        width: 100%;
    }
    .commands_list_block {
        padding: 8px;
    }
    .command_card {
        padding: 8px;
        max-width: 100%;
    }
    .news_page_container {
        background-color: rgba(0,0,0,0);
    }
    .command_list {
        grid-template-columns: repeat(1, 1fr);
    }
    .customiframe {
    max-width: 90%;
    }
}