@import url("https://fonts.googleapis.com/css?family=Montserrat");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {
    width: 8.33%;
  }
  .col-s-2 {
    width: 16.66%;
  }
  .col-s-3 {
    width: 25%;
  }
  .col-s-4 {
    width: 33.33%;
  }
  .col-s-5 {
    width: 41.66%;
  }
  .col-s-6 {
    width: 50%;
  }
  .col-s-7 {
    width: 58.33%;
  }
  .col-s-8 {
    width: 66.66%;
  }
  .col-s-9 {
    width: 75%;
  }
  .col-s-10 {
    width: 83.33%;
  }
  .col-s-11 {
    width: 91.66%;
  }
  .col-s-12 {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 12%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 88%;
  }
  .col-12 {
    width: 100%;
  }
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
  background-color: var(--accent);
  color: var(--dark);
  height: 100%;
  overflow: visible;
}

html a, body a {
  text-decoration: underline;
  color: var(--maintext);
}

html a:hover, body a:hover {
  color: var(--mainlink);
}

body.dark-mode {
  --background: rgb(148, 137, 130);
  --highlight: rgb(202, 182, 181);
  --superlight: rgb(223, 209, 206);
  --underline: rgb(63, 49, 61);
  --accent: #3A2E39;
  --dark: rgb(44, 32, 42);
  --shadow: rgb(54, 53, 56);
  --button: rgb(223, 209, 206);
  --mainbackground: rgb(95, 87, 95);
  --mainbackgroundhover: rgb(66, 61, 66);
  --maintext: #d4cbca;
  --placeholdertext: #d4cbca94;
  --mainaside: rgba(194, 184, 178, 0.103);
  --mainaccent: #50434d;
  --maininput: rgb(114, 100, 113);
  --maincolor: #3A2E39;
  --maincolorlight: #925c87;
  --maincolorlightbutton: #be84b3;
  --maincolorlighthover: #815077;
  --maincontentlink: #c5a6be;
  --mainlink: #F09D51;
}

body.light-mode {
  --background: #C2B8B2;
  --highlight: rgb(89, 84, 90);
  --superlight: #312f2f;
  --underline: #e7e7e7;
  --accent: #e0e0e0;
  --dark: rgb(207, 207, 207);
  --shadow: rgb(191, 189, 197);
  --button: rgb(241, 233, 232);
  --mainbackground: rgb(242, 241, 243);
  --mainbackgroundhover: rgb(223, 213, 223);
  --maintext: rgb(58, 55, 55);
  --placeholdertext: #2A2B2A94;
  --mainaside:rgba(194, 184, 178, 0.103);
  --mainaccent: #D7CDCC;
  --maininput: #f7f2f7;
  --maincolor: rgb(165, 114, 161);
  --maincolorlight: #b976ac;
  --maincolorlightbutton: #9c6592;
  --maincolorlighthover: #815077;
  --maincontentlink: #614f5d;
  --mainlink: #F09D51;
}

main {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--mainbackground);
  color: var(--maintext);
  padding: 2em;
  float: right;
  border-right-width: 0;
  margin-top: -1px;
  margin-bottom: .5em;
  min-height: 89vh;
  width: 100vw;
  -webkit-box-shadow: -1px -1px 1px 0 var(--shadow);
          box-shadow: -1px -1px 1px 0 var(--shadow);
}

header {
  height: 4.5em;
  position: relative;
}

header h4 {
  padding: .5em 1em 1px 1em;
  display: inline;
  background-color: var(--mainbackground);
  color: var(--maintext);
  border-radius: 2px 2px 0 0;
  font-size: 1em;
  font-weight: 200;
  position: absolute;
  top: 1.5em;
  left: 12%;
  display: none;
  -webkit-box-shadow: -2px -2px 2px 0 var(--shadow);
          box-shadow: -2px -2px 2px 0 var(--shadow);
}

.loginform {
  border-right-width: 0;
  border-top-width: 0;
  min-height: 1.4em;
  float: right;
  margin: .25em 0 .25em 0;
  padding: .25em 0 .5em 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--accent)), to(var(--underline)));
  background-image: linear-gradient(to bottom, var(--accent), var(--underline));
}

.loginform .login {
  float: right;
  margin: 0;
  padding: 0;
}

.loginform .login input {
  float: right;
  font-family: 'Montserrat';
  height: 1.4em;
  padding: 0;
  margin-left: .5em;
  text-align: center;
  font-size: 1em;
  background-color: var(--superlight);
  border: none;
  width: 33%;
}

.loginform .login input:focus {
  outline: none;
}

.loginbtn, .signupbtn, .logoutbtn {
  float: right;
  width: 5em;
  height: 1.4em;
  font-size: 1em;
  border: none;
  text-decoration: none;
  text-align: center;
  margin-left: .5em;
  cursor: pointer;
}

.loginbtn {
  background-color: var(--button);
  color: var(--dark);
}

.signupbtn, .logoutbtn {
  background-color: var(--maincolorlight);
  color: var(--button);
}

.darkmodebtn {
  font-family: 'Montserrat';
  height: 1.4em;
  font-size: 1em;
  border: none;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
  padding: .5em;
  display: block;
  background-color: transparent;
  color: var(--superlight);
  cursor: pointer;
}

.loginbtn:focus, .signupbtn:focus, .logoutbtn:focus, .darkmodebtn:focus {
  outline: none;
}

