@import url('https://fonts.googleapis.com/css?family=Audiowide');
.head {
    display: flex;
}
.statistic {
    font-size: 2.0rem;
    width: 370px;
    height: 90px;
    padding: 10px 10px 10px 10px;
    float: inline-end;
    margin-inline-start: 30%;
    margin-top: 50px;
    border: thick double #019262;
    border-radius: 10px;
}
.statistic p {
    display: ruby;
    align-items: center;
    justify-content: center;
    
}
#counts {

    font-family: 'Audiowide';}

.third-level-menu
{
    position: absolute;
    top: 0;
    right: -329px;
    width: 330px;
    /* width: intrinsic; Safari/WebKit используют нестандартное имя
    width: -moz-max-content; Firefox/Gecko
    width: -webkit-max-content; Chrome */
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;   
    word-break: keep-all;
    overflow-wrap: break-word; /*Mozilla */
    overflow: auto;
    max-height: 480px;
}

.third-level-menu-second
{
    position: absolute;
    top: -30px;
    right: -329px;
    width: 330px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;   
    word-break: keep-all;
    overflow-wrap: break-word; /*Mozilla */
    overflow: auto;
    max-height: 480px;
}

.third-level-menu-third
{
    position: absolute;
    top: -30px;
    right: -329px;
    width: 330px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;   
    word-break: keep-all;
    overflow-wrap: break-word; /*Mozilla */
    overflow: auto;
    max-height: 480px;
}

.third-level-menu-before-last
{
    position: absolute;
    top: -210px;
    right: -329px;
    width: 330px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    word-break: keep-all;
    overflow-wrap: break-word; /*Mozilla */
}

.third-level-menu-last
{
    position: absolute;
    top: -450px;
    right: -329px;
    width: 330px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    word-break: keep-all;
    overflow-wrap: break-word; /*Mozilla */
    overflow: auto;
    max-height: 480px;
}

.third-level-menu > li, .third-level-menu-before-last > li, .third-level-menu-last > li, .third-level-menu-second > li, .third-level-menu-third > li
{
/*     height: 30px;
    max-height: 60px; */
    min-height: 30px;
    background: #999999;
    padding: 0 10px 0 0;
    
}
.third-level-menu > li:hover { background: #CCCCCC; }
.third-level-menu-second > li:hover { background: #CCCCCC; }
.third-level-menu-third > li:hover { background: #CCCCCC; }
.third-level-menu-before-last > li:hover { background: #CCCCCC; }
.third-level-menu-last > li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    max-width: 350px;
/*     width: 150px; */
    width: intrinsic; /* Safari/WebKit используют нестандартное имя */ 
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    word-break: keep-all;
    overflow-wrap: break-word; /*Mozilla */
}

.second-level-menu > li
{
    position: relative;
    min-height: 30px;
    background: #999999;
    padding: 0 10px 0 0;
}
.second-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }



/* Блок с кнопками */
.social {display: inline-block;}
.social a {
	display: table;
	width: 48px;
	height: 48px;
	margin: 0 10px 10px 0;
	text-align: center;
	color: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4), inset 1px 1px 0px rgba(255,255,255,0.5);
    
}

.social a:hover {
	border-color: #888;
	opacity: .8;
}
.social svg {
	margin-top: 7px;
	width: 32px;
	height: 32px;
}
.DNS_Club img {
  width: 176px;
  height: 29px;
  margin-top: 10px;
}
.discord a {background: #7289da}
.email a {background: #5bc7ff}
.facebook a {background: #3b5998}
.github a {background: #191919}
.google a {background: #e34133}
.odnoklassniki a {background: #f93}
.skype a {background: #00aff0}
.steam a {background: #30445d}
.telegram a {background: #249bd7}
.twitter a {background: #00acee}
.viber a {background: #7b519d}
.vimeo a {background: #5bc7ff}
.vk a {background: #4a76a8}
.windows a {background: #125acd}
.youtube a {background: #c4302b}
.DNS_Club a {background: #4e4e4e; width: 192px; padding-left: 2px}
.IXBT_live a {background: #00a86b; width: 48px; height: 48px; }
.IXBT_live svg {width: 126px; height: auto; margin-top: 1px; margin-bottom: -5px; padding-left: 1px;}
.dzen a {background: #FFFFFF; justify-content: center; text-align: center}
.dzen img {width: 120px; height: auto; margin-top: 1px; border-radius: 6px; margin-bottom: -4px; padding-left: 2px;}
.dzen svg {width: auto; height: auto; margin-top: 1px; margin-bottom: -5px; padding-left: 1px;}
.mysku a {background: #4d4d93; justify-content: center; text-align: center}
.mysku svg {width: auto; height: auto; margin-top: 1px; margin-bottom: -5px; padding-left: 1px; border-radius: 6px;}
.mysku2 a {background: #4d4d93; justify-content: center; text-align: center}
.mysku2 img {width: 168px; height: auto; margin-top: 1px; border-radius: 6px; margin-bottom: -4px; padding-left: 2px;}


.common {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: left;
    /*align-items: center;
    min-height: 100vh;
    background-color: #f4f4f9;*/
}

header {
    text-align: center;

    display: grid;
    width: 80%;
    max-width: 1000px;
}

.container {
    display: flex;
    justify-content: space-evenly;
    /*justify-content: space-between;*/
    width: 80%;
    max-width: 1000px;
}

.block {
    width: 30%;
    max-height: 250px;
    background-color: #ffffff91;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.block:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.block a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 20px;
}

.block img {
    width: 100%;
    height: auto;
    display: block;
}

.block h3 {
    margin: 10px 0;
    font-size: 1.2em;
    font-style: bold;
    color: #333;
}

.block p {
    font-size: 1em;
    color: #666;
    padding: 0 10px;
}