/**
 * Copyright (c) 2024, ryu.darkness@gmail.com.
 *
*/

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 700;
  src: local('Spoqa Han Sans Neo Bold'), url(fonts/SpoqaHanSansNeo-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 500;
  src: local('Spoqa Han Sans Neo Medium'), url(fonts/SpoqaHanSansNeo-Medium.woff2) format('woff2');
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 400;
  src: local('Spoqa Han Sans Neo Regular'), url(fonts/SpoqaHanSansNeo-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 300;
  src: local('Spoqa Han Sans Neo Light'), url(fonts/SpoqaHanSansNeo-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 100;
  src: local('Spoqa Han Sans Neo Thin'), url(fonts/SpoqaHanSansNeo-Thin.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/materialsymbol.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

* {
  font-family: "Spoqa Han Sans Neo", "sans-serif";
  /*font-family: Georgia, serif;*/
  /*font-family: Arial, sans-serif;*/
  color: #fff;
}

html {
  --dark-black-1st: #121215;
  --dark-black-2nd: #343437;
  --dark-black-3rd: #67676a;

  --dark-white-1st: #ffffff;
  --dark-white-2nd: #c5c5c5;
  --dark-white-3rd: #959595;
  --dark-white-4th: #757575;
  --dark-btn-normal: rgba(43 134 255); 
  --dark-btn-yellow: rgba(112 173 71); 
  --dark-btn-green: rgba(255 64 64); 
  --dark-color-rg: #FFFF00; 
  --dark-color-rb: #FF00FF;
  --dark-color-gb: #00FFFF;

  font-size: 18px;

  user-select: none;
  scroll-behavior: smooth;
}

body {
  background-color: var(--dark-black-1st) !important;
  color: var(-dark-white-1st);
}

input {
  border: 0;
  border-radius: 0.2rem;
  outline: none;
  padding-left: 10px;
  background-color: rgb(233, 233, 233);
  color: var(--dark-black-2nd);
}

textarea {
  border: 0;
  border-radius: 0.2rem;
  outline: none;
  padding-left: 10px;
  background-color: rgb(233, 233, 233);
  color: var(--dark-black-2nd);
}

th {
  background-color: rgb(58, 98, 14);
  color: var(--dark-white-2nd);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: gray;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

.no-scroll {
  overflow: hidden;
}

.auto-scroll {
  overflow: auto;
}

.no-space {
  margin: 0;
  padding: 0;
}

.full-size {
  width: 100%;
  height: 100%;
}

.clickable {
  cursor: pointer;
}

.clickable:hover {
  background-color: var(--dark-btn-green);
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.desk-flex {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;
  text-align: center;
}

.desk-topbar {
  display: flex;
  align-items: normal;
  flex-direction: row;
  text-align: center;
  justify-content: space-between;
  height: 1.5rem;
  background-image: linear-gradient(to right, var(--dark-btn-normal), var(--dark-black-1st));
}

.desk-taskbar {
  height: 1.5rem;
  background-image: linear-gradient(to bottom, rgb(80, 150, 149), rgb(13, 25, 25));
}

.white-circle {
  background-color: var(--dark-white-2nd);
  color: var(--dark-black-2nd);
  border-radius: 1rem;
  font-size: 0.8rem;
  align-self: center;
}

.desk-back-img {
  border-radius: 1rem;
  object-fit: contain;
}

.desk-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  cursor: pointer;
  font-size: 1rem;
}

.desk-icons:hover {
  background-color: var(--dark-black-2nd);
}

.desk-app-window {
  position: absolute;
  background-color: var(--dark-white-2nd);
  color: var(--dark-black-2nd);
  border-radius: 1rem;
  border: 3px solid var(--dark-black-3rd);
  box-shadow : 2px 3px 5px 0px;
}

.desk-app-window-title {
  width: 100%; 
  height: 2rem; 
  border: 1px solid var(--dark-black-3rd); 
  border-width: 0 0 1px; 
  background-color: var(--dark-white-4th);
  border-radius: 1rem 1rem 0 0;
  display: flex;
  flex-direction: row;
}

.desk-app-window-main {
  width: 100%;
  height: 100%; 
  overflow: hidden;
}

.desk-app-window-state {
  width: 100%; 
  height: 1rem; 
  border: 1px solid var(--dark-black-3rd); 
  border-width: 1px 0 0; 
  background-color: var(--dark-white-4th);
  border-radius: 0 0 1rem 1em;
  display: flex;
  flex-direction: row;
}

.desk-taskbar-item {
  width: 6rem; 
  height: 1.3rem; 
  border: 1px solid var(--dark-black-3rd); 
  color: var(--dark-black-1st);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  margin: 0 0.2rem 0 0.2rem;
  background-image: linear-gradient(to right, #FF0000, var(--dark-btn-yellow));
}

.red-grad {
  background-image: linear-gradient(to right, #FF0000, var(--dark-btn-yellow));
}

.gray-grad {
  background-image: linear-gradient(to right, #9ca8ab, #333333);
}

.dark_center {
  background-color: var(--dark-black-2nd);
  color: var(--dark-white-1st);
  align-self: center;
}

.round-btn {
  background-color: var(--dark-btn-normal);
  color: var(--dark-white-1st);
  border-radius: 0.5rem;
  cursor: pointer;
}

.round-btn:hover {
  background-color: var(--dark-color-rb);
}

.margin-h {
  font-size: 1rem;
  margin: 0 0.2rem 0 0.2rem;
}

.font-bold {
  font-size: 1.2rem;
  font-weight: bold;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1.5rem;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
}

.login-input {
    padding: 0.8rem;
    border-radius: 0.5rem;
    border: 1px solid var(--dark-white-3rd);
    background-color: var(--dark-black-1st);
    color: var(--dark-white-1st);
    font-size: 1rem;
    width: 100%;
}

.login-input:focus {
    border-color: var(--dark-btn-normal);
    outline: none;
}

.login-button-group {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-button {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    text-align: center;
    background-color: var(--dark-btn-normal);
    color: var(--dark-white-1st);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-button:hover {
    background-color: var(--dark-btn-yellow);
}

.signup-button {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    text-align: center;
    background-color: transparent;
    color: var(--dark-white-1st);
    border: 2px solid var(--dark-white-3rd);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.signup-button:hover {
    background-color: var(--dark-white-3rd);
    color: var(--dark-black-1st);
    border-color: var(--dark-white-2nd);
}

.signup-title {
    color: var(--dark-white-1st);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    text-align: center;
}