@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap');

body {
    background-image: url("https://i.ibb.co/20tCXCKH/image.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-color: #E6F0E9 !important;
    font-family: 'Comfortaa', cursive !important;
}

#pun {
    margin: 30px auto !important;
    float: none !important;
    padding: 25px !important;
    border: 2px solid #7C9E95 !important;
    width: 1000px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 40px !important;
    box-sizing: border-box !important;
}

#pun-title {
    height: 140px !important;
    background: url('https://i.ibb.co/wZ3mqdvT/image.png') no-repeat center !important;
    background-size: contain !important;
    display: block !important;
    margin: 0 auto 10px auto !important;
    border: none !important;
}

#pun-title * {
    display: none !important;
}

#pun-navlinks {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

#pun-navlinks h2 {
    display: none !important;
}

#pun-navlinks ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#pun-navlinks a {
    background: #ECF78F !important;
    color: #4A6B63 !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    border: 2px solid #7C9E95 !important;
    box-shadow: 0 4px 0px #7C9E95 !important;
    text-decoration: none !important;
    display: block !important;
}

.punbb h2, #pun-announcement h2 {
    background-color: #A9BDB1 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    text-transform: uppercase !important;
    border-radius: 20px !important;
    padding: 8px !important;
    margin: 15px 0 !important;
    border: none !important;
}

/* ÈÑÏÐÀÂËÅÍÈÅ ÒÀÁËÈÖ */
#pun-index .category tbody {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 10px 0 !important;
}

#pun-index .category tr {
    display: flex !important;
    width: 440px !important;
    background: #ECF78F !important;
    border-radius: 20px !important;
    border: 2px solid #7C9E95 !important;
    height: 85px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important; /* Äîáàâèëè îòñòóïû ïî áîêàì */
    box-sizing: border-box !important;
}

#pun-index .category td.tcl {
    border: none !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
}

#pun-index .category h3 a {
    color: #4A6B63 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* ÑÒÀÒÈÑÒÈÊÀ */
#pun-stats {
    text-align: left !important;
    margin-top: 20px !important;
}

#pun-stats h2 {
    background: transparent !important;
    color: #7C9E95 !important;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
}

#pun-stats li { 
    list-style: none !important; 
    color: #8DA8A1 !important;
    font-size: 12px !important; 
    margin: 4px 0 !important; 
}

/* ÑÊÐÛÂÀÅÌ ËÈØÍÅÅ */
#pun-status, .breadcrumb, .usermenu, #pun-ulinks, .punbb thead,
#pun-index .category td.tcm, #pun-index .category td.tcr, 
#pun-index .category .tc2, #pun-index .category .tc3 { 
    display: none !important; 
}

.punbb .container, .punbb .post-body, .punbb .main .container { 
    border: none !important; 
    background: transparent !important;
}