/* 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." */
/* SAFE TO EDIT - CSS VARIABLES */
:root {
    --title-font-size: 7vw;
    --bg-image: url('https://dl.dropbox.com/s/uilkov5ayv3bizh/70s-rainbow-wave-retro-wallpaper-mural-Plain-scaled.webp?dl=0');
    --side-image: url(/images/1.png);
    --box-bg: #f5ecdfe5;
    --background: #f5e2df;
}

/* THEME SETTINGS */
:root,
:root.red {
    --main: #d92f38;
    --muted: #d92f38b0;
}

:root.hotpink {
    --main: #cf3480;
    --muted: #cf347fbd;
}

:root.orange {
    --main: #f8601a;
    --muted: #f76e2ec5;
}

:root.yellow {
    --main: #dfa505;
    --muted: #e9da68d7;
}

:root.green {
    --main: #439d81;
    --muted: #439d81c0;
}

:root.turquoise {
    --main: #0e8ea5;
    --muted: #0fa8c3c5;
}

:root.indigo {
    --main: #0269a4;
    --muted: #0269a4ce;
}

:root.violet {
    --main: #533664;
    --muted: #3e254db9;
}

/* THEME SWITCHER */
#flag {
    display: flex;
    flex-direction: column;
    width: 12vw;
    margin: 0.5em auto;
}

.theme-button {
    height: 1.2em;
    border: none;
}

#hotpink { background-color: #cf3480; }

#red { background-color: #d92f38; }

#orange { background-color: #f76d2e; }

#yellow { background-color: #e9d968; }

#green { background-color: #439d81; }

#turquoise { background-color: #0fa9c3; }

#indigo { background-color: #0269a4; }

#violet { background-color: #3e254d; }

@font-face {
    font-family: Pretty Kelly;
    src: url(https://dl.dropbox.com/s/rqxfzjivgousq18/PrettyKelly.ttf?dl=0);
}

@font-face {
    font-family: National Park;
    src: url(https://dl.dropbox.com/s/jox00bymodcheoy/NationalPark-Regular.otf?dl=0);
}

@font-face {
    font-family: TAN Headline;
    src: url('/TANHEADLINE-Regular.otf');
}

/* BASE STYLING */
*, *::before, *::after {
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.15;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg-image) top / cover no-repeat;
    font-family: National Park, sans-serif;
    color: var(--main);
    font-size: 0.95em;
    scrollbar-color: var(--main) var(--background); /* Mozilla scrollbar fallback */
}

blockquote {
    border-left: 1px solid var(--main);
    padding-left: 0.5em;
    margin-left: 1em;
    font-style: italic;
}

button {
    transition: all .3s ease-in-out;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

button:hover, button.active {
    filter: brightness(140%);
}

mark {
    background-color: var(--main);
    color: var(--background);
    padding: 0 5px;
    border-radius: 2px;
}

figcaption {
    font-style: italic;
    font-size: smaller;
}

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

a:hover {
    filter: brightness(130%);
}

ul {
    margin: 0;
}

hr {
    border: 1px solid var(--muted);
}

code {
    background-color: var(--main);
    color: var(--background);
    padding: 0 3px;
    border-radius: 3px;
}

.img-fluid {
    max-width: 25rem;
    height: auto;
}

p {
    margin: 5px 0 10px 5px;
}

h1, h2 {
    margin: 0.2em;
    font-family: TAN Headline;
}

h3, h4, h5, h6 {
    margin: 0.2em;
    font-family: Pretty Kelly;
}

::selection {
    background-color: var(--muted);
    color: var(--background)
}

audio,
audio::-webkit-media-controls-panel {
    max-width: 12vw;
    background-color: var(--main);
    filter: brightness(120%);
    border-radius: 30px;
}

/*IFRAME AND EMBEDS */
div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
    display:block;
    text-align: center;
}

/* SCROLLBAR */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	position: fixed;
	right: 12px;
	z-index: 1;
}

::-webkit-scrollbar-track {
	box-shadow: 0;
	border-radius: 0px;
	background-color: var(--background);
}

.post ::-webkit-scrollbar-track {
	border-left: 0px solid var(--main);
}

::-webkit-scrollbar-thumb {
	background: var(--muted);
	border-radius: 0px;
}

/* WRAPPERS */
.wrapper {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    margin: 0 auto 5vh auto;
    width: 50vw;
    padding: 15px;
    gap: 2em;
}

.side-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width: 15em;
    gap: 2em;
}

/* BOXES & SIDEBAR */
.side-wrapper>div, .main {
    background-color: var(--box-bg);
    border: 2px solid var(--main);
    box-shadow: 0.5em 0.5em var(--muted);
    padding: 1em;
    border-radius: 5px;
}

.main {
    flex-grow: 1;
}

.side p {
    text-align: center;
    margin: 0.5em;
}

#side-img {
    height: 11em;
    max-width: 100%;
    background: var(--side-image) center / contain no-repeat;
    margin: 0.5em auto;
}

/* NAVLINKS */
#navlinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: flex-start;
}

#navlinks a {
    background-color: var(--main);
    color: var(--background);
    padding: 8px;
    margin: 5px;
    border-radius: 20px;
    text-decoration: none;
}

/* PAGE TITLE */
ul#title {
    padding-left: 0;
    margin: 0 auto;
    width: 55vw;
    font-size: var(--title-font-size);
    flex-wrap: wrap;
    display: flex;
    flex: auto 1 1;
    justify-content: center;
    font-family: Tan Headline ;
    -webkit-text-stroke: 1px var(--main);
}

#title li {
    display: inline-flex;
    margin: 0.25em;
    background-size: 200vw auto;
    background-image: repeating-linear-gradient(to right, #cf3480, #d92f38, #f76d2e, #e9d968, #439d81, #0fa9c3, #3e254d);
    -webkit-animation: rainbow 10s linear reverse infinite;
    animation: rainbow 10s linear reverse infinite;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text; 
}

/* BADGES */
#badge-img {
    display: grid;
    margin: auto auto;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    align-items: center;
    justify-items: center;
}

  /* MOBILE STYLING */
  @media only screen and (max-width: 768px) {
      .wrapper {
          flex-direction: column;
          width: 100%;
          padding: 0;
      }

      audio, audio::-webkit-media-controls-panel {
          max-width: 100%;
      }

      #flag {
          width: 50vw;
      }

      figure {
          margin: 0;
      }

      .img-fluid {
          max-width: 100%;
      }

      .side-wrapper, .main {
          width: 80vw;
          margin: 0 auto;
      }

      ul#title {
          width: 100vw;
          font-size: calc(var(--title-font-size) * 1.6);
          margin: 3vh auto;
      }
  }