@import url(supporters.css);

/* Main styles */

:root {
   font-family: Arial, Helvetica, sans-serif;
   background-color: var(--background);
   font-weight: bold;
   accent-color: var(--accent-color);
   color: var(--text-color);

   --footer-spacing: 10em;
}

[hidden] {
   display: none !important;
}

.button,
input[type='button'] {
   border-radius: 0.5em;
   border-style: none;
   padding: 0.2em;
   background-color: var(--input-background);
   flex-grow: 1;
   text-align: center;
   margin: 0.1em;
}

input[type='text'],
input[type='password'] {
   border-radius: 0.5em;
   padding: 0.2em;
   background-color: var(--input-background);
   margin: 0.1em;
   text-align: center;
}

select {
   background-color: var(--input-background);
   padding: 0.2em;
   border-radius: 0.5em;
   width: 100%;
   flex-grow: 1;
}

h1,
h2 {
   text-align: center;
   margin: 0;
}

.panel {
   background-color: var(--panel-background);
   padding: 0.5em;
   margin: 0.5em;
   border-radius: 1em;
}

.center {
   text-align: center;
}

.smallimage {
   height: 1.5em;
   vertical-align: middle;
}

/* Footer */

#footer {
   position: fixed;
   bottom: 1em;
   text-align: center;
   padding: 0.5em;
   backdrop-filter: blur(5px);
   border-radius: 1em;
}

#version-selector-button {
   color: deeppink;
   text-decoration: underline;
   cursor: pointer;
}

#version-selector-button:hover {
   color: pink;
}

#version-selector-button:active,
:has(#open-version-selector:checked) #version-selector-button {
   color: #ff00ff;
}

#version-selector:has(#open-version-selector:checked) {
   transform: translateY(-110%);
   opacity: 1;
}

#version-selector {
   background-color: var(--panel-background);
   border-color: var(--background-darker);
   border-width: 5px;
   border-style: solid;
   padding: 0.5em;
   margin: 1em;
   border-radius: 1em;
   position: fixed;
   text-align: center;
   backdrop-filter: blur(5px);
   bottom: 0;
   transform: translateY(150%);
   opacity: 0;
   z-index: 1;

   transition-property: transform, opacity;
   transition-duration: 250ms;
}

body:not([data-authenticated]) [data-requires-auth] {
   display: none !important;
}

img.role {
   image-rendering: pixelated;
   height: 1em;
}

.character {
   text-align: center;
   background-color: var(--player-background);
   border-radius: 2em;
   margin: 0.5em;
   padding: 0.5em;

   display: flex;
   justify-content: center;
}

.character > div {
   text-align: center;
   vertical-align: middle;
}

.character > div > div:last-child {
   display: flex;
   align-items: center;
   padding-left: 1em;
   padding-right: 1em;
}

.character > div:not(:last-child) {
   border-right-style: solid;
   border-right-width: 1px;
   border-right-color: var(--text-color);
}

.skin {
   image-rendering: pixelated;
   object-fit: cover;
   object-position: top;
   background-color: var(--player-skin-background);
   border-radius: 1em;
   height: 3em;
   aspect-ratio: 2;
   padding: 0.5em;
   margin-left: 0;
}

.flipped {
   transform: scaleX(-1);
}

.character .avatar,
.character .skin,
.character img.role {
   height: 3em;
   margin-right: 0.5em;
   padding: 0.5em;
}

.character .entry {
   display: contents;
   height: 100%;
   vertical-align: middle;
}

.character img.role {
   padding-left: 0;
}

.twitch.avatar {
   border-radius: 50%;
}

/* Home Page */

[data-view='data'] #home,
[data-view='data'] #footer {
   display: none !important;
}

body {
   display: flex;
   align-content: center;
   justify-content: center;
}

#setup > .panel {
   background-color: var(--setup-panel-background);
}

#home > .panel {
   background-color: var(--home-panel-background);

   width: 50em;
   padding: 1em;
   margin: 2vh;
   align-self: center;
   vertical-align: middle;
   border-radius: 2em;
}

#home > .panel:first-child {
   margin-top: 7vh;
}

#home > .panel:nth-last-child(1) {
   margin-bottom: var(--footer-spacing);
}

#home > .panel:has(.panel) {
   display: flex;
}

#home > .panel > .panel {
   flex: 1;
   text-align: center;
}

/* Name Styles */
/* Most name styles and title effects are in `static/supporters.css`! */

.patron {
   --shadow-color: white;
}

.name {
   --shadow-color: transparent;
   filter: drop-shadow(0.5px 0.75px 5px var(--shadow-color));
}

[data-username='bntfryingpan'] .name,
[data-title-effect='rh.fryingpan'] {
   animation: frying_pan 2s linear infinite;
   background-repeat: repeat;
   background-image: linear-gradient(
      45deg,
      magenta 10%,
      deeppink,
      magenta 40%,
      white 50%,
      magenta 60%,
      deeppink,
      magenta 90%
   );
   background-size: 200%;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   --shadow-color: deeppink;
}

@keyframes frying_pan {
   0% {
      background-position: 200% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}