/* Colors */
:root {
  --Black: #000;
  --Purple: #AE8CFA;
  --White: #FEFCFF;
  --Gray: #d1d1d1;
}

/* main font */
@font-face {
  font-family: 'Pergola';
  src: url(./../fonts/pergola/Pergola-Demo.otf);
}

/* second font */
@font-face {
  font-family: 'Saudagar';
  src: url(./../fonts/saudagar/Saudagar.ttf);
}

/* bold font */
@font-face {
  font-family: 'Bold';
  src: url(./../fonts/the_bold_font/THE\ BOLD\ FONT\ -\ FREE\ VERSION\ -\ 2023.otf);
}

/* numbers */
@font-face {
  font-family: 'Aceh';
  src: url(./../fonts/aceh_darusalam/Aceh\ Darusalam.ttf);
}
 
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'],
a, li, ul {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: var(--White);
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden;
}

/* Set core body defaults */
body {
  background-color: var(--Black);
  font-family: 'Pergola';
  text-rendering: optimizeSpeed;
  color: var(--White);
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: smooth;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: smooth !important;
  }
}

::-webkit-scrollbar {
  display: none;
}

/* global animation */
.anim {
  animation: ScaleBottom 1s ease;
}

@keyframes ScaleBottom {
	0% {
		transform: scaleY(0);
		transform-origin: 100% 100%;
	}
	100% {
		transform: scaleY(1);
		transform-origin: 100% 100%;
	}
}

.blink {
  animation: blink 1.3s infinite;
}

@keyframes blink { 
  0% { 
    opacity:0; 
  }
  50% { 
    opacity:1; 
  } 
  100% { 
    opacity:0; 
  }
}

/* common css */
.highlight {
  font-family: 'Saudagar';
  text-decoration: .1px underline;
  text-underline-offset: 3px;
}

.element_bg {
  border: 30px solid var(--Gray);
  filter: blur(70px);
  position: absolute;
  width: 10rem;
  z-index: -99;
}

/* overlay */
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 99;
  text-transform: uppercase;
  font-family: 'Bold';
  letter-spacing: 1px;
  font-size: clamp(0.8rem, -0.04rem + 4.2vw, 5rem);
}

.first {
  left: 0;
  color: var(--Black);
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: var(--White);
  padding-left: 1rem;
  width: 60%;
}

.second {
  display: flex;
  align-items: center;
  background: var(--Black);
  left: 60%;
  width: 40%;
  font-style: italic;
  padding-left: 1rem;
}

.third {
  display: flex;
  left: 0;
  font-size: clamp(0.6rem, 0.56rem + 0.2vw, 0.8rem);
  font-weight: 700;
  color: var(--Black);
  width: 60%;
  font-family: 'Pergola';
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}

/* back to top */
.back-to-top a {
  transition: all .2s ease;
  font-size: 30px;
  cursor: pointer;
}

#btn-back-to-top {
  bottom: 20px;
  color: var(--Purple);
  display: none;
  position: fixed;
  right: 30px;
}

#btn-back-to-top:hover{
  color: var(--Gray);
  bottom: 22px;
}

/* mouse */
#magicPointer {
  background-color: var(--Purple) !important;
}

#magicMouseCursor {
  border: 1.5px solid var(--White) !important;
}