/*   i know you have come here for the code,
           and well sure take it but, take it according
           to my license's permissions, this whole website is made from scratch
           by me and if you want to maybe help me polish it more
           feel free to message me on Discord (sfymmik) :)
                                                        */
                                                        
/* ===== Global reset ===== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

* {
  padding: 0;                     /* was 1px – caused side gaps */
  text-shadow: none !important;
}

/* ===== IBM BIOS-2y pixel font ===== */
@font-face {
  font-family: "IBMBIOS2y";
  src: url("fonts/ibm_bios-2y.woff2") format("woff2"); /* keep as you have it */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Root variables ===== */
:root {
  --content-width: clamp(320px, 60vw, 1000px); /* 60vw target width */
}

/* ===== Global defaults ===== */
html,
body {
  font-family: "IBMBIOS2y", monospace;
  color: #0ff;
  background: linear-gradient(180deg, #000010 0%, #0a001a 67%, #1a002b 100%);
  background-attachment: fixed;
  position: relative;
  height: 100%;
  margin: 0;
  min-height: 100vh;
  letter-spacing: 0;
  font-smooth: never;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  font-kerning: none;
  font-feature-settings: "liga" 0, "calt" 0, "kern" 0;
  line-height: 1;
  font-size: 16px;
  display: block;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
}

/* ===== Smooth fade-in (do NOT size the body) ===== */
body {
  filter: blur(100px);
  opacity: 0;
  transition: filter 1s ease-out, opacity 1s ease-out;
  padding-block: 15px 30px;
}
body.loaded { filter: blur(0); opacity: 1; }

/* ===== Centered column (works on both hosts) ===== */
#page,
main.content,
body > main {
  width: 100%;
  max-width: var(--content-width);   /* clamp(320px, 60vw, 1000px) */
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.content {
  line-height: 1.2;
}

/* ===== Main content area ===== */
main { flex: 1; width: 100%; }

/* make media never overflow the column */
img, video, canvas { max-width: 100%; height: auto; }

/* ===== Hover container ===== */
.container:hover {
  transform: scale(1.01);
  box-shadow: 0 0 1rem #0ff4;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
  padding: 10px;
  color: #fff;
  font-weight: 400;
  line-height: 1;
  transition: color 0.3s ease, font-size 0.3s ease;
}

/* ===== Fieldset Gradient Borders ===== */
#fieldset-ppl {
border: 2px solid transparent;
border-radius: 10px;
background:
linear-gradient(#0b0416, #0b0416) padding-box,
linear-gradient(to right, #ff0080, #7928ca) border-box;
}

#fieldset-ppl > legend {
padding: 0 .6rem;
background: #0b0416;
border-radius: 10px;
}

#fieldset-ppl-pos {
align-items: center;
text-align: center;
display: flex;
justify-content: center;
}

h2, li {
  a:link {
    color: cornflowerblue;
  }

  a:visited {
    color: cadetblue;
  }
}

/* ===== Github logo svg ===== */
#github-svg { max-height: 15px; max-width: auto; }

/* ===== badges ===== */
.badges img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: -webkit-optimize-contrast;
  transition: box-shadow 0.3s ease;
}
.badges img:hover {
  box-shadow: 0 0 0 1px #ff0080, 0 0 0 3px rgba(255,0,128,.25);
}

/* ===== Layout containers ===== */
.up {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.wrap {
  width: 100%;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== Avatar ===== */
.avatar {
  width: 175px;
  height: 175px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  opacity: 1;
  animation: slideUpFade 0.4s ease-out forwards;
  transition: transform 0.3s ease;
}
.avatar:hover { transform: scale(1.05); }

/* ===== Buttons / Links ===== */
.linki { display: flex; gap: 10px; flex-wrap: wrap; }

#line {
border: none;
height: 2px;
background: linear-gradient(to right, #ff0080, #7928ca);
margin: 12px auto 0;
border-radius: 3px;
}

footer {
  position: static;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: transparent;
  padding: 20px 0 10px;
  margin-top: 40px;
}

#line-footer {
border: none;
height: 2px;
background: linear-gradient(to right, #ff0080, #7928ca);
margin: 0 auto 6px;
border-radius: 3px;
width: auto;
}

.footer-text {
  font-size: 14px;
  color: #888;
  margin: 0;
  -webkit-font-smoothing: none;
}

/* ===== Upper Buttons ===== */
.upper-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  border-radius: 10px;
  border: none;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 0 rgba(255,255,255,.12) inset, 0 8px 18px rgba(15, 240, 255,.35);
  transform: translateY(0);
  transition: transform .6s ease, color .6s ease, box-shadow .6s ease, color .6s;
  opacity: 0;
  animation: slideUpFade 0.8s ease-out forwards;
  -webkit-font-smoothing: none;
}
.upper-buttons:hover,
.upper-buttons:focus-visible {
  color: #0ff;
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(255, 0, 128, 0.4);
}

/* ===== Animations ===== */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.upper-buttons:nth-child(1) { animation-delay: 0.9s; }
.upper-buttons:nth-child(2) { animation-delay: 1.1s; }
.upper-buttons:nth-child(3) { animation-delay: 1.3s; }
.upper-buttons:nth-child(4) { animation-delay: 1.5s; }
.upper-buttons:nth-child(5) { animation-delay: 1.7s; }
.upper-buttons:nth-child(6) { animation-delay: 1.9s; }
.upper-buttons:nth-child(7) { animation-delay: 2.1s; }

/* ===== Responsive tweaks ===== */
@media (max-width: 640px) {
  #page, main.content, body > main { max-width: 95%; }
  .wrap { row-gap: 12px; }
  .avatar { justify-self: start; }
  .links {
    grid-column: 1;
    min-height: unset;
    justify-content: center;
  }
}