@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css');

:root {
color-scheme:dark;
}

::selection {
    background-color:rgba(200,200,200,0.25);
}

::-webkit-scrollbar {
    width: 15px;
}
 
::-webkit-scrollbar-track {
    opacity:0;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #444; 
    box-shadow: 0 0 25px 5px rgba(30,30,30,0.25);
    cursor:move;
}

html, body {
display:flex;
align-items:center;
justify-content:center;
background:#333;
padding:0;
margin:0;
min-height:100%;
flex-direction:column;
color:white;
width:100dvw;
}	

*:not(code) {
font-family: 'Quicksand', sans-serif;
}

br {
width:1px;
}

.container {
color:white;
background:#444;
border:3px solid #555;
padding:32px;
border-radius:16px;
display:inline-block;
text-align:center;
margin:8px;
max-width:calc(90dvw - 70px);
}

.abg {
background-color:#222;
background:linear-gradient(rgba(51, 51, 51, 0.9), rgba(51, 51, 51, 0.9)), url(bg.jpg);
background-size:50%;
animation:abg 300s linear;
background-position:0% 0%;
background-attachment:fixed;
}

@keyframes abg {
100% {background-position:-1000% 100%;}
}

/*

@supports(animation-timeline:scroll()) {
.abg {
animation:abg-scroll linear;
animation-timeline:scroll();
}
}

@keyframes abg-scroll {
100% {background-position:0% 25%;}
}

*/

.tut-container, .tut {
margin:0;
padding:0;
width:100%;
height:80dvh;
}

h2 {
margin-top:8px;
padding-top:0;
display:inline-block;
}

a.button, input[type=submit] {
color:white;
background:#333;
border:2px solid #555;
text-decoration:none;
padding:8px;
border-radius:8px;
display:inline-block;
text-align:center;
margin:4px;
}

i {
font-size:smaller;
}

a {
color:white;
}

.button-primary {
background:white;
font-weight:600;
color:#333;
}

.button-discord {
background:#5865F2 !important;
border:2px solid #4855E9 !important;
}

.chat-container {
height:calc(100dvh - 80px);
width:100%;
overflow-y:visible;
margin:0;
padding:0;
overflow-x:auto;
}
	
.chat-container img {
border-radius:16px;
}

.chat-input-container {
height:48px;
width:calc(100dvw - 32px);
padding:16px;
background:#444;
}

.chat-input-container input {
color:white;
background:#333;
border:2px solid #555;
text-decoration:none;
padding:8px;
border-radius:8px;
display:inline-block;
margin:8px;
width:calc(100dvw - 184px);
}

.chat-input-container input[type=submit] {
width:100px;
margin:8px;
}

.message {
margin:12px;
text-align:left;
max-width:1000px;
}

.name {
text-transform: uppercase;
font-size:large;
font-weight:700;
display:block;
margin-bottom:4px;
}

.loading {
margin:12px;
padding:0;
}

/***************************************************
 * Generated by SVG Artista on 12/15/2023, 6:47:46 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {

0% {
    opacity:1;
    stroke-dashoffset: 635.1598510742188px;
    stroke-dasharray: 635.1598510742188px;
  }
    

  90% {
opacity:1;
    stroke-dashoffset: 0;
    stroke-dasharray: 635.1598510742188px;
  }
100% {
opacity:0;
    stroke-dashoffset: 0;
    stroke-dasharray: 635.1598510742188px;
  }

}

@keyframes animate-svg-stroke-1 {

0% {
    opacity:1;
    stroke-dashoffset: 635.1598510742188px;
    stroke-dasharray: 635.1598510742188px;
  }
    

  90% {
opacity:1;
    stroke-dashoffset: 0;
    stroke-dasharray: 635.1598510742188px;
  }
100% {
opacity:0;
    stroke-dashoffset: 0;
    stroke-dasharray: 635.1598510742188px;
  }

}


.svgElem-1 {
  -webkit-animation: animate-svg-stroke-1 5s ease 0s both infinite;
          animation: animate-svg-stroke-1 5s ease 0s both infinite;
}


.box {
color:white;
background:#484848;
border:2px solid #626262;
padding:16px;
border-radius:16px;
}

.box.box-success {
background:#3f563d;
border:2px solid #2b6526;
}

.box.box-failure {
background:#563e3d;
border:2px solid #652926;
}

.message .box {
margin-top:8px;
}

.control {
position:fixed;
bottom:104px;
left:24px;
background:#484848;
border:2px solid #626262;
padding:16px;
border-radius:8px;
z-index:7;
opacity:.8;
backdrop-filter:blur(7px);
}

.control-active {
display:none;
}

.control-inactive {
cursor:pointer;
}

.control-active, .control-inactive {
transition:display 1s;
}

.disclaimer .box {
margin:8px;
max-width:1000px;
text-align:left;
display:inline-block;
}

.divider {
padding:12px;
}

.divider:before, .divider:after {
content:"---------------------";
letter-spacing:-2px;
margin:8px;
}

.tokencount {
margin:0;
padding:0;
}

@media screen and (min-width: 800px){
.message, .loading {
max-width:800px;
margin:12px auto;
}
}

.img {
width:200px;
height:200px;
border-radius:16px;
overflow:hidden;
position:relative;
background-size:cover;
background-repeat:no-repeat;
}

.img a {
position:absolute;
bottom:-80px;
left:8px;
transition:bottom 1s;
width:160px;
}

.img:hover a {
bottom:8px;
}

table {
  display:inline-block;
  max-width:100%;
  font-size:small;
}

th, td {
  border: 1px solid white;
  padding: 5px;
  text-align: center;
  margin:0;
}

th {
  font-weight:700;
}

tr i {
display:inline-block;
}

/* log in/sign up inputs from https://codepen.io/chris__sev/pen/LYOyjY */
.group-mat		  { 
  position:relative; 
  margin-bottom:45px; 
  display:inline-block;
}
input.mat 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  border:none;
  border-bottom:1px solid #757575;
  background:#444;
  color:white;
  
}
input.mat:focus 		{ outline:none; }

label.mat 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input.mat:focus ~ label.mat, input.mat:valid ~ label.mat		{
  top:-20px;
  font-size:14px;
  color:#fff;
}

/


.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#888; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

input.mat:focus ~ .bar:before, input.mat:focus ~ .bar:after {
  width:50%;
}