/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ===== BASE ===== */
body{
  margin:0;
  font-family: courier, monospace;
  color:black;
  text-align:center;

  background-image: url("perelachaise.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/* ===== LAYOUT ===== */
.layout{
  position: relative;
  min-height: 100vh;
  padding-left: 260px;
  padding-right: 260px;
  box-sizing: border-box;
}

.page{
  max-width: 500px;
  margin: 30px auto;
  padding: 24px;
  background: rgba(255,255,255,0.6);
  border: 2px solid black;
  position: relative;
  z-index: 2;
}

.page img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

.ticker {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: rgba(255,255,255,0.6);
  margin: 10px 0;
}

.ticker-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll 15s linear infinite;
  font-family: courier, monospace;
  font-size: 18px;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


/* ===== SIDE IMAGES ===== */
.side-img{
  position: fixed;
  z-index: 1;
  opacity: 0.95;
  border: 2px solid black;
  background: rgba(255,255,255,0.2);
}

.side-img.left{ left: 20px; }
.side-img.right{ right: 20px; }

#img1{ top: 120px; width: 180px; }
#img2{ top: 320px; width: 220px; }
#img3{ top: 450px; width: 300px; }

/* ===== MOBILE ===== */
@media (max-width: 900px){
  .layout{
    padding-left: 20px;
    padding-right: 20px;
  }

  .side-img{
    display: block;
    position: absolute;   /* nicht fixed auf Mobile */
    opacity: 0.7;
    z-index: 0;
  }

  #img1{ top: 40px; left: 10px; width: 90px; }
  #img2{ top: 160px; right: 10px; width: 110px; }
  #img3{ top: 320px; left: 20px; width: 80px; }
}


/* ===== POPUP ===== */
.win-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:9999;
}

.win95{
  width:500px;
  max-width: 90vw;
  margin:15vh auto;
  background:#eee;
  border:2px solid #000;
  padding:20px;
}

/* ===== BUTTONS ===== */
.zine-btn{
  display:inline-block;
  font-size:30px;
  margin: 0 18px;
  text-decoration:none;
  color: blue;
  letter-spacing: 2px;
}

.zine-btn:hover{
  text-decoration: underline;
}

/* ===== ANIMATED HEADER ===== */
.jitter-header {
  display: inline-block;
  animation: jitter 10s infinite;
}

@keyframes jitter {
  0%   { transform: translate(0); }
  96%  { transform: translate(0); }
  97%  { transform: translate(1px,-1px); }
  98%  { transform: translate(-1px,1px); }
  99%  { transform: translate(1px,1px); }
}

/* ===== LISTS ===== */
ul{
  list-style-position: inside;
  padding: 0;
}

/* ===== 90s UI PROFILE BUTTONS ===== */

.profile-buttons{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 30px 0 10px;
  flex-wrap: nowrap;
}

/* Basis-Button */
.profile-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 160px;
  padding: 10px 16px;

  background: #c6c6c6;
  color: #000;
  text-decoration: none;

  border: 2px solid #000;
  border-radius: 0;

  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 #6b6b6b,
    3px 3px 0 #000000;

  cursor: pointer;
  user-select: none;

  transition: transform 0.05s linear;
}

/* =========================
   TYPO PRO BUTTON
   ========================= */

/* VanJulz — modern, dünn */
.profile-buttons .profile-btn:first-child{
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* NMIP — kursiv, verspielt */
.profile-buttons .profile-btn:last-child{
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hover */
.profile-btn:hover{
  outline: 2px dotted #000;
  outline-offset: -6px;
}

/* Active / pressed */
.profile-btn:active{
  transform: translate(2px, 2px);
  box-shadow:
    inset 2px 2px 0 #6b6b6b,
    inset -2px -2px 0 #ffffff,
    1px 1px 0 #000000;
  outline: none;
}

/* Focus (Keyboard)*