/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@500&display=swap');

/* icons */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_outward,arrow_upward,article,assignment,block,check,deployed_code,folder,home,info,kid_star,link_2,person_heart,refresh,question_mark,subtitles');

@font-face {
  font-family: OpenDyslexic;
  src: url('fonts/OpenDyslexic-Regular.woff2') format('woff2'),
        url('fonts/OpenDyslexic-Regular.woff') format('woff');
}

:root {

  /* CONSTANTS */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.11, 1.365, 0, 1);
    
  --atkinson: 'Atkinson Hyperlegible Next',
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, Tahoma, Verdana, sans-serif;
    
  --opendyslexic: 'OpenDyslexic',
    "Comic Sans MS", sans-serif;

  --default-text-color: rgb(255, 255, 255);
  --alt-text-color: rgb(255, 255, 0);

  --default-container-bg-color: rgba(45, 29, 49, 0.75);
  --alt-container-bg-color: rgb(0, 0, 0);

  --hover-size: 1.05;
  --active-size: 0.95;

  --rotate-angle: 1deg;

  --bg-dark: rgba(47, 29, 49, 0.75);
  --bg-med: rgba(70, 29, 77, 0.75);
  --bg-light: rgba(128, 82, 134, 0.75);

  --shadow-glow: rgb(163, 73, 164);
  --active-glow: rgb(255, 113, 208);

  --radius-sm:   0.25rem;
  --radius-lg:   0.33rem;
  --radius-xl:   1.25rem;
  --radius-xxl:  2.50rem;
  --radius-pill:  9999px;

  --link: rgb(156, 215, 255);
  --link-hover: rgb(255, 183, 255);
  --link-visited: rgb(255, 113, 208);

  --red: rgb(255, 113, 113);
  --green: rgb(156, 255, 177);
  --yellow: rgb(255, 248, 156);

  /* CONFIGURABLE SCHTUFF */

  --body-font: var(--atkinson);
  --title-font: var(--opendyslexic);
  --nav-font: var(--opendyslexic);

  --text-color: var(--default-text-color);

  --container-bg: var(--default-container-bg-color);
  --label-bg: var(--bg-light);
}

body {
  background-color: var(--container-bg);
  background-image: url('images/background.png');
  background-repeat: repeat;
  background-attachment: fixed;
  image-rendering: pixelated;
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: 1.2rem;
  /* text-align: center; */
  overflow-wrap: break-word;
  text-shadow: #000000 0.1em 0.1em 0.125em;
  line-height: 1.5em;
  padding: 1.5rem;
}

.box {
  background-color: var(--container-bg);
  padding: 1em;
  border-radius: var(--radius-xl);
  box-shadow: 0px 0px 10px var(--shadow-glow);
}

