/* built from someshit generated by AI ... why? because it's faster, yo! */

:root {
--bg:#FA9884;
--bg-dark:#2e1723;
--sitename:#e74646;
--card:#ed8dbc;
--accent:#7843b6;
--tuses:#87c7ff;
--postit:#87c7ff;
--hilite:#f8feb7;
--text:#000000;
--muted:#d8a8bc;
--border: #db7f6c;
--radius: 30px;
--gap:14px;
--max:1300px;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:8888;              /* above everything */
  pointer-events:none;       /* do not block clicks */
  background-image:url('overlay.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;      /* scales with viewport */
  opacity:0.95;              /* optional */
}

* {box-sizing:border-box}
body {font-family:system-ui,-apple-system,Segoe UI,Roboto,'Fira Sans', 'Helvetica Neue', Helvetica, sans-serif; margin:0;background:var(--bg);line-height:1.45;}
.wrap {max-width:var(--max);margin:auto;padding:28px 16px 60px;}
.wrap {padding:48px 36px 64px;}
@media (max-width: 600px) { .wrap {padding:28px 16px 48px;} }
header {background:var(--sitename);padding:22px;border-radius:var(--radius);border: 10px solid var(--border);margin-bottom:20px;}
h1 {margin:0 0 8px 0;font-size:clamp(24px,3vw,36px);}
.tagline {margin:0;color:var(--muted);}
.grid {display:grid;gap:var(--gap);grid-template-columns:repeat(5,1fr);}

.card {background:var(--card);border-radius:var(--radius);border: 10px solid var(--border);min-height:180px;transition:transform .15s ease;}
.grid .card {padding:0 0 10px 0;}
.grid .card:hover {transform:translateY(-3px);background:var(--hilite);}
.grid .card h2 {margin-top:0;font-size:18pt;line-height:24pt;font-family:fantasy;letter-spacing:.03em;color:white;
  position:relative;top:0;text-align:center;padding:10px 0 6px 0;background-color:#850E35;border-top-left-radius: 20px;border-top-right-radius: 20px;}
.grid .card p {position:relative;bottom:-30px;text-align:center;font-size:15pt;line-height:20pt;letter-spacing:.02em;color:black;font-weight:700;padding:8px 10px;
background:var(--tuses);border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;border:0;}
.grid .card div {margin:-20px 0 -50px 0;}

a {color:var(--accent);text-decoration:none;font-weight:600;}a:hover{text-decoration:underline;}

footer {margin:30px 0;background:var(--hilite);border-radius:var(--radius);border:10px solid var(--border);color:#201315;
text-align:center;
padding:20px;
}

/*gonna use this forever and a day*/
.copyleft {display:inline-block;transform: scaleX(-1);}
/*my shit*/
.shittitle {color:#201315;text-transform:uppercase;}
.shittitle a {color:#201315}
.shittitle a:hover {color:#201315;text-decoration:none;border-bottom:1px dotted #201315;}
.shitline {font-size:18pt;font-weight:500;margin:-10px 0 0 0;color:#fff;}
#clippedwings {position:relative;width:50px;height:50px;border-radius:50%;background:#ffffff80 url('ddong100.svg') center / 60% no-repeat;float:right;z-index:1000;}
#clippedwings a {min-width:20px;min-height:20px;border-radius:50%;border:12px solid red;}
#shitout, #shitin {background-color:var(--postit);border-radius:10px;padding:0 10px;position:fixed;top:50px;right:30px;
  text-align:left;display:block;border-radius:var(--radius);border:10px solid var(--bg-dark);font-family:Courier,monospace;}
#shitout {height:600px;min-height:400px;z-index:7777;width:80%;max-width:760px;min-width:500px;z-index:16666;}
#shitout input, #shitout textarea, #shitin input {border:5px inset #000000;border-radius:10px;width:100%;font-family:monospace;font-size:130%;color:#333;background-color:#ffd;padding:6px 10px;}
#shitout input, #loginshit input {height:40pt;margin:10px 0 20px 0;}
#shitout textarea {height:100%;min-height:300px;}
#shitin {width:40%;max-width:500px;min-width:300px;z-index:16666;}
#informshit {font-family:monospace;}
#outformshit {margin:20px 0 0 0;}
#informshit button, #outformshit button, #loginshit button {
font-family:monospace;font-size:180%;font-weight:800;color:black;border-width:10px;border-style:solid;border-radius:20px;width:100px;height:80px;}
#informshit button {background-color:#689F38;margin: 20px 0 0 20px;width:200px;border-color:#143816;}
#outformshit button {background-color: #B0BEC5;margin: -100px 20px 0 0;float:right;border-color:#263238}
#loginshit button {background-color:#ea368f;}
#loginshit button:nth-child(odd) {float:right;border:10px solid darkgray;background-color:lightgray;}
#loginshit {border-radius:14px;padding:10px 0;}
#editorshit {background-color:#ffffff00;}
#floatingcastle {background-color:#ffb2c7d4;margin:30px 0 0 0;padding:20px;}
.shitpost {margin:-10px 0 50px 0;padding:5px 0 0 0;}
.shitposttitle {width:auto;height:auto;background:#db7f6c;margin:-5px -20px 0 -20px;padding:0 0 0 20px;}
.shitposttitle h2 {font-size:20pt;color:#3d1023;margin-right:210px;}
.shitpostdate {float:right;margin:-55px 20px 0 0;font-size:12pt;color:black;background:black;padding:2px 4px;border-radius:3px;}
.shitpostbody {font-size:15pt;font-weight:500;line-height:20pt;color:#222;margin:10px 0 0 0;}

#shitbanner {max-width:var(--max);padding:10px 0 0 0;margin:30px 0 20px 0;background-color:#FFD54F;border-radius:var(--radius);border: 10px solid var(--border);}
#shitbanner .shitposttitle {margin:-20px 0 -10px 0;background-color:#FFD54F;border-top-left-radius:20px;border-top-right-radius:20px;}
#shitbanner .shitpostdate {}
#shitbanner .shitpostbody {background:var(--card);padding:10px 20px;line-height:24pt;}
#shitbannerbuffer {background-color:var(--card);border-bottom-left-radius:20px;border-bottom-right-radius:20px;}

.shitposttitle::selection {background-color: #00fdff82;color:#000;}
.shitpostdate::selection {background-color: #ff0000d9;color:#fff;}
.shitpostbody::selection {background-color: #ff000082;color:#000;}

#ass-teacher, #ass-courage, #ass-tact, #ass-feedback, #ass-champion {height:290px;min-height:200px;}
#ass-teacher {background: url('ass-teacher.jpg') center / 100% no-repeat;}
#ass-courage {background: url('ass-courage.png') center / 100% no-repeat;}
#ass-tact {background: url('ass-tact.png') center / 100% no-repeat;}
#ass-feedback {background: url('ass-feedback.png') center / 100% no-repeat;}
#ass-champion {background: url('ass-champion.png') 0 0 / 100% no-repeat;}

@media (max-width:1600px) {
  body {margin:120px 0 150px 0;}
}
@media (max-width:1400px) {
  header h1 {font-size:24pt;letter-spacing:.02em;}
  .shitline {font-size:18pt;}
  .shitposttitle h2 {font-size:18pt;padding:6px 0 0 0;height:50px;}
  .shitpostdate, #clippedwings {display:none;}
  .shitpostbody {font-size:15pt;}
}
@media (max-width:1100px) {
  body {margin:0;}
  .grid{grid-template-columns:repeat(3,1fr);}
  header h1 {font-size:18pt;}
  .shitline {font-size:11pt;}
  .shitposttitle h2 {font-size:15pt;margin-right:0;}
  .shitpostdate, #clippedwings {display:none;}
  .shitpostbody {font-size:12pt;}
}
@media (max-width:800px) {
  .grid{grid-template-columns:repeat(2,1fr);}
}
/* Optional: reduce on small screens */
@media (max-width: 600px) {
  body::before{opacity:0.75;}
  .wrap {padding:28px 16px 48px;}
}
@media (max-width:500px) {
  body::before{opacity:0.75;}
  .grid{grid-template-columns:1fr;}
  .grid .card p {font-weight:600;}
  header {text-align:center;}
  header h1 {font-size:20pt;}
  .shitpost {margin:0px 10px 0px 10px;padding:0;}
  .shitline {font-size:13pt;}
  .shitposttitle h2 {font-size:15pt;margin-right:0;height:auto;}
  .shitpostdate, #clippedwings {display:none;}
  #floatingcastle .shitpostbody {font-size:12pt;
    border:5px inset;
    border-color: #770b22b0 #aa1132b0 #aa1132b0 #770b22b0;
    border-radius:20px;
    padding:14px;background-color:#f9aab8;}
  #floatingcastle {background-color:#db7f6c;
    margin:0;padding:0;}
  #floatingcastle .shitpostbody:last-child {margin:0 0 10px 0;}
  footer {text-align:left;}
}
/*end*/