@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  user-select: none;
  scrollbar-color: auto !important;
}

body {
  @apply bg-base-200;
}

html[data-os="win32"],
[data-os="win32"] body,
[data-os="win32"] #root {
  @apply bg-transparent !important;
  }
  
  
  
  @media (prefers-color-scheme: light) {
    [data-os="win32"][data-theme="business"] body,
      [data-os="win32"][data-theme="dracula"] body,
      [data-os="win32"][data-theme="night"] body,
      [data-os="win32"][data-theme="synthwave"] body,
      [data-os="win32"][data-theme="halloween"] body,
      [data-os="win32"][data-theme="forest"] body,
      [data-os="win32"][data-theme="luxury"] body {
      @apply bg-base-200 !important;
    }
  }
  
  @media (prefers-color-scheme: dark) {
  
    [data-os="win32"][data-theme="light"] body,
      [data-os="win32"][data-theme="emerald"] body,
      [data-os="win32"][data-theme="fantasy"] body,
      [data-os="win32"][data-theme="wireframe"] body,
      [data-os="win32"][data-theme="cmyk"] body,
      [data-os="win32"][data-theme="autumn"] body {
      @apply bg-base-200 !important;
    }
}

html,
body,
#root {
  @apply bg-base-200;
}
.ReactModal__Overlay {
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
}

@font-face {
  font-family: "Extatica";
  src: url("./special.otf");
}

@font-face {
  font-family: "Roboto";
  src: url("./Roboto.ttf");
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.def {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.def-v {
  font-family: "Roboto";
}

.tnr {
  font-family: "Times New Roman", Times, serif;
}

.geo {
  font-family: Georgia, "Segoe UI";
}

.gra {
  font-family: Garamond;
}

.ari {
  font-family: Arial, Helvetica, sans-serif;
}

.ext {
  font-family: "Extatica";
}

.bhn {
  font-family: "Bahnschrift", Verdana, Arial, Garamond, sans-serif;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.background {
  /*background-image: url("./bg.jpg");*/
  background:
    /*url("./bg.png")*/
    transparent;
  background-size: 100% 100%;
}

.login-background {
  background: url("./bg.png") !important;
  background-size: 100% 100% !important;
  @apply h-screen w-screen flex flex-col items-center justify-center !important;
  transition: all 25ms linear !important;
}

[data-os="win32"]
.login-background {
  background: transparent !important;
  background-size: 100% 100% !important;
  @apply h-screen w-screen flex flex-col items-center justify-center !important;
  transition: all 25ms linear !important;
}

.modal {
  @apply items-center justify-center flex w-[35vw] max-w-[35vw] h-[90vh] max-h-[90vh] bg-opacity-75 bg-white rounded-lg shadow-lg flex-col mb-auto;
  transition: all 500ms linear;
  user-select: none;
}

.modal-d {
  @apply bg-opacity-75 bg-gray-700;
}

.modal h1,
.style-h1 {
  font-weight: 900;
  font-size: 5ch;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  @apply text-blue-900;
}

.modal-d h1 {
  @apply text-white;
}

.style-h1-d {
  @apply text-white;
}

.modal h2 {
  font-weight: 300;
  font-size: 30px;
  @apply text-violet-800;
}

.modal-d h2 {
  @apply text-white;
}

.modal input,
.style-input {
  outline: none;
  padding: 10px 15px;
  @apply bg-gray-200 w-[90%] rounded-md shadow-lg focus:shadow-xl focus:rounded-lg;
}

.search-input {
  border-bottom: 3px solid gray;
  outline: none;
  transition: all 500ms linear;
  padding: 10px 15px;
  @apply bg-gray-100 w-[90%] rounded-md shadow-lg focus:shadow-xl focus:rounded-t-lg focus:rounded-b-none;
}

.search-input-modified {
  @apply focus:rounded-md w-[97%] !important;
}

.search-input-m-modified,
.search-input-m-modified:focus {
  border-color: rgb(243, 244, 246) !important;
  @apply rounded-md;
}

.search-input-m-modified-d,
.search-input-m-modified-d:focus {
  border-color: rgb(31, 41, 55) !important;
}

.git-input {
  outline: none;
  transition: all 500ms linear;
  padding: 10px 15px;
  @apply bg-gray-200 rounded-md shadow-lg focus:shadow-xl focus:rounded-xl;
}

.modal-d input,
.style-input-d {
  @apply bg-gray-800 text-white;
}

.modal input:disabled,
.style-input:disabled {
  @apply rounded-lg border-none shadow-lg;
}

.button {
  @apply bg-blue-800 text-white rounded-lg w-[60%] h-[50px] mt-[10px];
  min-height: 50px;
  transition: all 250ms linear;
}

.button:hover {
  @apply bg-blue-900;
}

.button-success {
  @apply bg-green-700 hover:bg-green-800;
}

.button-danger {
  @apply bg-red-700 text-white rounded-lg w-[60%] h-[50px] mt-[10px];
  min-height: 50px;
  transition: all 250ms linear;
}

.button-danger:hover {
  @apply bg-red-800;
}

.button:disabled,
.button-danger:disabled {
  @apply bg-gray-500;
}

#toast {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 1%;
  right: 1%;
  overflow: hidden;
  transition: all 250ms linear;
}

@layer utilities {
  .toast {
    @apply text-neutral-content bg-neutral p-2 m-3 rounded-md shadow-md min-w-[20rem] min-h-[3rem] flex flex-col justify-center;
    transition: all 250ms linear;
    z-index: 1000;
  }

  .toast-success {
    @apply bg-green-700;
  }

  .toast-warn {
    @apply bg-yellow-700;
  }

  .toast-danger {
    @apply bg-red-700;
  }
}