@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
@import url('https://itsfoxdev.github.io/lib/scrollbar.css');

.swal2-html-container *,.swal2-html-container,.swal2-styled,.swal2-title{font-family:"Montserrat",sans-serif}

:root{
  --bg:rgb(255, 255, 255);
  --op:rgb(20, 20, 20);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:rgb(20, 20, 20);
    --op:white;
  }
}
button.swal2-styled{
  color:white !important;
}
*{
  font-family:Montserrat;
  color:var(--op);
  transition:color .3s ease,background .3s ease;
}
#swal2-html-container,#swal2-title{
  color:var(--op) !important;
}
body{
  width:100vw;
  height:100vh;
  margin:0px;
  overflow:hidden;
}
.swal2-popup,body{
  background:var(--bg);
}
app{
  display:flex;
  flex-direction: column;
  width:100vw;
  height:100vh;
}
h1{
  margin:0px;
  user-select: none;
}
#top{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:10px 10px;
}
#btns{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:5px;
}
#btns button{
  aspect-ratio:1/1;
  height:38px;
  font-size:18px;
  border-radius:10px;
  background:var(--bg);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border:2px solid var(--op);
  cursor:pointer;
  transition:border .1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  outline:none;
}
#btns button:hover{
  border:3px solid var(--op);
}

#btns button:active{
  border:4px solid var(--op);
}
#zone{
  background:var(--bg);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border:2px solid var(--op);
  font-family:Jetbrains Mono;
  margin:0px 10px 10px 10px;
  height:100%;
  border-radius:10px;
  resize:none;
  overflow-y:scroll;
  padding:7.5px;
  outline:none;
  transition:border .1s ease, padding .1s ease;
  box-sizing:border-box;
}
#zone:focus{
  border:3px solid var(--op);
  padding:6.5px !important;
}

@media (max-width:450px){
  h1{
    text-align:center;
    margin-bottom:5px;
  }
  #btns{
    justify-content: space-between;
  }
  #top{
    display:flex;
    flex-direction: column;
  }
  #btns button{
    aspect-ratio:unset;
    width:100%;
  }
}