/* 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 {
    margin: 0.2em;
    font-family: TAN Headline;
}

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;
}

/* 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: 70vw;
    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, .interior, .rightinterior, .listing {
    background-color: var(--box-bg);
    border: 2px solid var(--main);
    box-shadow: 0.5em 0.5em var(--muted);
    padding: 1em;
    border-radius: 5px;
}

.main, .listing {
    flex-grow: 1;
}

.interior {
    flex-grow: 2;
    margin: auto 7% auto auto;
    
}

.rightinterior {
    flex-grow: 2;
    margin: auto auto auto 7%;
    text-align:end;
}

.listing {
    text-align:start;
    justify-content:start;
    margin: auto;
}

.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;
    padding-top: 0;
    padding-bottom: 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 100%;
    background-position: left;
    background-image: repeating-linear-gradient(to right, #cf3480, #d92f38, #f76d2e, #e9d968, #439d81, #0fa9c3, #3e254d);
    
    background-repeat: y;
    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;
}

/*preloader--also from nenrikido!*/
/* Preloader CSS. Change the background color by swapping out #fff in the background property. You can also find more preloader icons here: https://samherbert.net/svg-loaders/  */
        #preloader {
        align-items: center;
        justify-content: center;
        width: 100%;
        display: flex;
        position: fixed;
        height: 100vh;
        left: 0;
        top: 0;
        background: #fff
          url("https://samherbert.net/svg-loaders/svg-loaders/spinning-circles.svg")
          no-repeat center;
        z-index: 9999;
    }
   



  /* 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, .interior, .rightinterior {
          width: 80vw;
          margin: 0 auto;
      }
      
      

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