:root {
  --primary-color: #00619c;
  --primary-color-light: #4f8ecd;
  --primary-color-dark: #00386d;
  --secondary-color: #f8f8f8;
  --secondary-color-light: #ffffff;
  --secondary-color-dark: #c5c5c5;
  --body-font: "UbuntuRegular", sans-serif;
  --default-font-size: 16px;
  --tertiary-color: #ebebeb;
  --tertiary-color-light: #ffffff;
  --tertiary-color-dark: #b9b9b9;
  --body-bg: #ebebeb;
  --black-color: #000000;
  --white-color: #ffffff;
  --z-fixed: 100;
  --banana-yellow: #FFD12A;
  --gray-base: var(--black-color);
  --gray-darker: lighten(var(--gray-base), 13.5%);
  --gray-dark: lighten(var(--gray-base), 20%);
  --gray: lighten(var(--gray-base), 33.5%);
  --gray-light: lighten(var(--gray-base), 46.7%);
  --gray-lighter: lighten(var(--gray-base), 93.5%);
  --header-height: 3rem;
  --nav-width: 68px;
}

@font-face {
  font-family: "UbuntuRegular";
  src: url("../../assets/fonts/Ubuntu/Ubuntu-Regular.woff") format("woff"), url("../../assets/fonts/Ubuntu/Ubuntu-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "UbuntuItalic";
  src: url("../../assets/fonts/Ubuntu/Ubuntu-Italic.woff") format("woff"), url("../../assets/fonts/Ubuntu/Ubuntu-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "UbuntuLight";
  src: url("../../assets/fonts/Ubuntu/Ubuntu-Light.woff") format("woff"), url("../../assets/fonts/Ubuntu/Ubuntu-Light.woff2") format("woff2");
}
@font-face {
  font-family: "UbuntuLightItalic";
  src: url("../../assets/fonts/Ubuntu/Ubuntu-LightItalic.woff") format("woff"), url("../../assets/fonts/Ubuntu/Ubuntu-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "UbuntuMedium";
  src: url("../../assets/fonts/Ubuntu/Ubuntu-Medium.woff") format("woff"), url("../../assets/fonts/Ubuntu/Ubuntu-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "UbuntuMediumitalic";
  src: url("../../assets/fonts/Ubuntu/Ubuntu-MediumItalic.woff") format("woff"), url("../../assets/fonts/Ubuntu/Ubuntu-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "UbuntuBold";
  src: url("../../assets/fonts/Ubuntu/Ubuntu-Bold.woff") format("woff"), url("../../assets/fonts/Ubuntu/Ubuntu-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "UbuntuBoldItalic";
  src: url("../../assets/fonts/Ubuntu/Ubuntu-BoldItalic.woff") format("woff"), url("../../assets/fonts/Ubuntu/Ubuntu-BoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoRegular";
  src: url("../../assets/fonts/Roboto/Roboto-Regular.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoItalic";
  src: url("../../assets/fonts/Roboto/Roboto-Italic.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoThin";
  src: url("../../assets/fonts/Roboto/Roboto-Thin.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoThinItalic";
  src: url("../../assets/fonts/Roboto/Roboto-ThinItalic.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-ThinItalic.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoLight";
  src: url("../../assets/fonts/Roboto/Roboto-Light.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-Light.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoLightItalic";
  src: url("../../assets/fonts/Roboto/Roboto-LightItalic.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoMedium";
  src: url("../../assets/fonts/Roboto/Roboto-Medium.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoMediumItalic";
  src: url("../../assets/fonts/Roboto/Roboto-MediumItalic.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoBold";
  src: url("../../assets/fonts/Roboto/Roboto-Bold.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoBoldItalic";
  src: url("../../assets/fonts/Roboto/Roboto-BoldItalic.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-BoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoBlack";
  src: url("../../assets/fonts/Roboto/Roboto-Black.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-Black.woff2") format("woff2");
}
@font-face {
  font-family: "RobotoBlackItalic";
  src: url("../../assets/fonts/Roboto/Roboto-BlackItalic.woff") format("woff"), url("../../assets/fonts/Roboto/Roboto-BlackItalic.woff2") format("woff2");
}
@font-face {
  font-family: "CaptureItRegular";
  src: url("../../assets/fonts/CaptureIt/CaptureIt.woff") format("woff"), url("../../assets/fonts/CaptureIt/CaptureIt.woff2") format("woff2");
}
@font-face {
  font-family: "CaptureIt2Regular";
  src: url("../../assets/fonts/CaptureIt/CaptureIt_2.woff") format("woff"), url("../../assets/fonts/CaptureIt/CaptureIt_2.woff2") format("woff2");
}
body,
html {
  font-family: var(--body-font);
  font-size: var(--default-font-size);
  font-weight: inherit;
}

p {
  font-family: var(--body-font);
}

h1,
h2 {
  font-family: "UbuntuBold";
  font-weight: normal;
  font-style: normal;
}

h3,
h4 {
  font-family: "RobotoBold";
  font-weight: normal;
  font-style: normal;
}

h5,
h6 {
  font-family: "RobotoMedium";
  font-weight: inherit;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: UbuntuRegular, "Ubuntu", "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.container > div {
  position: absolute;
  border-radius: 3rem;
  animation: gradient 5s ease infinite;
}
.container > div:nth-child(1) {
  width: 100%;
  height: 100%;
  background-color: #000000;
}
.container > div:nth-child(2) {
  width: 70%;
  height: 80%;
  background-color: #333333;
  top: -12%;
  right: -12%;
  animation-delay: 2s;
}
.container > div:nth-child(3) {
  width: 75%;
  height: 50%;
  background-color: #ffdb58;
  bottom: -10%;
  left: -5%;
  animation-delay: 1s;
}
.container > div:nth-child(4) {
  width: 80%;
  height: 65%;
  background-color: #111111;
  bottom: -15%;
  right: -20%;
  animation-delay: 3s;
}
.container > div:nth-child(5) {
  width: 65%;
  height: 70%;
  background-color: #ffdb58;
  bottom: 0;
  right: -50%;
  animation-delay: 1s;
}
.container::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  backdrop-filter: blur(200px);
}

@keyframes gradient {
  50% {
    transform: scale(1.3) translate(100px);
  }
}
.info {
  width: 60%;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 1;
  background-color: transparent;
  padding: 2rem;
  border-radius: 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}
@media screen and (max-width: 768px) {
  .info {
    width: 80%;
    height: auto;
  }
}
.info h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 1rem;
  font-family: UbuntuBold, "Ubuntu", "Open Sans", "Helvetica Neue", sans-serif;
}
.info p {
  font-size: 1rem;
  font-family: RobotoRegular, "Roboto", "Open Sans", "Helvetica Neue", sans-serif;
}
.info ul {
  list-style: none;
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  font-family: RobotoRegular, "Roboto", "Open Sans", "Helvetica Neue", sans-serif;
}
.info ul li {
  margin-bottom: 1rem;
  margin-right: 15px;
  font-size: 1.2rem;
  font-family: RobotoRegular, "Roboto", "Open Sans", "Helvetica Neue", sans-serif;
}
.info ul li:last-child {
  margin-right: 0;
}
.info a {
  color: #fff;
  text-decoration: none;
  font-family: RobotoRegular, "Roboto", "Open Sans", "Helvetica Neue", sans-serif;
}
.info a:hover {
  text-decoration: underline;
}

/*# sourceMappingURL=styles.css.map */