@import url("https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap");

:root {
--yellow: #fff2a6;
--pink: #f6a8cf;
--pink2: #ffd5e9;
--blue: #a9def5;
--green: #b8e49b;
--ink: #3c4a42;
--line: #c58ca8;
--paper: #fffdf3;
}

* {
  box-sizing: border-box;
  border-radius: 0 !important;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
color: var(--ink);
font-family: "VT323", monospace;
font-size: 22px;
min-height: 100vh;

background:
linear-gradient(
#bde7f7 0 18%,
#fff5a8 52%,
#d7efc5 100%
);

background-attachment: fixed;
}

body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;

background:
radial-gradient(
circle at 20% 20%,
#fff8 0 3px,
transparent 4px
),
radial-gradient(
circle at 80% 60%,
#fff8 0 2px,
transparent 3px
);

background-size: 75px 75px;
opacity: .6;
}

/* =========================
TOP BAR
========================= */

.topbar {
width: min(1180px, 94%);
margin: 12px auto;
padding: 9px;

border: 3px ridge white;

background:
linear-gradient(
#fff8fc,
#ffd9eb
);

box-shadow:
5px 5px #9bb6b6;

display: flex;
justify-content: space-between;
gap: 15px;
align-items: center;
}

.logo {
font-family: "VT323", monospace;
font-size: 29px;
font-weight: bold;
color: #9b4f78;
}

.address {
background: white;
border: 2px inset #c6c6c6;
padding: 3px 10px;

font-family: "VT323", monospace;
font-size: 18px;
}

/* =========================
CLOUDS
========================= */

.cloud {
position: fixed;
color: #fff;
font-size: 110px;
opacity: .35;
z-index: -1;
}

.cloud1 {
left: 2%;
top: 22%;
}

.cloud2 {
right: 3%;
top: 63%;
}

/* =========================
LAYOUT
========================= */

.layout {
width: min(1180px, 94%);
margin: 16px auto;

display: grid;
grid-template-columns: 280px 1fr;
gap: 17px;
}

/* =========================
MAIN BLOCKS
========================= */

.card,
.paper {
background: var(--paper);

border: 3px ridge white;

box-shadow:
5px 5px #8eaba7;

margin-bottom: 17px;
}

.card {
padding: 12px;
}

.paper {
padding: 18px;
}

/* =========================
PROFILE
========================= */

.profile {
text-align: center;

background:
linear-gradient(
#fffdf3,
#fff0f7
);
}

.avatar-wrap {
position: relative;
display: inline-block;
}

.avatar-wrap img {
width: 145px;
height: 145px;
object-fit: cover;

border: 5px ridge #fff;
}

.avatar-wrap i {
position: absolute;
right: 7px;
bottom: 8px;

width: 19px;
height: 19px;

border: 3px solid white;

background: #999;
}

.avatar-wrap i.online {
background: #68c85e;

box-shadow:
0 0 8px #68c85e;
}

.profile h1 {
font-family: "VT323", monospace;
font-size: 32px;
color: #99506f;

margin: 10px 0 4px;
}

.facts {
text-align: left;

border-top:
1px dotted #c98da9;

margin-top: 12px;
}

.facts p {
display: flex;
justify-content: space-between;

margin: 3px 0;

border-bottom:
1px dotted #c98da9;
}

.facts b {
color: #a45a7b;
}

/* =========================
NAVIGATION
========================= */

.menu h2,
.radio h2,
.visitor h2 {
text-align: center;

font-family: "VT323", monospace;
font-size: 29px;

color: #a05279;

margin: 0 0 9px;
}

.menu a {
display: block;

padding: 6px;

border-bottom:
1px dotted #c58ca8;

color: #7f4c67;

text-decoration: none;
}

.menu a:hover {
background: #ffe5f1;
}

/* =========================
RADIO
========================= */

.radio {
background:
linear-gradient(
#fff8c6,
#e7f5d9
);
}

.now {
border: 3px inset white;
background: #fff;

padding: 8px;

text-align: center;

margin-bottom: 8px;
}

.controls {
display: flex;
gap: 5px;
}

.controls button,
button {
font-family: "VT323", monospace;
font-size: 22px;

border: 3px outset white;

background: #ffd4e8;
color: #69475a;

padding: 4px 12px;

cursor: pointer;
}

.radio input {
width: 100%;
}

/* =========================
VISITOR
========================= */

.visitor {
text-align: center;
}

.visitor iframe {
display: block;

width: 180px;
height: 70px;

margin: 0 auto;

border: 0;

background: transparent;
}