.blur {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.box.dark {
  background-color: rgba(15, 15, 15, 0.75);
}

.box ul {
  padding-left: 3rem;
}

.box a img {
  display: block;
  width: 150px;
  max-width: 100%;
  margin: 10px auto;
}

summary {
  cursor: pointer;
  padding: 0.5em;
  background-color: var(--bg-med);
  border-radius: var(--radius-xl);
  transition: all 0.3s var(--ease);
}

summary:hover, summary:focus {
  transform: scale(calc(var(--hover-size) * 0.975));
  -webkit-transform: scale(calc(var(--hover-size) * 0.975));
  border-radius: var(--radius-lg);
  background-color: var(--bg-light);
  box-shadow: 0px 0px 15px var(--active-glow);
}

summary:active {
  transform: scale(calc(var(--active-size) * 1.05));
  -webkit-transform: scale(calc(var(--active-size) * 1.05));
  background-color: var(--bg-light);
  box-shadow: 0px 0px 15px var(--active-glow);
}

details {
  margin: 20px auto;
}

.medium {
  max-width: 50em;
  margin: 0 auto;
}

.long {
  max-width: 66em;
  margin: 0 auto;
}

strong.label {
  font-family: var(--title-font);
  font-size: 1rem;
  background-color: var(--label-bg);
  border-radius: var(--radius-lg);
  margin: 5px;
  margin-left: 0px;
  padding: 5px;
  padding-right: 10px;
  line-height: 3rem;
  
  border-style: solid;
  border-width: 0.2rem;
  border-color: var(--container-bg);
}

strong.label-warning {
  background-color: var(--red);
  corner-shape: notch;
  color: var(--container-bg);
  text-shadow: none;
}

a {
  display: inline-block;
  border-radius: var(--radius-xxl);
  text-decoration: none;

  transition: all 0.3s var(--ease);
}


a img.glow {
  transition: all 0.3s var(--ease);
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

a:hover, a:focus {
  border-radius: var(--radius-lg);
  color: var(--link-hover);
  background-color: var(--bg-light);
  box-shadow: 0px 0px 15px var(--active-glow);
  transform: scale(var(--hover-size));
  -webkit-transform: scale(var(--hover-size));
}

a:hover.rotate, a:focus.rotate {
  transform: rotate(var(--rotate-angle)) scale(var(--hover-size));
  -webkit-transform: rotate(var(--rotate-angle)) scale(var(--hover-size));
}

a:active {  
  color: var(--text-color);
  border-radius: var(--radius-xl);
  transform: scale(var(--active-size));
  -webkit-transform: scale(var(--active-size));
  box-shadow: 0px 0px 15px var(--active-glow);
}

a.no-box {
  background: none;
  box-shadow: none;
}

a:hover img.glow {
  filter: brightness(125%);
  -webkit-filter: brightness(125%);
}

a:active img.glow {
  filter: brightness(75%);
  -webkit-filter: brightness(75%);
}

a:hover.rotate:active {
  transform: rotate(calc(var(--rotate-angle) * -1)) scale(var(--active-size));
  -webkit-transform: rotate(calc(var(--rotate-angle) * -1)) scale(var(--active-size));
}

img.bordered {
  box-shadow: #000000 1px 1px 10px;
}

img.drop-shadow {
  filter: drop-shadow(#000 0px 0px 5px);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--link-hover);
  outline-offset: 3px;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 2.5rem;
}

.socials a {
  width: 150px;
}

.socials a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

li {
  margin: 5px 5px;
  text-align: left;
}

h1 {
  font-size: 2rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-font);
  text-shadow: var(--shadow-glow) 1px 1px 2.5px;
  line-height: 125%;
  text-align: center;
}

html {
  scroll-behavior: smooth;
}

hr {
  width: 75%;
  border-color: var(--shadow-glow);
}

button {
  color: var(--text-color);
  background-color: var(--container-bg);
  border: none;
  padding: 12px 20px;
  gap: 1rem;
  text-align: center;
  font-size: 1em;
  text-shadow: 
    #000000 0px 0px 0.125em,
    #000000 0.1em 0.1em 0.125em;
  display: inline-block;
  margin: 4px 2px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  box-shadow: 0px 0px 10px var(--shadow-glow); 
  font-family: var(--body-font);
  transition: all 0.3s var(--ease);
}

button:hover, button:focus {
  background-color: var(--bg-light);
  box-shadow: 0px 0px 10px var(--shadow-glow);
  border-radius: var(--radius-lg);
  transform: scale(var(--hover-size));
  -webkit-transform: scale(var(--hover-size));
}

button:active {
  background-color: var(--bg-light);
  box-shadow: 0px 0px 15px var(--active-glow);
  border-radius: var(--radius-xl);
  transform: scale(var(--active-size));
  -webkit-transform: scale(var(--active-size));
}

.navbar ul{
  font-family: var(--nav-font);
  list-style-type: none;
  gap: 10px;
  background-color: var(--container-bg);
  border-radius: var(--radius-xl);
  box-shadow: 0px 0px 10px var(--shadow-glow);
  padding: 0;
  
  display: flex;
  flex-shrink: 1;
  
  /* stuff to make it so that the navbar is NOT scrollable on smaller screens */
  justify-content: center;
}

.navbar a{
  color: var(--text-color);
  text-decoration: none;
  padding: 15px;
  display: block;
  text-align: center;
  transition: all 0.3s var(--ease);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}

.flex-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.blinkies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.blinkies img {
  height: 2.5rem; margin-top: 1rem;
}

.size-in-anim {
  animation: size-in 1s var(--ease);
}

.sway-anim{
  animation:
    size-in 1s var(--ease),
    sway 3s ease-in-out infinite;
}

@keyframes size-in {
  from {
    scale: 0%
  }
  to {
    scale: 100%
  }
}

@keyframes sway {
  0% {
    transform: rotate(-5deg)
  }
  50% {
    transform: rotate(5deg)
  }
  100% {
    transform: rotate(-5deg)
  }
}

/* media thing to reduce motion for people who have that on */
@media (prefers-reduced-motion: reduce) {
  a:hover, a:focus, a:active,
  button:hover, button:focus, button:active,
  summary:hover, summary:focus, summary:active {
    transform: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
  .sway-anim {
    animation: none !important;
  }
  .size-in-anim {
    animation: none !important;
  }
}

/* stuff for smaller screens */
@media (max-width: 1024px) {
  /* make the navbar scrollable */
  .navbar ul {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* make flex-container that has "hello" text centre stuff */
  .flex-container {
    flex-direction: column;
    text-align: center;
  }

  /* shrink and tighten spacing for the socials buttons */
  .socials {
    gap: 1.25rem;
  }
  .socials a {
    width: 7rem;
  }

  /* reduce padding */
  body {
    padding: 1rem;
  }
}

.material-symbols-rounded {
  font-size: 1.5rem;
  font-variation-settings:
    'FILL' 1,
    'wght' 700,
    'GRAD' 200,
    'opsz' 20;
  vertical-align: middle;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

::-webkit-scrollbar {
  width: 0.66rem;
  height: 0.66rem;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: var(--container-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--link-visited);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--link-hover); 
  border: 1.5px solid transparent;
  background-clip: content-box;
}