@font-face{
  font-family: "Fira Code";
  src: url("fonts/static/FiraCode-Regular.ttf") format("truetype");
}

@font-face{
  font-family: Hack-local;
  src: url("fonts/Hack-Regular.ttf") format("truetype");
}

body{
  background-color: #0f0f0f;
}

* {
  font-family: "Fira Code", monospace, Hack-local;
  font-size: 1.2rem;
  color: #dfdfdf;
}

h1, h2, h3 {
  text-align: center;
}

a:link{
  color: #3da9db;
}

a:visited{
  color: #00ff9c;
}

a:hover{
  color: #fffc58
}

a:active{
  color: 00ffc8;
}

.lang{
  display: flex;
  justify-content: center;
  align-items: center; 
  text-align: center;
}

.lang_button{
  background-color: #0f0f0f !important;
  font-size: 2.5vh;
  border: 2px solid #dfdfdf;
  border-radius: 8px;
  height: 4vh;
  width: 16vw;
}

.lang_button:active{
  border-color: #afafaf;
  color: #bfbfbf;
}

.about_me {
  padding-left: 0px;
}

.titles, .judgement {
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 8px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.titles{
  background-image: linear-gradient(#0f0f0f, #0f0f0f), linear-gradient(#0f0f0f, #dfdfdf);
}

.judgement{
  background-image: linear-gradient(#0f0f0f, #0f0f0f), linear-gradient(#dfdfdf 85%, #0f0f0f);
}

#noscript{
  border: 4px solid #d1c002;
  border-radius: 16px;
  padding: 8px;
}

#TEE{
  padding: 16px;
  height: 30vh;
  width: auto;
  overflow-y: scroll;
  background-color: #000000;
  font-family: Hack-local !important;
  border: 2px solid #dfdfdf;
  border-radius: 16px;
}

#cli *{
  font-family: Hack-local !important;
  font-size : 0.8rem;
  background: none;
  border: none;
  outline: none;
}

img{
/*  padding-right: 32px;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 33vh;
}

/*@media only screen and (min-width : 320px){
  img{
    height : 20%;
  }
}*/