/* =========================
WELCOME
========================= */

.welcome {
text-align: center;

padding: 10px;

border: 3px ridge white;

background:
linear-gradient(
90deg,
#fff1a7,
#ffd2e7,
#cbeea9,
#bce6f5
);

box-shadow:
5px 5px #8eaba7;

margin-bottom: 17px;

font-family: "VT323", monospace;
font-size: 29px;
}

/* =========================
PAPER HEADINGS
========================= */

.paper h2 {
text-align: center;

color: #a05279;

margin: 0 0 14px;

font-family: "VT323", monospace;
font-size: 34px;
}

.heading-row {
display: flex;
justify-content: space-between;
align-items: center;
}

.heading-row h2 {
text-align: left;
}

.heading-row span {
font-family: "VT323", monospace;
font-size: 20px;
}

/* =========================
ABOUT
========================= */

.about {
display: grid;

grid-template-columns:
170px 1fr;

gap: 18px;

align-items: center;
}

.about img {
width: 160px;
height: 160px;

object-fit: cover;

border: 4px ridge white;
}

/* =========================
STEAM
========================= */

.steam {
display: grid;

grid-template-columns:
150px 1fr;

gap: 18px;

background: #eef8fa;

border: 3px solid #7da8b2;

padding: 13px;
}

.steam > img {
width: 145px;
height: 145px;

object-fit: cover;

border: 4px solid white;
}

.steam h3 {
font-family: "VT323", monospace;
font-size: 38px;

margin: 0;

color: #7b5570;
}

.playing {
background: #365a60;
color: white;

padding: 9px;

border: 3px inset #8ca9a8;
}

.playing small {
display: block;
color: #cdeea7;
}

.playing strong {
font-size: 28px;
}

.sub {
margin-top: 16px;
color: #a05279;
}

/* =========================
GAMES
========================= */

.games {
display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 10px;
}

.game {
background: #f5eaf0;

border: 2px solid #d39bb5;

padding: 7px;
}

.game img {
width: 100%;

aspect-ratio: 2 / 1;

object-fit: cover;
}

.game b {
display: block;
}

/* =========================
MUSIC
========================= */

.playlist {
display: grid;
gap: 6px;
}

.track {
display: flex;
justify-content: space-between;
gap: 8px;

padding: 7px;

background: #fff2a9;

border: 2px solid #d4b95d;

cursor: pointer;
}

.track.active {
background: #ffd3e7;
border-color: #c783a4;
}

/* =========================
LINKS
========================= */

.links {
display: grid;

grid-template-columns:
1fr 1fr;

gap: 8px;
}

.links a {
text-align: center;

padding: 10px;

background: #e7f5d8;

border: 2px solid #a8c789;

color: #617b4e;

text-decoration: none;
}

.links a:hover {
background: #d9efc4;
}

/* =========================
UPDATES
========================= */

.updates {
list-style: none;
padding: 0;
}

.updates li {
padding: 5px;

border-bottom:
1px dotted #c58ca8;
}

/* =========================
GUESTBOOK
========================= */

.guest-intro {
text-align: center;
margin-top: -5px;
}

.guest-wall {
display: grid;
gap: 10px;
}

.comment {
display: grid;

grid-template-columns:
58px 1fr;

gap: 10px;

padding: 9px;

background:
linear-gradient(
90deg,
#fff2bd,
#fffdf3
);

border: 2px solid #d5b27b;

box-shadow:
2px 2px #c9a7b7;
}

.comment > img {
width: 52px;
height: 52px;

object-fit: cover;

border: 3px ridge white;
}

.comment-body {
min-width: 0;
}

.comment-head {
display: flex;

justify-content: space-between;

border-bottom:
1px dotted #c58ca8;

padding-bottom: 3px;
}

.comment-head b {
color: #9a4d76;
}

.comment-head span {
font-size: 17px;
color: #7d8982;
}

.comment p {
margin: 5px 0;
}

.comment a {
font-size: 19px;
}

.write-comment {
margin-top: 16px;

padding-top: 12px;

border-top:
3px double #c58ca8;
}

.write-comment h3 {
margin: 0 0 8px;

color: #a05279;
}

.guestbook form {
display: grid;
gap: 8px;
}

.guestbook label {
display: grid;
gap: 4px;
}

.guestbook input,
.guestbook textarea {
width: 100%;

font-family: "VT323", monospace;
font-size: 22px;

padding: 7px;

border: 3px inset white;

background: #fff;

color: #3c4a42;
}

.guestbook textarea {
min-height: 90px;
resize: vertical;
}

