/* Custom CSS by WebByHoward */
html {
  scroll-behavior: smooth;
}

body {
  background: #333;
  color: #fff;
  margin: 0;
  padding: 20px;
}
a {
  text-decoration: none;
}

/* FLEXBOX */

* {
  box-sizing: border-box;
}

.col {
  padding: 20px;
}

.col2 {
  padding: 5px;
}

.col3 {
  padding: 20px;
}

#pagecontainer {
  overflow-x: hidden;
}

.maincontain {
  display: flex;
  justify-content: space-between;
}

.maincontain_community {
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 300px;
}

.maincontain_social {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 20px;
  height: 300px;
}

.maincontain .col {
  width: 32%;
  height: 400px;
  align-items: stretch;
}

.maincontain_social .col2 {
  width: 10%;
  height: 100px;
  align-items: stretch;
}

.maincontain_community .col3 {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 40em) {
  .maincontain {
    flex-direction: column;
    height: 300px;
    margin: 0 0 10px 0;
  }

  .maincontain_community {
    flex-direction: column;
    height: 100%;
    margin: 0 0 10px 0;
  }

  .maincontain_social {
    display: flex;
    height: 100%;
    margin: 0 0 10px 0;
    padding: 0 0 20px 0;
  }
}
@media only screen and (max-width: 80em) {
  .maincontain .col {
    height: auto !important;
  }
}
/* Mobile */
@media only screen and (max-width: 40em) {
  .maincontain .col {
    width: 100%;
  }
  .maincontain h3 {
    font-size: 1.3vh;
  }
  .ttv {
    background-size: 8em !important;
  }
  .bsky {
    background-size: 5em !important;
  }
  .ig {
    background-size: 5em !important;
  }
  .sc {
    background-size: 12em !important;
  }
  .fb {
    background-size: 6em !important;
  }
  .yt {
    background-size: 5em !important;
  }
  .ttok {
    background-size: 5em !important;
  }
  .dsc {
    background-size: 9em !important;
  }
  .gaming {
    background-position: right !important;
  }
  .music {
    background-position: center !important;
  }
  .dev {
    background-position: center !important;
  }
  .community {
    background-size: 70% !important;
  }
  .maincontain_social .col2 {
    width: 50%;
  }
  .maincontain_community h3 {
    font-size: 1.3vh;
  }
}

/* Item Stylig */
.gaming {
  background: #d836eb;
  background-image: url("../img/gamebg.gif");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px white solid;
}

.music {
  background: #0000ff;
  background-image: url("../img/musicbg.gif");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px white solid;
}

.dev {
  background: #00ff00;
  background-image: url("../img/devbg.gif");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px white solid;
}

