@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Jost:ital,wght@0,700;1,700&display=swap');
body {height: 100%; margin: 0; background: url("carpet.jpg"); background-repeat: repeat; background-attachment: fixed;}
.header {display: flex; justify-content: center; max-width: 1200px; margin: auto;}
.center-screen {display: flex; justify-content: center; max-width: 1042px; margin: auto;}
.fade {opacity: 0; animation: fadeIn 2s forwards;} @keyframes fadeIn {to {opacity: 1;}}
.linkbox {max-width: 600px;}
img.social {width: 60px; margin: 10px; filter: brightness(0) saturate(100%) invert(71%) sepia(74%) saturate(1395%) hue-rotate(358deg) brightness(103%) contrast(103%); }
img.social:hover {filter: none}
img.shaky:hover {animation: wobble 2s ease-in-out}
img.chair {position: fixed; left: 2.5vw; bottom: -8vh; width: 30%; height; auto; min-width:200px;  z-index: 9999;}
@keyframes wobble {
  0% { transform: rotate(0deg); }
  33% { transform: rotate(-2deg); }
  66% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }}
.wrap-image {float: left; max-width: 50%; width: auto; height: auto;}

/* Optional: improve text wrapping shape */
@supports (shape-outside: margin-box) {
  .wrap-image {
    shape-outside: margin-box;
  }
}

/* ========== Mobile: text on top, image below ========== */
@media (max-width: 768px) {
  .wrap-container {
    display: flex;
    flex-direction: column;   /* stack items vertically */
  }

  .wrap-image {
    float: none;              /* kill the float – flex handles everything */
    order: 2;                 /* place image below the text */
    margin: 10px;
    max-width: 100%;          /* let image use full width */
  }

  .wrap-text {
    order: 1;                 /* text appears first */
  }
  img.chair {left: -3vw; bottom:-4vh; min-width: 160px}
}
h1, h2, h3 {font-family: "Jost", sans-serif; text-transform: uppercase; line-height:85%; color: #FFC000; text-shadow: -2px 2px 1px #FF004F; margin-left:20px}
h2 {font-size: 2em}
h3 {font-size: 1em}
p {font-family: "Baskervville", serif; color: white; line-height:140%; text-align: justify; margin: 20px}
p.indent {text-indent: 3em;}
p.explanatory {font-family: 'Baskerville', serif; font-style: italic; font-size: 1em}
a {text-decoration: none; color: #FFC000}
a:hover{color: #FF004F}
a h1, h2:hover {color: white}