.guestbook button {
width: 100%;

background: #cfe9f7;
color: #365363;
}

.guestbook small {
display: block;
margin-top: 10px;
}

.guest-messages {
  margin-top: 16px;

  display: grid;
  gap: 8px;

  max-height: 500px;

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 8px;
}

/* Retro scrollbar */
.guest-messages::-webkit-scrollbar {
  width: 12px;
}

.guest-messages::-webkit-scrollbar-track {
  background: #fff2bd;
  border: 2px inset white;
}

.guest-messages::-webkit-scrollbar-thumb {
  background: #f6a8cf;
  border: 2px outset white;
}

.guest-messages::-webkit-scrollbar-thumb:hover {
  background: #d98caf;
}


.guest-message {
padding: 8px;

background: #fffbe7;

border: 2px dashed #8fb9ca;
}

.guest-message strong {
color: #a41a6a;
}

.note {
padding: 8px;

background:
linear-gradient(
90deg,
#fff8c7,
#fffdf3
);

border: 2px dashed #9db9cc;
}

.note strong {
color: #a04f78;
}

.tiny {
font-size: 16px;
color: #6c8290;
}

/* =========================
BENECIK FM CASSETTE
========================= */

.cassette {
border: 4px ridge white;

background: #f4b5d1;

padding: 8px;

box-shadow:
inset 0 0 0 3px #bd7198;

margin-bottom: 8px;
}

.cassette-label {
background: #fff7b2;

border: 2px solid #a56c82;

padding: 6px;

text-align: center;
}

.cassette-label span {
display: block;

font-family: "VT323", monospace;
font-size: 18px;

color: #8f5270;
}

.cassette-label b {
display: block;

font-size: 25px;

margin-top: 5px;

color: #715266;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cassette-window {
margin: 8px auto 2px;

background: #39454a;

color: #bde6a0;

border: 3px inset #ddd;

text-align: center;

font-family: "VT323", monospace;
font-size: 23px;

letter-spacing: 7px;

padding: 3px;
}

.nowline {
background: #fff;

border: 2px inset #fff;

padding: 4px;

font-size: 19px;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.nowline b {
color: #a04f78;
}

.progress {
height: 9px;

background: #e1e1d2;

border: 2px inset white;

margin-top: 8px;

cursor: pointer;
}

.progress span {
display: block;

height: 100%;

width: 0;

background: #b26c91;
}

.time {
display: flex;

justify-content: space-between;

font-family: "VT323", monospace;
font-size: 17px;

color: #7b6570;

margin: 2px 1px 5px;
}

.controls {
display: flex;

justify-content: center;

gap: 5px;
}

.controls button {
min-width: 58px;
}

.volume {
display: flex;

align-items: center;

gap: 5px;

margin-top: 7px;

font-size: 19px;
}

.volume input {
width: 100%;
}

.mini-playlist {
margin: 8px 0;

display: grid;

gap: 3px;

max-height: 90px;

overflow: auto;
}

.mini-playlist .track {
font-size: 18px;

padding: 3px 6px;

background: #fff7cf;

border: 1px solid #d1ad61;
}

.mini-playlist .track.active {
background: #ffd4e7;

border-color: #bd7198;
}

/* =========================
BLINKIES
========================= */

.blinkies {
display: flex;

justify-content: center;

gap: 7px;

flex-wrap: wrap;
}

.blinkies span {
font-family: "VT323", monospace;
font-size: 18px;

color: #fff;

background: #7d5270;

border: 2px solid white;

padding: 5px;

animation:
blink 1.2s steps(2) infinite;
}

@keyframes blink {
50% {
filter: brightness(1.5);
}
}

/* =========================
FOOTER
========================= */

footer {
text-align: center;

padding: 25px;

font-family: "VT323", monospace;
font-size: 22px;
}

/* =========================
SQUARE RETRO OVERRIDES
========================= */

.card,
.paper,
.welcome,
.topbar,
.game,
.track,
.links a,
.comment,
.note,
.guest-message,
.steam-widget-container,
.guestbook-widget-container {
border-radius: 0 !important;
}

input,
textarea,
button,
img,
iframe {
border-radius: 0 !important;
}

/* =========================
MOBILE
========================= */

@media (max-width: 820px) {

.comment {
grid-template-columns:
48px 1fr;
}

.comment > img {
width: 44px;
height: 44px;
}

.comment-head {
display: block;
}

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

.topbar {
flex-direction: column;
}

.about,
.steam {
grid-template-columns: 1fr;
}

.about img,
.steam > img {
margin: auto;
}

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

.heading-row {
display: block;
}
}