@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans+Arabic:wght@100..800&display=swap');

/* functional decorators */
:root {
  /* --col-bg-koblue: #2c2c56;
  --col-bg: rgb(155, 101, 255); */
  --col-a: rgb(255, 253, 50);
  --col-a-v: rgb(255, 255, 100);
  /* --brightness-font-main: 15; */
  --brightness-shadow: 0.1;
  /* --opacity-font-main: 1.0; */
  --opacity-box: 0.25;
  --opacity-box-shadow: 0.094;
}

@media (max-width: 700px) {
  .div-lang-options > button {
    font-size: medium !important;
    padding: 8px !important;
  }
}

#header-link {
  text-align: center;
}

#header-logo {
  width: 200px;
  margin: 50px auto;
}

.div-lang-options {
  position: absolute;
  text-align: right;
  direction: ltr;
  top: 40px;
  right: 40px;
}

.div-lang-options > button {
  color: white;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: larger;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  padding: 10px;
  cursor: pointer;
}
.div-lang-options > button:hover {
  font-weight: 900;
}

html {
  position: relative;
  min-height: 100%;
  color: white;
}

/*
  Creates a rotating background layer using a pseudo-element.
  Uses position: fixed to keep it stationary relative to the viewport,
  inset: -50% to make the background larger than the viewport for smooth rotation,
  z-index: -1 to place it behind all other content,
  and an infinite linear animation for continuous rotation.
*/
html::before {
  content: "";
  position: fixed;
  inset: -50%;
  background-image: url('/media/bg/bg-03.png');
  background-repeat: repeat;
  background-position: center;
  animation: bg-rotate 240s linear infinite;
  z-index: -1;
}

/* Reduce motion mode */
html.reduce-motion::before {
  animation: none;
}

/* Rotates the background slowly and smoothly for a dynamic visual effect */
@keyframes bg-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* English */
html[lang="en"] body {
  font-family: 'Nunito', sans-serif;
}
html[lang="en"] h2 {
  font-family: 'Nunito', sans-serif;
}
html[lang="en"] h1 {
  font-family: 'Nunito', sans-serif;
}
/* Arabic */
html[lang="ar"] h1 {
  font-family: 'Playpen Sans Arabic', system-ui, sans-serif;
}
html[lang="ar"] h2 {
  font-family: 'Playpen Sans Arabic', system-ui, sans-serif;
}
html[lang="ar"] body {
  font-family: 'Noto Sans Arabic', system-ui, sans-serif;
}

a {
  color: var(--col-a);
}

a:visited {
  color: var(--col-a-v);
}

footer {
  text-align: center;
  margin: 100px 100px 100px 100px;
}

/* optional decorators */
.fx-box {
  background-color: rgba(255, 255, 255, var(--opacity-box));
  box-shadow: 1px 15px 30px rgba(0, 0, 0, var(--opacity-box-shadow));
  transition: 300ms all;
}

.fx-box:hover {
  transform: scale(1.01);
  background-color: rgba(255, 255, 255, calc(0.1 + var(--opacity-box)));
  box-shadow: 1px 15px 20px rgba(0, 0, 0, calc(1.8 * var(--opacity-box-shadow)));
}

.fx-box-hover{
  transition: 300ms all;
}

.fx-box-hover:hover {
  transform: scale(1.01);
}

.fx-shadow {
  box-shadow: 0px 10px 10px rgba(0, 0, 0, var(--brightness-shadow));
}

.fx-shadow-hover {
  box-shadow: 0px 10px 10px rgba(0, 0, 0, var(--brightness-shadow));
  transition: 300ms all;
}

.fx-shadow-hover:hover {
  box-shadow: 0px 13px 10px rgba(0, 0, 0, calc(1.8 * var(--brightness-shadow)));
}

.fx-span-hover {
  opacity: 0.5;
  transition: 400ms all;
}

.fx-span-hover:hover {
  opacity: 1.0;
}

.fx-img-style {
  border-radius: 15px;
  box-shadow: 1px 7px 10px rgba(0, 0, 0, var(--brightness-shadow));
}

.fx-img-hover {
  border-radius: 15px;
  box-shadow: 1px 7px 10px rgba(0, 0, 0, var(--brightness-shadow));
  /* transition: 300ms all cubic-bezier(0.68, -0.55, 0.27, 3.5); */
  transition: 300ms all ease-in;
}

.fx-img-hover:hover {
  box-shadow: 1px 9px 10px rgba(0, 0, 0, calc(2 * var(--brightness-shadow)));
  transform: scale(1.025);
}

/* custom styling */
.unselectable {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Safari */
  -khtml-user-select: none;    /* Konqueror HTML */
  -moz-user-select: none;      /* Old versions of Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Standard syntax */
  /* cursor: default;             Optional: ensures the cursor is an arrow, not a text selection caret */
}