css
* {
 box-sizing:border-box;
}

html {
 background:#000;
}

body {
 margin:0;
 padding:0;
 background:radial-gradient(circle at 20% 20%,#252525 0,#090909 25%,#000 55%);
 color:#d8d8d8;
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size:12px;
}

a {
 color:#00ffff;
 text-decoration:underline;
}

a:hover {
 color:#ffff00;
 background:#000080;
}


/* TOP */

.top-strip {
 width:100%;
 height:22px;
 background:#000080;
 color:#fff;
 border-bottom:2px solid #808080;
 text-align:center;
 font-size:11px;
 font-weight:bold;
 line-height:20px;
 letter-spacing:2px;
}


/* PAGE */

.page {
 width:760px;
 margin:12px auto;
 background:#171717;
 border:3px ridge #c0c0c0;
 box-shadow:0 0 18px #111;
}


/* HEADER */

.header {
 min-height:125px;
 display:grid;
 grid-template-columns:145px 1fr 110px;
 gap:10px;
 padding:12px;
 background:linear-gradient(#303030,#090909);
 border-bottom:3px ridge #808080;
}

.flag {
 width:130px;
 height:82px;
 background:#000;
 box-shadow:3px 3px 0 #000;
 overflow:hidden;
}

.flag img {
 display:block;
 width:100%;
 height:100%;
 object-fit:cover;
}

.logo {
 padding-top:7px;
}

.logo-main {
 color:#ffff00;
 font-family:"Courier New",monospace;
 font-size:48px;
 font-weight:bold;
 line-height:50px;
 text-shadow:3px 3px #f00,5px 5px #000080;
}

.logo-sub {
 color:#00ffff;
 font-family:"Courier New",monospace;
 font-size:12px;
 margin-top:8px;
}

.header-gif {
 width:100px;
 height:82px;
 margin-top:8px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#000;
 border:2px solid #eee;
 box-shadow:3px 3px 0 #000;
 overflow:hidden;
}

.header-gif img {
 display:block;
 max-width:100%;
 max-height:100%;
 width:auto;
 height:auto;
}


/* MARQUEE */

.marquee {
 height:25px;
 line-height:24px;
 background:#800000;
 color:#ffff00;
 border-bottom:2px solid #c0c0c0;
 font-family:"Courier New",monospace;
 font-weight:bold;
}


/* =====================================================
   GLAVNI RASPORED
   LEVO | CENTAR | DESNO
   ===================================================== */

.layout {
 display:flex !important;
 flex-direction:row !important;
 flex-wrap:nowrap !important;
 align-items:flex-start;
 gap:10px;
 padding:10px;
 width:100%;
}


/* LEVI */

.sidebar {
 flex:0 0 165px !important;
 width:165px;
 min-width:165px;
}


/* CENTAR */

.content {
 flex:1 1 auto !important;
 width:auto;
 min-width:0;
}


/* DESNI */







/* KONAČNO PORAVNANJE DESNOG BANNERA */

.right-sidebar {
    position:relative;
    left:-8px;
}


.right-banner-box {
    display:block;
    width:118px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    overflow:hidden;
}

.right-banner-box .box-title {
    display:none !important;
}

.right-banner {
    display:block;
    width:118px !important;
    height:592px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    overflow:hidden;
}

.right-banner a {
    display:block;
    width:118px !important;
    height:592px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    line-height:0 !important;
}

.right-banner img {
    display:block !important;
    width:118px !important;
    height:592px !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}






/* BOX */

.box {
 margin-bottom:10px;
 background:#202020;
 border:2px outset #aaa;
}

.box-title {
 padding:4px;
 background:#000080;
 color:#fff;
 border-bottom:2px solid #808080;
 font-size:11px;
 font-weight:bold;
 text-align:center;
 letter-spacing:1px;
}

.box > a {
 display:block;
 padding:7px 6px;
 border-bottom:1px dotted #555;
 color:#00ffff;
 background:#181818;
 text-decoration:none;
}

.box > a:hover {
 background:#000080;
 color:#fff;
}


/* RADIO */

.mini-logo {
 margin:10px auto;
 width:55px;
 padding:5px;
 background:#000;
 color:#00ff00;
 border:2px inset #888;
 font-family:"Courier New",monospace;
 font-size:22px;
 font-weight:bold;
 text-align:center;
 line-height:20px;
}

.center {
 text-align:center;
}

.online {
 color:#00ff00;
 font-weight:bold;
}


/* GIFS */

.gif-collection {
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 gap:5px;
 padding:6px 2px;
}

.gif-collection img {
 width:auto;
 height:75px;
 max-width:75px;
 object-fit:contain;
 display:block;
}


/* CONTENT */

.welcome,
.post,
.small-box {
 background:#111;
 border:2px ridge #888;
}

.welcome {
 padding:12px;
 margin-bottom:10px;
}

h1 {
 margin:0 0 10px 0;
 padding:5px 8px;
 background:#000080;
 border:2px outset #aaa;
 color:#fff;
 font-size:17px;
}

h2 {
 margin-top:8px;
 color:#ffff00;
 font-family:"Courier New",monospace;
 font-size:20px;
}

h3 {
 margin:0;
 padding:5px;
 color:#fff;
 background:#800000;
 font-size:13px;
}

p {
 line-height:1.55;
}

.notice {
 margin-top:15px;
 padding:8px;
 background:#330000;
 border:2px dashed #f00;
 color:#ffff00;
 text-align:center;
 font-family:"Courier New",monospace;
}


/* POSTS */

.post {
 margin-bottom:10px;
 padding:10px;
}

.post-title {
 padding:5px;
 color:#fff;
 background:#000080;
 border:2px outset #999;
 font-weight:bold;
}

.post-date {
 margin-top:7px;
 color:#777;
 font-family:"Courier New",monospace;
 font-size:10px;
}

.signature {
 color:#00ffff;
 font-family:"Comic Sans MS",cursive;
}


/* ARCHIVE */

.archive-post {
 margin-bottom:12px;
 padding:10px;
 background:#111;
 border:2px ridge #888;
}

.archive-image {
 display:block;
 max-width:100%;
 height:auto;
 margin:12px auto;
 border:2px ridge #888;
}

.archive-post .post-date {
 margin-bottom:10px;
}

.download-box {
 margin:10px 0;
 padding:8px;
 background:#050505;
 border:2px inset #888;
 font-family:"Courier New",monospace;
}


/* PLAYER */

.player {
 margin:10px 0;
 padding:10px;
 background:#050505;
 border:3px ridge #888;
 text-align:center;
}

.player-screen {
 padding:8px;
 margin-bottom:10px;
 background:#001800;
 border:2px inset #777;
 color:#00ff00;
 font-family:"Courier New",monospace;
 font-size:11px;
}

.equalizer {
 font-size:18px;
 letter-spacing:2px;
}

audio {
 width:100%;
 height:32px;
}

.player-info {
 margin-top:8px;
 color:#00ffff;
 font-family:"Courier New",monospace;
}


/* TWO COLUMNS */

.two-columns {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
}

.small-box {
 padding-bottom:7px;
}

.small-box p {
 padding:0 8px;
}


/* WEBRING */

.webring {
 text-align:center;
 font-family:"Courier New",monospace;
}

.webring p {
 margin:7px 0;
}


/* FORUM */

.forum-category {
 display:grid;
 grid-template-columns:45px 1fr 90px 95px;
 min-height:65px;
 align-items:center;
 padding:7px;
 background:#151515;
 border-bottom:1px dotted #666;
}

.forum-category:hover {
 background:#202020;
}

.forum-icon {
 font-size:25px;
 text-align:center;
}

.forum-name {
 padding:3px;
}

.forum-name a {
 color:#00ffff;
 font-size:14px;
}

.forum-stats {
 text-align:center;
 color:#aaa;
 font-family:"Courier New",monospace;
 font-size:10px;
}

.forum-last {
 border-left:1px dotted #555;
 padding-left:7px;
 color:#ccc;
 font-family:"Courier New",monospace;
 font-size:10px;
}

.forum-last b {
 color:#00ffff;
}


/* ABOUT */

.about-intro {
 padding:5px 0 10px;
}

.about-intro h2 {
 margin:5px 0 12px;
 color:#00ffff;
 font-size:20px;
 text-shadow:2px 2px 0 #000;
}

.about-intro p {
 line-height:1.6;
}

.about-list {
 margin:8px 0 5px 20px;
 padding:0;
}

.about-list li {
 margin:5px 0;
 color:#ddd;
}

.about-signature {
 margin-top:25px;
 text-align:center;
 color:#888;
}

.about-signature hr {
 border:0;
 border-top:1px dotted #555;
 margin-bottom:12px;
}


/* FOOTER */

footer {
 padding:15px;
 border-top:3px ridge #808080;
 background:#080808;
 text-align:center;
 color:#777;
}

.footer-buttons {
 margin-bottom:10px;
 font-size:22px;
 letter-spacing:8px;
 color:#fff;
}

.small {
 font-size:10px;
 color:#777;
}


/* =====================================================
   TABLET / MANJI EKRAN
   ===================================================== */

@media (max-width:790px) {

 .page {
  width:calc(100% - 10px);
  margin:5px;
 }

 .header {
  grid-template-columns:100px 1fr;
 }

 .flag {
  width:90px;
 }

 .counter {
  display:none;
 }

 .logo-main {
  font-size:34px;
 }

}


/* =====================================================
   TELEFON
   ===================================================== */

@media (max-width:560px) {

 .layout {
  flex-direction:column !important;
  flex-wrap:nowrap !important;
 }

 .sidebar {
  width:100%;
  min-width:0;
  flex:0 0 auto !important;
  order:2;
 }

 .content {
  width:100%;
  flex:0 0 auto !important;
  order:1;
 }

 
 .right-banner-box {
  width:100%;
 }

 .right-banner {
  width:100%;
 }

 .right-banner a {
  width:100%;
 }

 .right-banner img {
  width:auto;
  max-width:100%;
  height:auto;
 }

 .two-columns {
  grid-template-columns:1fr;
 }

 .header {
  grid-template-columns:1fr;
  text-align:center;
 }

 .flag {
  margin:auto;
 }

 .logo-main {
  font-size:36px;
 }

 .header-gif {
  margin:8px auto 0;
 }

}


.footer-banner {
    width:100%;
    margin:0 0 12px 0;
    text-align:center;
    overflow:hidden;
}

.footer-banner img {
    display:block;
    max-width:100%;
    width:auto;
    height:auto;
    margin:0 auto;
    border:0;
}


/* WIDE GIF - horizontalne animacije */

.wide-gif-box {
    margin-bottom:10px;
}

.wide-gif {
    padding:8px;
    background:#000;
    text-align:center;
    overflow:hidden;
}

.wide-gif img {
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:0 auto;
    border:0;
}