html {
  margin: 0%;
  padding: 0%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #ecb799;
  font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
}

nav {
  background-color: rgb(78, 51, 51);
  padding: 1vw;
  margin: 0;
  height: 10vw;
}

a {
  color: #c23d00;
  text-decoration: none;
}


/* splash page */
.splash {
  background-image: url("https://64.media.tumblr.com/4b8f1625d8be2ef0b73bd9335e513d40/d51f0dac78e9bead-05/s400x600/aaa4ec97dc58eaee6b2f3bd9cee2aeb463151d1b.pnj");
  background-size:auto;
  width: 100%;
  height:40vw;
  background-color: rgba(0, 0, 0, 0.1);
}

.pageheading{
  margin: 2vw auto;
  text-align: center;
}

.logsign-container {
  max-width: 40vw;
  margin: auto;
}

.submit{
  text-align: center;
  margin: auto;
  width: 30vw;
}

/* home page */
.home {
  background-color: #52290e;
  margin: auto;
  height: 70vw;
  text-align: center;
}

.updates-container {
  background-color: #ecb799;
  margin: 2vw auto;
  padding: 1vw;
  border-radius: 10vw;
}

.friends-online {
  background-color: #ecb799;
  border-radius: 10vw;
  margin: 2vw auto;
  padding: 1vw;
}


/* browse characters */

.character-box {
  background-color: #ecb799;
  border-radius: 10vw;
  border: 1vw double #52290e;
  margin: 1vw auto;
  padding: 3vw;
  display: flex;
  flex-direction: column;
  width: 90%;
}

.character-template {
  background-color: #ceb5a7;
  font-family: 'Courier New', Courier, monospace;
  float: left;
  padding: 1vw;
  width: 80%;
}

.character-box img {
  float: right;
  width: 50%;
  border-radius: 6vw;
}
.postpage{
  text-align: right;
  margin-right: 1vw;
}

/* profile page */

.userpage{
  background-color: #ecb799;
  width: 70vw;
  margin: 1vw auto;
  padding: 1vw;
}
.bio{
  text-align: justify;
  text-align-last: left;
}
.userpage img{
  width: 20%;
}

/* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #52290e;
}

.navbar h1 {
  color: #ff8800;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-align: center;
  font-size: 60pt;
}

/* Navigation links */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

.login-drop {
  float: right !important;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.login-drop .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Add a red background color to navigation links on hover */
.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: rgb(49, 28, 13);
}

.login-drop:hover .subnavbtn {
  background-color: rgb(49, 28, 13);
}

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  background-color: rgb(205, 89, 11);
  width: 40%;
  z-index: 1;
}
.content-1{
    left: 0;
}
.content-2 {
    right:0;
    width: 10%;
}

/* Style the subnav links */
.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}

.login-drop:hover .subnav-content {
  display: block;
}

/* style the container */
.container {
  position: relative;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px 0 30px 0;
  margin: auto;
  width: 40%;
}

/* style inputs and link buttons */
input,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none;
  /* remove underline from anchors */
}

input:hover,
.btn:hover {
  opacity: 1;
}

/* style the submit button */
input[type=submit] {
  background-color: #be7800;
  color: white;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #ff8800;
}

/* Two-column layout */
.col {
  float: left;
  width: 50%;
  margin: auto;
  padding: 0 50px;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* vertical line */
.vl {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  border: 2px solid #ddd;
  height: 175px;
}

/* text inside the vertical line */
.inner {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 10px;
}

/* hide some text on medium and large screens */
.hide-md-lg {
  display: none;
}

/* bottom container */
.bottom-container {
  text-align: center;
  background-color: #53290f;
  border-radius: 0px 0px 4px 4px;
  padding: 2vw;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .col {
    width: 100%;
    margin-top: 0;
  }
  .navbar h1{
    font-size: 50pt;
  }

  /* hide the vertical line */
  .vl {
    display: none;
  }

  /* show the hidden text on small screens */
  .hide-md-lg {
    display: block;
    text-align: center;
  }
}