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

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

@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Thin.ttf") format("truetype");
  font-weight: 100;
}

@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Light.ttf") format("truetype");
  font-weight: 300;
}

html,
body {
  --border: 1px solid #ccc;
  font-family: "Sora";
  --accent-color: rgb(117, 75, 222);
  --spacing: 10px;
  --half-spacing: 5px;
  --shadow: 0 0 var(--half-spacing) rgba(0, 0, 0, 0.50);
}

ul {
  margin: 0px;
  padding-left: 20px;
}

li {
  margin: var(--half-spacing);
  list-style-type: disc;
}

h2,
h3,
h4 {
  margin: 0px;
  color: var(--accent-color);
}

button {
  padding: var(--half-spacing);
  background-color: inherit;
  border: none;
  cursor: pointer;
  width: fit-content;
}

.flex-row + .flex-row {
  border-top: var(--border);
}

img {
  margin: var(--half-spacing);
}

/* icon-tabler override */

.action-icon .icon-tabler {
  width: 25px;
  height: 25px;
}

.icon-tabler {
  margin-left: 3px;
  margin-right: 3px;
}

.icon-tabler-x:hover,
.icon-tabler-settings:hover {
  color: var(--accent-color);
}

.action-icon {
  width: 20px;
  height: 20px;
  color: #acacac;
}

.action-icon:hover {
  color: var(--accent-color);
  cursor: pointer;
}

/* icon-tabler override */