/* 
    Website created by Uverit
    Do not copy or distribute
    https://www.fiverr.com/new_horizon_web
*/
/* Media breakpoints */
/* Width: 1440, 1200, 1024, 900, 768, 540, 440, 320 */
/* Colors */
:root {
  /* Uverit Color Palette */
  --color1:#07ABDB; /* Main Color */
  --color1a:#62D2FD; /* Secondary Color, Light-Mode */
  --color1b:#2086B6; /* Secondary Color, Dark-Mode */
  --color2:#CC1EEC; /* Accent Color */
  --color2a:#BF4FFF; /* Secondary Accent, Light-Mode */
  --color2b:#A727DA; /* Secondary Accent, Dark-Mode */
  --color3a:#F8FAFE; /* Background-color, Light-Mode */
  --color3b:#111316; /* Background-color, Dark-Mode */
  /* Additional colors */
  --wrapperColor1:#D4DFE5; /* Main content box shadow color 1 */
  --shade1:#FFFFFF; /* Shade 1 */
  --shade2:#F9F9F9; /* Shade 2 */
  --shade3:rgb(248,250,254,0.92); /* Shade 3 */
  --shade4:#ECECEC; /* Shade 4 */
  --shade5:#DDE6EA; /* Shade 5 */
  --shade6:#D6D6D6; /* Shade 6 */
  --shade7:#CACECE; /* Shade 7 */
  --txt1:#222; /* Text color 1 */
  --txt2:#FAFAFA; /* Text color 2 */
  --txt-faded:#444; /* Text faded color 1 */
  --txt-faded2:#6A6A6A; /* Text faded color 2 */
  --txt-faded3:#919191; /* Text faded color 3 */
}

/* Dark-mode - class-changes */
.dark-mode {
  /* Uverit Color Palette */
  --color1a:#2086B6; /* Secondary Color, Dark-Mode */
  --color1b:#62D2FD; /* Secondary Color, Light-Mode */
  --color2a:#A727DA; /* Secondary Accent, Dark-Mode */
  --color2b:#BF4FFF; /* Secondary Accent, Light-Mode */
  --color3a:#111316; /* Background-color, Dark-Mode */
  --color3b:#F8FAFE; /* Background-color, Light-Mode */
  /* Additional colors */
  --wrapperColor1:#2C3536;
  --shade1:#212527; /* Shade 1 */
  --shade2:#1B1E1F; /* Shade 2 */
  --shade3:rgb(17,19,22,0.95); /* Shade 3 */
  --shade4:#151718; /* Shade 4 */
  --shade5:#343738; /* Shade 5 */
  --shade6:#3B3B42; /* Shade 6 */
  --shade7:#7A7E7E; /* Shade 7 */
  --txt1:#FAFAFA; /* Text color 1 */
  --txt2:#222; /* Text color 2 */
  --txt-faded:#EEE; /* Text faded color 1 */
  --txt-faded2:#CFCFCF; /* Text faded color 2 */
  --txt-faded3:#B1B1B1; /* Text faded color 3 */
}

/* Sizes */
:root {
  --size1:28px; /* Desktop Padding / Large Size */
  --size2:20px; /* Mobile Padding / Small Size */
  --mainRadius1:28px; /* Main content border radius 1 */
  --radius1:14px; /* Border Radius 1 */
  --radius2:8px; /* Border Radius 2 */
  --box-shadow1:0 0 10px 1px; /* Box Shadow 1 */
  --box-shadow2:0 0 2px 0.5px; /* Box Shadow 2 */
  --box-shadow3:0 0 2px 2px; /* Box Shadow 3 */
  --box-shadow4:0 0 3px 2px; /* Box Shadow 4 */
}

@media screen and (width <= 768px) {
  :root {
    --size1:var(--size2);
  }
}
/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color1);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color1a);
}

