/*
    insideworld
    CSS
    2018-1-12
    YOURAN
*/
*{
  text-shadow:0 1px 2px rgba(0,0,0,.15);
  font-family: -apple-system,BlinkMacSystemFont,"Pingfang SC",Roboto,"Open Sans","Microsoft Yahei Light","Microsoft YaHei","Helvetica Neue",Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif !important;
  color: #505050;
  -webkit-transition: all .24s ease;
  transition: all .24s ease;
}
strong{
  color:#FF706C;
}
a{
  text-decoration:none;color:black;
  -webkit-transition:all .24s ease;
  transition:all .24s ease;
}
::selection {
    background-color: black;
    color: white;
}
:-webkit-autofill {
  -webkit-text-fill-color: #505050 !important;
  transition: background-color 5000s ease-in-out 0s;
}
img{
	max-width:100%;
  border-radius:8px;
  -webkit-transition:all .24s ease;
  transition:all .24s ease;
}
body{
  transition: all .3s cubic-bezier(.3, 1, .5, 1);
  line-height: 1.6;
}
html::before{
  content:'';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
}
#index-title{
  text-align: center;
  font-size: 5rem;
}
code{
  padding: 3px 5px;
    font-family: 'SF Mono', Menlo, Courier New, sans-serif;
    font-size: 12px;
    color: #cd4945;
    background-color: #fafafa;
    border-radius: 3px;
}

.login,.user-panel,.panel{
  vertical-align: middle;
  background-color: #f5f5f5;
  margin: auto;
  width:60%;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 1em;
  border-radius: 8px;
}

.love{
  vertical-align: middle;
  background-color: hsla(0,0%,100%,.95);
  margin: auto;
  width:60%;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); 
  text-align: center;
  margin-bottom: 1em;
  border-radius: 8px;
}
.content{
  padding:0.9em;
}
#frontapi{
  width:95%;
  margin: auto;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
#text{
  width:90%;
  outline: none;
  font-size: 1.2em;
  background-color: rgba(255,255,255,0);
  border-bottom:2px solid black;
  border-top: none;
  border-left: none;
  border-right: none;
  margin: 0.5em;
}

#submit{
  width:10em;
  background-color: white;
  border:2px solid black;
  padding:0.5em;
  border-radius: 5px;
  margin-right: 0em;
  margin-top: 1em;
  margin-bottom: 1em;
}
#yes{
  width:10em;
  background-color: white;
  border:2px solid black;
  padding:0.5em;
  border-radius: 5px;
  float:left;
  margin-left: 10em;
  margin-top: 1em;
  margin-bottom: 1em;
}
#no{
  width:10em;
  background-color: white;
  border:2px solid black;
  padding:0.5em;
  border-radius: 5px;
  float:right;
  margin-right: 10em;
  margin-top: 1em;
  margin-bottom: 1em;
}
#user-meta:before,#user-meta:after,.content:before,.content:after{
  clear: both;
  content:'';
  display: table;
}
.api-list-item{
  margin-left:1rem;
  margin-right: 1rem;
}
.api-list-item img{
  width:5rem;
  height: 5rem;
}
.api-list-item span{
  position: relative;
  right:3rem;
  border-radius: 5px;
  border: 1px solid skyblue;
  background-color: skyblue;
  color:white;
  padding: 5px;
}
#gra{
  border-radius: 50%;
  border: 1px solid black;
}
#sk-info,#web-info,#api-info,#status-info{
  margin: 2.5%;
  width:45%;
  float:left;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.content li{
  list-style: none;
  width:60%;
  padding: 0.5em;
  margin: auto;
}
.content li:hover{
  background: #efefef;
  border-radius: 5px;
}
@media screen and (max-width: 786px){
  .login,.user-panel,.panel,.love{
    width:98%;
  }
  .api-list-item img{
    position: relative;
    left:2.5rem;
  }
  .api-list-item span{
    right:1.5rem;
  }
  #index-title{
    font-size:2.5rem;
  }
  #submit{
    width:5em;
    float: right;
    margin-right: 1em;
  }
  #yes{
    width:5em;
    float: left;
    margin-left: 1em;
  }
  #no{
    width:5em;
    float: right;
    margin-right: 1em;
  }
  #api-info,#sk-info{
    width:90%;
    overflow: scroll;
    float: none;
    box-shadow: none;
    background-color: #F8F8F8;
    border-radius: 1em;
  }
}
  .copyright {
  position: relative;
  text-align: center;
  font-size: 11px;
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  color: grey;
  }
.say {
  position: relative;
  text-align: center;
  font-size: 25px;
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  color: grey;
  }
  .warning {
  position: relative;
  text-align: center;
  font-size: 11px;
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  color: #cd4945;
  }