/* =========================================================
   GirlishMagazine.com — base styles
   ========================================================= */

html {
  font-family: Arial, Helvetica, sans-serif;
}

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  background-image: url(https://static.vecteezy.com/system/resources/thumbnails/003/219/197/small/seamless-check-pink-pattern-textile-tartan-plaid-swatch-free-vector.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}

h2 {
  font-family: "Courier New", monospace;
  font-size: 28px;
  text-align: left;
  margin: 5px;
}

p {
  font-family: "Courier New", monospace;
  text-align: center;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

input {
  background-color: rgb(255, 255, 255);
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  background-color: hsl(324, 100%, 86%);
  padding: 14px 16px;
  text-align: left;
}

/* =========================================================
   Main layout
   3 columns on desktop: intro | crossword | about+player+poll
   Collapses to a single stacked column on narrow screens.
   ========================================================= */

.layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.col {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: none;
  width: auto;
}

/* =========================================================
   Logo + subscribe button (column 1)
   ========================================================= */

#one {
  position: relative;
  display: flex;
  justify-content: center;
  width: 330px;
  padding: 15px;
  box-sizing: border-box;
  background-color: rgb(255, 215, 222);
  box-shadow: inset #f1a3b6 0 0 0px 2px, inset rgb(228, 251, 255) 0 0 0px 4px, inset #d1df9f 0 0 0px 6px;
}

#button {
  position: absolute;
  top: -14px;
  left: -14px;
  z-index: 2;
  width: max-content;
  transform: rotate(-6deg);
}

:root {
  --color1: #f390b0;
  --color2: #f8bac9;
  --color3: #fbd9e0;
}

.btn {
  display: inline-block;
  background-image: radial-gradient(100% 100% at top, var(--color2) 30%, var(--color3) 66%, var(--color1) 66% 70%, var(--color2) 90%) !important;
  box-shadow: inset 0px 0px 0px 2px var(--color1), 0px 0px 0px 2.5px white;
  border-radius: 99px;
  padding: 8px 18px !important;
  color: rgb(12, 105, 151);
  font-family: "Courier New", monospace;
  text-decoration: none;
  cursor: pointer;
}

/* =========================================================
   Crossword (column 2)
   ========================================================= */

#crossword {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* =========================================================
   About box + music player + poll (column 3)
   #sidebar flows directly underneath #girlish at every width.
   ========================================================= */

#girlish {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  padding: 15px;
  box-sizing: border-box;
  background-color: rgb(255, 255, 255);
  font-size: 12px;
  color: hotpink;
  box-shadow: inset #f1a3b6 0 0 0px 2px, inset rgb(228, 251, 255) 0 0 0px 4px, inset #d1df9f 0 0 0px 6px;
}

#sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

#musicplayer {
  font-family: 'Courier New', monospace; /* default font */
  background: white; /* background color of player */
  border: 4px solid #4cd4de; /* border around player */
  width: 280px;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.songtitle, .track-info, .now-playing {
  padding: 5px;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.buttons {
  display: flex;
  justify-content: center;
  font-size: 17px !important; /* size of controls */
  width: 100%;
}

.buttons div {
  width: 33.3%;
}

.playpause-track, .prev-track, .next-track {
  color: #e74492; /* color of buttons */
  font-size: 35px !important; /* size of buttons */
  cursor: pointer;
}

.volume-icon {
  font-size: 22px !important; /* size of volume icon */
}

.seeking, .volume {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.now-playing, .track-info {
  background-color: #e2efc1; /* background color of top two boxes */
}

.now-playing {
  font-weight: bold;
}

input[type=range] {
  -webkit-appearance: none; /* removes default appearance of the tracks */
  width: 100%;
}

input[type=range]:focus {
  outline: none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* thickness of seeking track */
  background: #e74492; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb {
  height: 10px; /* height of seeking square */
  width: 10px; /* width of seeking square */
  border-radius: 0px; /* change to 5px if you want a circle seeker */
  background: #e74492; /* color of seeker square */
  -webkit-appearance: none;
  margin-top: -3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px; /* thickness of seeking track */
  background: #e74492; /* color of seeking track */
}

input[type=range]::-moz-range-thumb {
  height: 10px; /* height of seeking square */
  width: 10px; /* width of seeking square */
  border-radius: 0px; /* change to 5px if you want a circle seeker */
  background: #e74492; /* color of seeker square */
  border: none; /* removes weird border around seeker square in firefox */
}

#poll {
  width: 280px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
}

#poll form > div {
  width: 100% !important;
  box-sizing: border-box;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 600px;
  margin: 20px auto 40px;
  padding: 0 20px;
  text-align: center;
}

p5 {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 30px;
  text-align: center;
}

#subscribe-form {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 15px;
}

#subscribe-form .form-example {
  margin: 8px 0;
}

p6, p8 {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 15px;
  text-align: center;
}

#blinkies {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  background-color: rgb(235, 246, 198);
}

/* =========================================================
   Mobile: stack everything in one column
   ========================================================= */

@media (max-width: 700px) {
  .layout {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .col {
    max-width: 100%;
    width: 100%;
  }
}