.comfortaa-<uniquifier> {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body{
  color:#222b12;
  font-family:Comfortaa;
  height:100vh;
  width:100vw;
  margin:0;
  padding:0;
  overflow:hidden;
  position:relative;
}

.page{
  height:100%;
}

#page{
  overflow-y:scroll;
  overflow-x:hidden;
  border:none;
  width:100%;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #373f28;
  border-radius:5px;
}

::-webkit-scrollbar-thumb {
  background: #5c6649;
  border-radius:5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #80836b;
}

.chibi{
  display:block;
}

@media only screen and (max-width:1200px) {  
  .chibi{
    display:none;
  } 
}

.shrine_content{
  background-color:orange;
  box-sizing:border-box;
  border-color:#222b12;
  border-style:dashed;
  border-width:2px;
  margin:10px 10px 10px 10px;
  padding:5px 10px 5px 10px;
  border-radius:5px;
  overflow:hidden;
}

.content, .nav_content, .character, .character_hover{
  background-color:#5c6649;
  border-color:#222b12;
}

.content, .nav_content, .character, .character_hover, .content2{
  box-sizing:border-box;
  border-style:dashed;
  border-width:2px;
  margin:10px 10px 10px 10px;
  padding:5px 10px 5px 10px;
  border-radius:5px;
  overflow:hidden;
}

.content2{
  width:50%;
  background-color:#80836B;
  border-color:#222b12;
}

.content img{
  max-width:100%:
}

.pagewrap2{
  overflow-y:scroll;
  width:100%;
  height:100%;
  display:flex;
  flex-wrap:wrap;
}

.pagewrap3{
  overflow-y:scroll;
  width:100%;
  height:100%;
}

.character, .character_hover{
  height:250px;
  width:170px;
  transition:.2s;
}

.character_hover{
  background-color:#80836b!important;
}

.icon, .icon_hover{
  background-repeat:no-repeat;
  background-size:cover;
  background-color:white;
  margin:auto;
  border-radius:10px;
  transition:.2s;
}

.icon{
  width:100px;
  height:100px;
}

.icon_hover{
  width:120px;
  height:120px;
}

.title{
  margin:5px;
}

h1{
  font-size:20px;
  margin:4px;
}

p{
  margin:4px;
}

.nav_content{
  list-style-type:none;
}

.nav_content li{
  transition-duration:.2s;
}

.nav_content li:hover{
  background-color:#cfc1b650;
}

a{
  text-decoration:none;
}

a:link, a:visited{
  color:#222b12;
}

a:hover, a:active{
  color:#8e4936;
}

/* Phones */
@media only screen and (max-width: 600px) {

.pagewrap{
  margin:auto;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.page{
  width:100%;
}

#page{
  height:83%;
}

.nav_small{
  margin-bottom:10px;
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
}

.nav_large{
  display:none;
}

.nav_content:hover{
  background-color:#80836b;
}
  
}

/* Tablets */
@media only screen and (min-width: 600px) {
  
}

/* PCs */
@media only screen and (min-width: 730px) {

.pagewrap{
  margin:auto;
  width:90%;
  height:100%;
  display:flex;
  flex-direction:row;
  justify-content:center;
}

.page{
  width:80%;
  max-width:700px;
}

#page{
  height:100%;
}

.nav_small{
  display:none;
}

.nav_large{
  height:100%;
  width:20%;
  min-width:100px;
  max-width:200px;
}
  
}