:root {
    --main-color:#a950ff;
  --main-color-2:#6d1fb8;
  --main-font:Rubik;
  --dark-color-1:#393E46;
  --dark-color-2:#24272b;
  --dark-color-3:#494e57;
  --dark-color-4:#737a85;
}

@font-face {
  font-family: Rubik;
  src: url(Rubik-VariableFont_wght.ttf);
}

input {
  font-family: var(--main-font);
  border-radius:10px;
  background-color: var(--dark-color-2);
  border: solid 1px var(--dark-color-4);
  padding:10px;
  color: white;
}

textarea {
  font-family: var(--main-font);
  border-radius:10px;
  background-color: var(--dark-color-2);
  border: solid 1px var(--dark-color-4);
  padding:10px;
  width:80%;
  height:200px;
  color: white;
  resize: none;
}
  

body, html, p, span, h1, h2, h3 {
  margin: 0;
  padding: 0;
}

body, html {
  background-color: var(--dark-color-1);
  color: white;
  font-family: var(--main-font);
  height:98vh;
}

.formp {
  background-image: url(/resources/imgs/animatedbg.gif);
  background-size: 100px;
    background-repeat: repeat;
}

.navbar {
  width:100%;
  padding:10px;
  box-sizing: border-box;
  background-color: var(--main-color);
  display: flex;
}

.avatareditor {
  display: flex;
}
.avatarcard {
  width:300px;
  height:300px;
  background-color: var(--dark-color-3);
  border-radius:10px;
}

.avataroptions {
  width:800px;
  height:500px;
  background-color: var(--dark-color-3);
  border-radius:10px;
  margin-right: 20px;
  margin-left: 20px;
}

.navbar2 {
  width:100%;
  padding:5px;
  font-size:13px;
  box-sizing: border-box;
  background-color: var(--dark-color-2);
}

.navbar2 a {
  margin-right: 20px;
}

.navbar a {
  margin-right: 30px;
}

.navbar a:hover, .navbar2 a:hover {
  font-weight: bold;
}

a {
  text-decoration: none;
  color: inherit;
}

.landingheader {
  background-image: url(animatedbg.gif);
  background-size: 100px;
    background-repeat: repeat;
  width:100%;
  padding:10px;
  box-sizing: border-box;
  height:500px;
  display: flex;
  align-items: center;
  justify-content: center;
    flex-direction: column;
}

.centered { display:flex;width:100%;flex-direction: column;align-content: center;flex-wrap: wrap; }

.reply {
  display: flex;
    min-height: 300px;
    vertical-align: unset;
    flex-direction: column;
    justify-content: space-between;
}
.headshot { border-radius:64px; width:48px; height:48px; border: 1px gray solid; }
.forumuser {width:100%;display:flex;justify-content:flex-end;align-content: center; align-items: center; text-align:right;}
.forumuser * {margin-right:10px;}


.formcentered {
  width:100%;
  padding:10px;
  background-size: cover;
  box-sizing: border-box;
  height:fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
    flex-direction: column;
  
}

.inline * { display: inline-block; }

.formcentered form {
  padding:50px;
  display: flex;
  align-items: center;
  justify-content: center;
    flex-direction: column;
  background-color: var(--dark-color-3);
  width:400px;
  border-radius:10px;
}

.formcentered form input {
  width:100%;
}


.formcentered form label {
  font-size: 15px;
  font-weight: bold;
  align-self: flex-start;
}

.landingheader img {
  height: 150px;
}

button {
  font-family: var(--main-font);
  background-color: var(--main-color);
  color: white;
  border: solid 2px var(--main-color-2);
  font-size:16px;
  border-radius:10px;
  padding:10px;
}

button:hover {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}
  
.buttongroup * {
  display: inline-block;
  margin-right:10px;
}

input[type=color] {
  padding: 0!important;
  border:none;
  border-radius:0;
  outline: none;
  background-color:none;
  border-radius:4px;
}

input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0; 
}
input[type=color]::-webkit-color-swatch {
    border: none;
}

#Head {
  width: 40px;
  height: 40px;
}

#ArmL {
  width: 40px;
  height: 80px;
}

#ArmR {
  width: 40px;
  height: 80px;
}

#LegL {
  width: 40px;
  height: 80px;
}

#LegR {
  width: 40px;
  height: 80px;
}

#Torso {
  width: 80px;
  height: 80px;
}

#avatar { width:100%; }

table { display: block; border-spacing: 0; }
td, th { border: 1px solid var(--dark-color-4); padding: 8px; min-height: 30px; max-height: 30px;}
.fcategories td,.fcategories th {min-width:20vw;}
.fthreads td,.fthreads th {min-width:25vw;}
.spacebetween {display:flex;justify-content:space-between;}
tr:first-child { background-color: var(--main-color); }
tr:first-child * { border-color: transparent; }
th:first-child { border-top-left-radius: 10px; }
th:last-child { border-top-right-radius: 10px; }

.content {padding:8px;}

.forums {display:flex;justify-content:space-between;padding:30px;}

.circle { width:16px;height:16px;border-radius:16px; }
.green {background-color:#9aff47;}
.yellow {background-color:#fff947;}
.cyan {background-color:#47ffa9;}
.orange {background-color:#ff8645;}
.red {background-color:#ff5b45;}