.community {
  background: #40f6ff;
  background-image: url("../img/community.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  border: 2px white solid;
}

.bsky {
  background: #fff;
  background-image: url("../img/bsky.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80% auto;
  border: 2px white solid;
}

.ig {
  background: #d62976;
  background-image: url("../img/ig.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50% auto;
  border: 2px white solid;
}

.dsc {
  background: #6b87c8;
  background-image: url("../img/discord.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border: 2px white solid;
}

.fb {
  background: #009bd1;
  background-image: url("../img/fb.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px white solid;
}

.yt {
  background: #ff4040;
  background-image: url("../img/yt.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50% auto;
  border: 2px white solid;
}

.ttv {
  background: #dfd0ea;
  background-image: url("../img/ttv.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border: 2px white solid;
}

.ttok {
  background: #c4c4c4;
  background-image: url("../img/ttok.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
  background-color: #000;
  border: 2px white solid;
}

.sc {
  background-image: url("../img/sc.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 130%;
  background-color: #d8d3d3;
  border: 2px white solid;
}

/* Font Styling */

p {
  font-size: 0.6vw;
}

a {
  color: cyan;
}

h1 {
  font-size: 5vw;
  font-family: "Press Start 2P", cursive;
  font-weight: lighter;
  text-align: center;
  padding: 50px;
}

h1 .n64txt {
  font-family: "Press Start 2P", cursive;
}

h2 {
  font-size: 2vw;
  font-family: "Press Start 2P", cursive;
  text-align: center;
  padding: 0px 0px 20px 0px;
}

h3 {
  font-size: 1.3vw;
  font-family: "Press Start 2P", cursive;
  object-fit: cover;
}

h4 {
  font-size: 2vw;
  font-family: "Press Start 2P", cursive;
  padding-top: 10px;
  object-fit: cover;
}

.title {
  color: white;
  text-shadow: 1px 1px 4px #000000;
}
/* Text Styles */
.n64txt {
  font-family: myriad-pro, sans-serif;
  font-weight: 800;
  font-style: normal;
}

.howco-gradient-wipe {
  text-align: center;

  background: linear-gradient(
    120deg,
    #CAF3B4 0%, #76E04A 25%, #38B000 50%, #007913 100%
  );
  background-size: 200% auto;

  color: #000;
  background-clip: text;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shine 4s linear infinite;
  animation-play-state: running;
  animation-timing-function: ease;
  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }
}
/* minecraft splash text effect */
#splash {
	text-align: center;
	color: #eaff00;
	text-shadow: 1px 1px 0px #000;
	position: relative;
	left: 200px;
	bottom: 50px;
	animation: splash .25s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}


/* Standard CSS Keyframes */
@keyframes splash {
  0% {
    transform: scale(0.875) rotate(-20deg);
  }
  100% {
    transform: scale(1) rotate(-20deg);
  }
}

/* For older WebKit browsers (like older versions of Safari) */
@-webkit-keyframes splash {
  0% {
    transform: scale(0.875) rotate(-20deg);
  }
  100% {
    transform: scale(1) rotate(-20deg);
  }
}


/* ================================
   THOUGHTS DIVIDER
   ================================ */
.thoughts-divider {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
  height: 50px;
  background: linear-gradient(to bottom, #333333 0%, #333333 15%, #0064B9 100%);
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}

/* ================================
   THOUGHTS SECTION
   ================================ */

/*
 * --char-h drives everything: character height, bubble vertical alignment,
 * and bubble horizontal position. Override --char-h per breakpoint and
 * the bubble tracks the face automatically.
 *
 * Face sits ~75% up from the character's bottom (top ~25%).
 * Character visual width ≈ 47% of its height (adjust if aspect ratio differs).
 */
.thoughts-section {
  --char-h: clamp(560px, 72vw, 780px);
  /* char width ≈ 47% of height; add 48px so the tail has room to breathe */
  --bubble-left: calc(var(--char-h) * 0.47 + 48px);
  /* face sits ~75% up from the bottom */
  --bubble-bottom: calc(var(--char-h) * 0.75 - 225px);

  position: relative;
  overflow: visible;
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
  /* Scales from 280px on small screens up to 500px on desktop */
  min-height: clamp(280px, 55vw, 500px);
  margin-top: 0;
  padding: 24px 40px;
  background-image: url('../img/island-bg.jpg');
  background-size: cover;
  /* top always visible */
  background-position: center top;
}

.thoughts-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: #000;
  z-index: 3;
}
.thoughts-character {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--char-h);
  width: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 2;
}

/* ---- Speech wrap: absolutely positioned to track the face ---- */
.thoughts-speech-wrap {
  position: absolute;
  bottom: var(--bubble-bottom);
  left: var(--bubble-left);
  right: 40px;
  z-index: 2;
}

.thoughts-label {
  font-family: 'Press Start 2P', cursive;
  /* 1.5× original clamp(0.45rem, 1.1vw, 0.75rem) */
  font-size: clamp(0.675rem, 1.65vw, 1.125rem);
  color: #fff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  margin-bottom: 14px;
  letter-spacing: 3px;
}

#thoughts-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ---- 8-bit Speech Bubble (1.5× size) ---- */
.thoughts-bubble {
  background: #fff;
  color: #111;
  font-family: 'Press Start 2P', cursive;
  /* 1.5× original clamp(0.45rem, 1.1vw, 0.7rem) */
  font-size: clamp(0.675rem, 1.65vw, 1.05rem);
  line-height: 2;
  padding: 30px 36px;
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 240px;
  word-break: break-word;
  border: 4px solid #111;
  box-shadow: 4px 4px 0 0 #111;
}

/* Left-pointing tail step 1 */
.thoughts-bubble::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 24px;
  width: 28px;
  height: 20px;
  background: #fff;
  border-top: 4px solid #111;
  border-left: 4px solid #111;
  border-bottom: 4px solid #111;
}

/* Left-pointing tail step 2 — staircase pixel */
.thoughts-bubble::after {
  content: '';
  position: absolute;
  left: -42px;
  top: 30px;
  width: 14px;
  height: 12px;
  background: #fff;
  border-top: 4px solid #111;
  border-left: 4px solid #111;
  border-bottom: 4px solid #111;
}

/* ---- Thoughts: tablet ---- */
@media only screen and (max-width: 60em) {
  .thoughts-section {
    --char-h: clamp(480px, 65vw, 640px);
  }
}

/* ---- Thoughts: mobile ---- */
@media only screen and (max-width: 40em) {
  .thoughts-section {
    --char-h: clamp(340px, 66vw, 460px);
    padding: 16px;
  }

  .thoughts-speech-wrap {
    right: 16px;
  }

  .thoughts-bubble {
    /* 1.5× original 0.42rem — still legible on mobile */
    font-size: clamp(0.55rem, 3.5vw, 0.75rem);
    min-width: unset;
    padding: 20px 22px;
    box-shadow: 3px 3px 0 0 #111;
  }

  .thoughts-label {
    font-size: clamp(0.55rem, 3vw, 0.8rem);
  }

  .thoughts-bubble::before {
    left: -22px;
    top: 18px;
    width: 22px;
    height: 16px;
  }

  .thoughts-bubble::after {
    left: -34px;
    top: 24px;
    width: 12px;
    height: 10px;
  }
}

@media only screen and (max-width: 40em) {

  #splash {
    position: relative;
    left: 0;
    bottom: 20px;
    animation: splash .25s;
    animation-direction:alternate-reverse;
    animation-iteration-count: infinite;

  }
  h3 {font-size: 0.7em;}

  /* Standard CSS Keyframes */
  @keyframes splash {
    0% {
      transform: scale(0.875) rotate(-5deg);
    }
    100% {
      transform: scale(1) rotate(-5deg);
    }
  }

  /* For older WebKit browsers (like older versions of Safari) */
  @-webkit-keyframes splash {
    0% {
      transform: scale(0.875) rotate(-5deg);
    }
    100% {
      transform: scale(1) rotate(-5deg);
    }
  }

}