@import url("./variables.css");
@import url("./common.css");

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

html {
  direction: rtl;
  font-family: var(--font-family);
  font-size: var(--font-size);

  color: var(--theme-text-color) !important;
  background-color: var(--theme-secondary) !important;

  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 69%,
      rgba(var(--theme-accent), 0.75) 100%
    ),
    url("../img/bg.png");
  background-size: cover;
  min-height: 100%;
}

a {
  text-decoration: none;
  color: var(--theme-text-color) !important;
}

body {
  margin: 0.5rem 0;
  text-align: center;
}

h1,
h3 {
  margin-block-start: unset !important;
  margin-block-end: unset !important;
}

button {
  all: unset;
  cursor: pointer;
}

dialog {
  border: unset;
  border-radius: 1.5rem;
  width: 150px;
  background-color: var(--theme-secondary);
  box-shadow: 0px 0px 20px 0px rgba(var(--theme-text-color), 1);

  user-select: unset !important;
}

dialog[open] {
  animation: backdrop-fade 0.6s ease forwards;
}

@keyframes backdrop-fade {
  from {
    background: transparent;
  }
  to {
    background: white;
  }
}