*{
    margin: 0;
    padding: 0;
    font-family: "Depature","Fusion";
}
@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(2vh);

  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@font-face {
  font-family: "Depature";
  src: url(DepartureMono-Regular.woff2);
}
@font-face {
  font-family: "Fusion";
  src: url(fusion-pixel.woff2);
}

:root{
  --primary-color: #202222;
  --second-color: #191A1A;
  --theme-color: #3CB371;
  --border-color: #3C3E3F;
  --white-color: #8C9090;
}

#debug{
  width:80%;
  background-color: #191A1A;
  word-wrap: break-word;
  border: .2vh solid #8C9090;
  border-radius: 1vh;
  height: 70%;
  justify-content: center;
  text-align: left;
  padding: 4%;
  overflow: scroll;
  font-size: small;
  margin-top: 5%;

}
#debug>pre{
  background-color: #191A1A;
}

#debug,textarea{
  resize: none;
  border: none;
  scrollbar-color: transparent transparent;
  
}

button{
	/* 清除默认边框 */
	border:0;
	outline:none;
   /*清除默认背景 */
   background-color: transparent;
	}

a{
  text-decoration: none;
  color: 	#3CB371;
}

body{
    background: #202222;
    color: #FCFDF8;
}
  
@media only screen and (orientation: landscape) {
    body {
      /* background-color: lightblue; */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #main{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        background-color: #202222;
        border-radius: 1%;
        align-items: center;
    }
    #navigate{
        width: 30vmin;
        height: 100%;
        background-color: #202222;
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    #logo{
      margin-top: 5%;
      margin-bottom: 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: xx-large;
    }
    #constructing{
      height: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: top;
    }

    #others{
      width: 90%;
      margin-top: 20%;
      height: 20%;
      color: #9c9ca3;
      display: flex;
      flex-direction: column;
      justify-content: left;
      align-items: center;
    }
    #others>h2{
      width: 100%;
      display: flex;
      align-items: center;
      font-size: x-large;
      justify-content: center;
      color: #b4b4b4;
    }
    #others>div{
      width:90%;
      height: auto;
      transition: all 0.2s ease;
      border-radius: .2rem;
      padding: 5%;
      margin-left: 5%;
      margin-top: 5%;
      display: flex;
      align-items: center;
      justify-content: left;
      font-size: normal;
    }
    #threshold{
      width: 90%;
      background-color: #3CB371;
      color: #3CB371;
    }
    #slideValue{
      color: #3CB371;
    }
    #author{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: large;
        font-family: "Fusion";
    }
    #github{
      display: flex;
    }
    #container{
        width: calc(98% - 30vmin);
        height: 98%;
        background-color: #191A1A;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
    }
    #searchwindow{
      margin-top: 4vh;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: column;
      width: min(80%,80vmin);
      height: 16%;
      background-color: var(--primary-color);
      border-radius: .2rem;
      border: .15rem solid #3C3E3F;
    }
    #searchwindow>form{
      width: 95%;
      height: 50%;
    }
    
    #userinput{
        color: #FCFDF8;
        width: 100%;
        height:80%;
        font-size: 16px;
        border: none;
        text-align: left; 
        vertical-align: top;
        background-color: var(--primary-color);
        outline: none;
        
    }
    #userinput::selection{
      background-color: #3CB371;
      color: #fff;
    }
    #control{
      width: 100%;
      display: flex;
      /* background-color: aquamarine; */
      float: bottom;
      margin-top: 2vmin;
      height: 25%;
      justify-content: flex-end;
    }
    #settings, #search{
      display: flex;
      width: 50%;
    }

    #Sync>svg{
      width: auto;
      height: 60%;
    }

    #search{
      align-items: right;
      justify-content: right;
    }
    .btn>svg{
      height:60%;
      width: 60%;
      margin-left: 1vmin;
    }
    .btn{
      display: flex;
      align-items: center;
      transition: all 0.4s ease;
      justify-self: center;
      border-radius: .5rem;
      justify-content: flex-end;
      height: auto;
      margin: .5vmin;
      color: #8C9090;
      cursor: pointer;
      font-size: small;
      user-select: none;
    }
    .btn:hover{
      background-color: #3C3E3F;
    }

    #searchbtn{
      background-color: #3C3E3F;
    }
    #searchbtn:hover{
      background-color: #8C9090;
      color: #FCFDF8;
    }
    #loader{
      width: 3vmin;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #loading {
      width: 1vmin;
      height: 1vmin;
      border: .3vmin solid #d9ab2d;
      border-top-color: transparent;
      border-radius: 100%;
      display: none;
      animation: circle infinite 0.75s linear;
    }
    #success,#error,#loading{
      width: 1vmin;
      height: 1vmin;
      
      border-top-color: transparent;
      border-radius: 100%;
    }
    #success{
      border: .3vmin solid #3CB371;
      display: flex;
    }
    #error{
      border: .3vmin solid salmon;
      display: none;
    }
    
    #status{
      display: flex;
      justify-self: center;
      font-size: small;
      height: auto;
      width: auto;
      margin: .5vmin;
      margin-left: 0;
      
      justify-content: center;
      align-items: center;
      color: #3C3E3F;
      user-select: none;
    }

    #sync, #sync>svg{
      margin-right: 0;
    }


    #status>svg{
      height:60%;
      width: 60%;
      margin-left: .5vmin;
    }
    #results{
      /* background-color: #fff; */
      width: min(80%,80vmin);
      height: 20%;
      margin-top: 1%;
      display: flex;
      justify-content: left;
      align-items: left;
      flex-wrap: wrap;
      align-content: flex-start
    }

    .result{
      width: 100%;
      background-color: #202222;
      border: .15rem solid #3C3E3F;
      border-radius: .4vw;
      display: flex;
      justify-content: left;
      margin: 1%;
      margin-top: .5%;
      opacity: 0;
      animation: fadein .5s  ease-in-out forwards;
      font-size: .5vw;
    }


    .repo,.stats{
      display: flex;
      margin: 1%;
      width: 90%;
      align-items: center;
    }

    .repo>div{
      font-size: larger;
      display: flex;
      flex-wrap: wrap;
    }

    .title{
      font-size: medium;
      padding-left: 2%;
      width: 100%;
    }

    .desc{
      font-size: small;
      width: 100%;
      padding-left: 2%;
      width: auto;
      color: #989999;
    }

    .stats{
      margin-top: 1.5vh;
      font-size: small;
      color: #8C9090;
      padding-left: 2%;
      user-select: none;
    }
    .langlogo,.score{
      color: #aaa;
    }
    .starlogo,.forklogo,.langlogo,.scorelogo,.simlogo{
      margin-left: 1%;
      margin-right: 1%;
      color: #2eb1b1;
    }
    .starlogo{
      margin-left: 0;
    }
    .forks,.stars{
      padding-left: .5%;
      font-size: small;
    }
    .sim{
      color: #3CB371;
      font-size: small;
    }
    .info{
      width: 90%;
    }
    .link{
      background-color: #333;
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .2s linear;
    }
    .link>a{
      color: #fff;
    }

    .link:hover{
      background-color: #3CB371;
    }
  
  }
  @media only screen and (orientation: portrait) {
    body {
      background-color: salmon;
    }
  }