::-webkit-resizer {
  background: var(--color1);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
@-moz-document url-prefix() {
  :root {
    --box-shadow2:0 0 2px 1px; /* Box Shadow 2 */
  }
  * {
    scrollbar-color: var(--color1) transparent !important;
    scrollbar-width: thin !important;
  }
}
/* Basic settings */
/* Page */
* {
  margin: 0;
  padding: 0;
  font-family: font2, Roboto, Arial, sans-serif; /* Stupid firefox... */
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: 0 !important;
}

*:selection {
  background: var(--color1) !important;
}

/* Remove transition on page load */
body:not(.add-transition) * {
  transition: none !important;
}

/* IMPORTANT - it allows the sticky container to work correctly */
html, body {
  min-height: 100%;
}

html {
  position: relative;
  overflow: hidden;
}

body {
  width: 100%;
  max-width: 100vw;
  background-color: var(--shade2);
  overflow-x: hidden;
  overflow-y: hidden;
}

.hide-modal {
  overflow-y: auto;
}

/* Fonts */
@font-face {
  src: url(../fonts/Quicksand-VariableFont_wghtbold.woff2);
  font-family: font1;
  font-display: fallback;
}
@font-face {
  src: url(../fonts/Quicksand-SemiBold.ttf);
  font-family: font1-semibold;
  font-display: fallback;
}
@font-face {
  src: url(../fonts/Roboto-Regular.woff2);
  font-family: font2;
  font-display: fallback;
}
p, a, label {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3em;
  text-decoration: none;
  color: var(--txt-faded);
  transition: 0.15s;
}

label {
  font-size: 16px;
  color: var(--txt-faded2);
}

@media screen and (width <= 440px) {
  p, a, label {
    font-size: 16px;
    line-height: 1.2em;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-family: font1, Calibri, sans-serif;
  color: var(--txt1);
  font-weight: 800;
  transition: 0.15s;
}

h1 {
  font-size: 38px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

@media screen and (width <= 440px) {
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 24px;
  }
  h4 {
    font-size: 18px;
  }
  h5 {
    font-size: 16px;
  }
  h6 {
    font-size: 14px;
  }
}
/* Wrapper - change body content margins */
.wrapper {
  max-width: 1440px;
  padding: var(--size1);
  margin: 0 auto;
  box-sizing: border-box;
}

/*   /\-/\-/\| MAIN CONTENT |/\-/\-/\   */
/* Page background */
.main-background {
  /* Prevent gaps on the sides */
  width: calc(100% + 4px);
  height: 100%;
  position: fixed;
  top: 0;
  left: calc(50% - 2px);
  transform: translate3D(-50%, 0, 0);
  background-image: url("../img/bgreversed.svg");
  background-size: cover;
  background-position: center;
  animation: mainBgShrink 2s cubic-bezier(0, 0.3, 0.4, 1);
}

.dark-mode .main-background {
  background-image: url("../img/bgreversed-dark.svg");
}

.main-background:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: antiFlicker 0.1s;
}

@keyframes antiFlicker {
  0% {
    background-color: var(--shade2);
  }
  75% {
    background-color: var(--shade2);
  }
  100% {
    background-color: transparent;
  }
}
@keyframes mainBgShrink {
  0% {
    padding: 0 20%;
  }
  100% {
    padding: 0;
  }
}
@media screen and (width <= 1440px) {
  @keyframes mainBgShrink {
    0% {
      padding: 0 35%;
    }
    100% {
      padding: 0;
    }
  }
}
@media screen and (width <= 1200px) {
  @keyframes mainBgShrink {
    0% {
      padding: 0;
    }
    100% {
      padding: 0;
    }
  }
}
:root {
  --gradBgWidth:calc(100% / 9);
}

.main-bg-grad {
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  background: linear-gradient(to right, var(--color1a) calc(var(--gradBgWidth) * 1), var(--color1) calc(var(--gradBgWidth) * 3), var(--color2) calc(var(--gradBgWidth) * 5), var(--color2a) calc(var(--gradBgWidth) * 7), var(--color1a) calc(var(--gradBgWidth) * 9));
  background-size: 100%;
}

/* Main */
main {
  width: 100%;
  height: 100dvh;
  padding: var(--size1);
  box-sizing: border-box;
  position: absolute;
  top: 110vh;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.15s, top 0.5s, width 0s, height 0s;
  z-index: 100;
}

.hide-modal main {
  top: 0;
}

.main-wrapper {
  height: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--size1);
}

.main-module-content {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--size1) * 2);
}

.page-content {
  flex: 1;
  width: 100%;
  display: flex;
  gap: var(--size1);
}

.dock {
  padding: var(--size1);
  box-sizing: border-box;
  background-color: var(--shade3);
  border-radius: var(--mainRadius1);
  box-shadow: var(--box-shadow1) var(--wrapperColor1), var(--box-shadow2) var(--wrapperColor1);
  backdrop-filter: blur(4px);
  transition: 0.15s;
}

.dock-inner {
  padding: var(--size1);
  box-sizing: border-box;
  background-color: var(--shade1);
  border-radius: var(--mainRadius1);
  box-shadow: var(--box-shadow1) var(--wrapperColor1), var(--box-shadow2) var(--wrapperColor1);
  transition: 0.15s;
}

.uverit-logo svg * {
  stroke-width: 0;
}

.uverit-logo svg .cls-1 {
  fill: var(--txt-faded);
}

.dark-mode .uverit-logo svg .cls-1 {
  fill: var(--txt1);
}

.uverit-logo svg .cls-2 {
  fill: var(--color1);
}

/* Main Header */
.main-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mh-title {
  background: linear-gradient(to right, var(--color1a), var(--color1), var(--color2), var(--color2a));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: font1-semibold;
  font-size: min(52px, 12vw);
  text-align: center;
  line-height: 1.2;
  filter: drop-shadow(0 0 1px var(--shade2));
}

/* Main - media */
@media screen and (width <= 768px) {
  .main-wrapper {
    backdrop-filter: blur(0);
  }
  .dock {
    backdrop-filter: blur(0);
  }
}
@media screen and (width <= 540px) {
  main {
    padding: 0;
  }
  .main-wrapper {
    border-radius: 0;
  }
  .dock {
    border-radius: 0;
  }
}