@font-face {
    font-family: 'Minecraftia';
    src: url('fonts/Minecraftia-Regular.ttf');
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;

    background-image:
        url("images/stone.png"),
        linear-gradient(to bottom, #909fff 10%, rgb(208, 217, 255) 20%);
    background-repeat: repeat, no-repeat;
    background-size: 64px 64px, cover;
    background-blend-mode: overlay;
    background-attachment: fixed;
    image-rendering: pixelated;

    padding-bottom: 40px;
}


a {
    text-decoration: underline;
    text-underline-offset: -5px;
    text-decoration-thickness: 3px;
    color: #0000ff;
}
a:visited {
    color: #9d00ff;
}
a:hover {
    color: #ff6161;
}


.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 32pt;
    color: #ffffff;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000;
    font-family: 'Minecraftia';
    letter-spacing: -1px;
    gap: 10px;
}

.logo img{
    border: 2px solid black;
}



.about,
.news,
.rules,
.links,
.gallery {
    border: 2px solid black;
    font-family: "Minecraftia";
    font-size: 15px;
    margin-top: 10px;
    width: 100%;          
}


.about h2,
.news h2,
.rules h2,
.gallery h2,
.links h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1;
    height: 23px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 10px;
    padding-top: 6px;
    color: #fff;
}


.about h2 {
    border-bottom: 2px solid black;
}

.about h2  { background: #5476ff; }
.news h2   { background: rgb(255, 200, 0); }
.rules h2  { background: #ff5454; }
.gallery h2{ background: #16b900; }
.links h2  { background: #a454ff; }


.about   { background: white; }
.news    { background: rgb(255, 242, 190); }
.rules   { background: rgb(255, 220, 220); }
.links   { background: rgb(235, 222, 255); }
.gallery { background: rgb(213, 255, 207); image-rendering: auto; }


.about ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    text-align: center;
    line-height: 1.5;
}


.news table,
.rules table,
.links table,
.gallery table {
    border-collapse: collapse;
    width: 100%;
}
.news td,
.rules td,
.links td,
.gallery td {
    padding: 10px 10px 0;
    line-height: 1.5;
    border-top: 2px solid black;
    word-break: break-word;
    overflow-wrap: break-word;
}
.gallery td { text-align: center; }
.gallery img {
    display: block;
    margin: 0 auto 10px;
}
.links img {
    display: block;
    margin-bottom: 10px;
}


.top-panels {
    display: flex;
    flex-direction: column;
    width: min(700px, 95%);
}
.top-panels .about,
.top-panels .news {
    width: 100%;
    margin-top: 10px;
}


.main-content {
    display: flex;
    flex-wrap: wrap;          
    gap: 17px;
    width: min(700px, 95%);
    margin-top: 0;
    align-items: flex-start;
}


.left {
    display: flex;
    flex-direction: column;
    flex: 1 1 260px;
    min-width: 220px;
}


.main-content .gallery {
    flex: 1 1 260px;
    min-width: 220px;
    margin-top: 10px;
}


.article {
    font-family: "Minecraftia";
    font-size: 15px;
    width: min(600px, 95%);
}
.article h2 {
    background: rgb(255, 200, 0);
    margin: 0;
    font-size: 15px;
    line-height: 1;
    height: 23px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    padding-top: 6px;
    color: #000;
    border: 2px solid black;
}
.article ul {
    list-style: none;
    padding: 10px;
    margin: 0;
    text-align: center;
    line-height: 1.5;
    background: rgb(255, 242, 190);
    border: 2px solid black;
    border-top: none;
}
.article img {
    display: block;
    margin: 20px auto;
    border: black solid 2px;
    max-width: 100%;
    height: auto;
}
.article table {
    width: 100%;
    border-collapse: collapse;
    background: rgb(255, 200, 0);
    margin-bottom: 50px;
}
.article th,
.article td {
    padding: 10px;
    line-height: 1.5;
    border: 2px solid black;
}
.article th { background: rgb(255, 200, 0); color: #000; }


.pictures {
    font-family: "Minecraftia";
    font-size: 15px;
    width: min(600px, 95%);
}
.pictures h2 {
    background: #16b900;
    margin: 50px 0 0;
    font-size: 15px;
    line-height: 1;
    height: 23px;
    overflow: hidden;
    color: #fff;
    border: 2px solid black;
    border-bottom: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 6px;
}
.pictures table {
    width: 100%;
    border-collapse: collapse;
    background: rgb(213, 255, 207);
}
.pictures th,
.pictures td {
    padding: 10px;
    line-height: 1.5;
    border: 2px solid black;
    text-align: left;
}
.pictures th { background: #16b900; color: white; }
.pictures img {
    display: block;
    margin: 0 auto 10px;
    image-rendering: auto;
    border: 2px solid black;
    max-width: 100%;
    height: auto;
}