.search {
  position: relative;
  float: right;
  clear: both;
  min-width: 350px;
}

.search input {
  font-family: 'Montserrat';
  width: 100%;
  text-indent: .5em;
  font-size: 1em;
  height: 1.4em;
  background-color: var(--mainbackground);
  color: var(--maintext);
  border: none;
}

.search input:focus {
  outline: none;
}

.search .searchbtn {
  width: 20%;
  display: inline-block;
  border: none;
  background-color: var(--maincolorlight);
  color: var(--button);
  position: absolute;
  right: 0;
  top: 0;
  text-indent: -.07em;
  font-size: 1em;
  width: 1.4em;
  cursor: pointer;
}

.search .searchbtn:focus {
  outline: none;
}

.signupform input {
  display: block;
  margin: 1em auto;
  height: 2em;
  -webkit-box-shadow: 0 0 1px var(--background) inset;
          box-shadow: 0 0 1px var(--background) inset;
  padding: 0;
  background-color: var(--superlight);
  color: var(--dark);
  outline: none;
  border: none;
}

.signupform .signupbtn {
  display: block;
  float: none;
  margin: 1em auto;
}

nav {
  float: left;
  padding: 0;
}

nav .logo {
  width: 100%;
}

nav .logo img {
  display: block;
  width: 4.5em;
  margin: 0 auto;
}

nav h3 {
  font-size: 1em;
  text-align: center;
  margin: 1.5em 0 1em 0;
  border-bottom: solid 1px var(--maintext);
  color: var(--highlight);
}

nav ul {
  list-style: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

nav ul li a {
  color: var(--superlight);
  text-decoration: none;
  padding: .5em;
  text-align: center;
  float: left;
}

footer {
  display: block;
  clear: both;
  margin-top: 1em;
  padding: 1em;
  text-align: center;
  height: 3em;
  color: var(--dark);
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--accent)), to(var(--underline)));
  background-image: linear-gradient(to top, var(--accent), var(--underline));
}

footer a {
  color: var(--superlight);
  text-decoration: none;
  padding: .5em 2em .5em 1.5em;
}

.characterlist {
  display: block;
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-fill: auto;
          column-fill: auto;
  min-height: 80%;
}

.characterlist .charheading {
  border-bottom: 1px solid var(--shadow);
  -o-border-image: linear-gradient(to right, var(--shadow) 50%, #ffffff00 85%);
     border-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--shadow)), color-stop(85%, #ffffff00));
     border-image: linear-gradient(to right, var(--shadow) 50%, #ffffff00 85%);
  border-image-slice: 1;
  font-weight: 200;
  font-size: 1.5em;
  margin: 0;
}

.characterlist .charsesection {
  display: inline-block;
  width: 100%;
  padding: .5em;
}

.characterlist a {
  display: block;
  background-color: var(--mainbackground);
  color: var(--maintext);
  border: none;
  font-size: 1em;
  padding: 3px 0 3px 25px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .characterlist {
    -webkit-column-count: 2;
            column-count: 2;
  }
  nav h3 {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .characterlist {
    -webkit-column-count: 3;
            column-count: 3;
  }
  header h4 {
    display: block;
  }
  nav ul {
    float: none;
    display: block;
  }
  nav ul li a {
    float: none;
    display: block;
  }
}

@media only screen and (min-width: 1168px) {
  /* For laarge desktop: */
  .characterlist {
    -webkit-column-count: 5;
            column-count: 5;
  }
}

.box {
  margin: 2em 0;
  -webkit-box-shadow: 1px 1px 1px var(--maincolor);
          box-shadow: 1px 1px 1px var(--maincolor);
  background-color: rgba(194, 184, 178, 0.103);
}

.box h2 {
  background-color: var(--maincolor);
  color: var(--button);
  display: block;
  padding: .5rem 1rem;
  margin: 0 0 1rem 0;
}

.box p {
  padding: 0 1rem;
  margin: .5rem 0;
}

.box p:last-child {
  padding-bottom: 1rem;
}

.box a {
  text-decoration: none;
}

.box .serchresultbox {
  padding: 1rem;
}

.error {
  background-color: var(--maincolorlight);
  font-family: 'Montserrat';
  color: var(--button);
  display: block;
  margin: auto;
  padding: .5rem;
  text-align-last: center;
}

.button1, #addContentRowbtn, #addspsectionbtn, #deleteimgfromDB {
  padding: .20rem .75rem;
  background-color: var(--maincolorlight);
  color: var(--button);
  border: none;
  border-radius: 4px;
  margin: 0 .25rem;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Montserrat';
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  text-align: center;
}

.button1:hover, #addContentRowbtn:hover, #addspsectionbtn:hover {
  background-color: var(--maincolorlighthover);
}

.button1:focus, #addContentRowbtn:focus, #addspsectionbtn:focus {
  outline: none;
}

.button2, .addspscategorybtn, #addImgbtn {
  padding: .20rem .75rem;
  background-color: transparent;
  color: var(--maincolorlightbutton);
  border: 1px solid var(--maincolorlightbutton);
  border-radius: 4px;
  margin: 0 .25rem;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Montserrat';
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  text-align: center;
}

.button2:hover, .addspscategorybtn:hover, #addImgbtn:hover {
  background-color: var(--mainbackgroundhover);
}

.button2:focus, .addspscategorybtn:focus, #addImgbtn:focus {
  outline: none;
}
/*# sourceMappingURL=main.css.map */