* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


*,
*::before,
*::after {
	box-sizing: border-box;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: none;
}

::view-transition-new(root) {
  animation: centerExpand 1s forwards;
}

@keyframes centerExpand {
  0% {
    clip-path: inset(50% 0 50% 0);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  20% {
    clip-path: inset(45% 0 45% 0);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@supports (-webkit-touch-callout: none) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
        -webkit-animation: none !important;
    }
}


:root {
	--scale-local-rem: clamp(1rem, 2vw + 1rem, 2.2rem);
	--scale-world-rem: clamp(1rem, 0.6vw + 1rem, 1.3rem);

	--contentWidth: 1920px;
	--white: #ffffff;
	--strikeRed: rgba(255, 0, 50, 1);
	--strikePink: rgba(255, 27, 104, 1);
	--creme: rgba(204, 200, 185, 1);
	--liteGrey: rgba(210, 210, 210, 1);
	--midGrey: rgba(125, 125, 125, 1);
	--boldGrey: rgba(31, 28, 35, 1);
	--superGrey: rgba(16, 14, 18, 1);
}

@font-face {
	src: url(../fonts/Rajdhani-Light.woff2) format('woff2');
	font-family: "Rajdhani";
	font-weight: 300;
	font-style: normal;
	font-display: block;
}

@font-face {
	src: url(../fonts/Rajdhani-Regular.woff2) format('woff2');
	font-family: "Rajdhani";
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

@font-face {
	src: url(../fonts/Rajdhani-Bold.woff2) format('woff2');
	font-family: "Rajdhani";
	font-weight: 700;
	font-style: normal;
	font-display: block;
}



html {
    min-height: 100%;
    height: 100%;
}

body {
    min-height: 100vh;
    height: auto;
    font-family: "Rajdhani";
    font-weight: 400;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-size: 1em;
    color: #ccc;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #151725;
}
::-webkit-scrollbar {
	width: 1px;
	height: 1px;
}

::-webkit-scrollbar-track {
	background: var(--boldGrey);
	border-radius: 1px;
}

::-webkit-scrollbar-thumb {
	background: var(--strikeRed);
	border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
	background: #222222;
}

iframe {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}


/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}


p {
	font-size: clamp(1.2rem, 1.2rem + 0vw, 1.2rem);
	line-height: 130%;
	margin-bottom: clamp(1.2rem, 1.2rem + 0vw, 1.2rem);
}

h1 {
	font-size: clamp(3rem, 1.6842rem + 7.0175vw, 8rem);
	line-height: 90%;
	margin-bottom: calc(var(--scale-local-rem) * 1.5);
	letter-spacing: -0.2rem;
	font-weight: 700;
}

h2 {
	font-size: calc(var(--scale-local-rem) * 2.2);
	line-height: 80%;
	margin-bottom: calc(var(--scale-local-rem) * 1);
	letter-spacing: -0.2rem;
	font-weight: 500;
}

h3 {
	font-size: calc(var(--scale-local-rem) * 1.6);
	line-height: 90%;
	margin-bottom: calc(var(--scale-local-rem) * 0.5);
	letter-spacing: -0.1rem;
	font-weight: 500;
}

h4 {
	font-size: calc(var(--scale-local-rem) * 1);
	line-height: 90%;
	margin-bottom: calc(var(--scale-local-rem) * 0.5);
	font-weight: 500;
}

a:link,
a:visited,
a:active {
	color: var(--white);
	text-decoration: none;
}


form {
	position: relative;
	max-width: 100%;
	margin: auto;
	border-radius: 3px;
	z-index: 5;
	color: var(--creme)
}

input,
textarea {
	color: var(--creme);
	width: 100%;
	padding: 1rem;
	margin-bottom: 15px;
	border: 1px solid var(--midGrey);
	border-radius: 5px;
	background: transparent;
}

button {
	color: white;
	border: none;
	padding: 12px;
	width: 30%;
	border-radius: 5px;
	cursor: pointer;
	background: var(--midGrey);
}

button:hover {
	background: #0056b3;
}



.rotateDevice {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	background: var(--superGrey) url('../imgs/rotate-phone.svg') no-repeat center center/ contain;
}



/* ----------------------- @Media ------------------- */


@media screen and (orientation: landscape) and (max-width: 1024px) {
	.rotateDevice {
		display: flex;
	}
}

/* -- --------------- Mobile -------------- */
@media (max-width: 768px) {}