/* START RESET */

/* 1. Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margins */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* 3. Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 4. Remove list styles */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 5. Reset links */
a {
  text-decoration: none;
  color: inherit;
}

/* 6. Make media easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form elements */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Remove button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/*END RESET */

body {
  background: rgb(30, 30, 30);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.averia-libre-bold {
  font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: normal;
}

.main-title {
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(100px, 20vw, 250px);
  background: -webkit-linear-gradient(118deg, #aa3c3c1c, #ffaeae66);
  background-clip: text;
  -webkit-text-fill-color: #aa3c3c00;
}

.main-title::before {
  content: "Jure.Live";
  position: absolute;
  z-index: -1;
  filter: drop-shadow(0px 0px 13px yellow) drop-shadow(11px 7px 2px green)
    drop-shadow(-36px -21px 59px cyan);
  text-shadow: 4px 2px rgb(50 50 50), 1px -1px rgb(30, 30, 30),
    -1px 1px rgb(30, 30, 30), -1px -1px rgb(30, 30, 30);
}

@media (orientation: landscape) and (max-height: 512px) {
  .main-title {
    font-size: 30vh;
    margin-top: -60px;
  }
}

@media (max-width: 675px) {
  .main-text {
    flex-direction: column;
  }
  .offer {
    margin-top: 12px;
  }
  .contact-link {
    margin-top: 12px;
    align-self: end;
  }
}

@media (max-width: 600px) {
  .main-title {
    flex-direction: column;
    align-items: center;
  }

  .main-title::before {
    display: none;
  }

  .main-title span::before {
    position: absolute;
    z-index: -1;
    filter: drop-shadow(0px 0px 13px yellow) drop-shadow(11px 7px 2px green)
      drop-shadow(-36px -21px 59px cyan);
    text-shadow: 4px 2px rgb(50 50 50), 1px -1px rgb(30, 30, 30),
      -1px 1px rgb(30, 30, 30), -1px -1px rgb(30, 30, 30);
  }

  .Jure {
    margin-bottom: -41px;
  }

  .Jure::before {
    content: "Jure.";
  }

  .Live::before {
    content: "Live";
  }
}

.main-text {
  display: flex;
  justify-content: space-between;
}

.offer {
  color: #dfdfdf;
  font-size: 20px;
  letter-spacing: 1px;
}

.caron {
  position: relative;
}

.letter-with-caron::before {
  content: "v";
  position: absolute;
  transform: translate(0px, -20%) scaleY(0.15) scaleX(0.6);
  text-shadow: 0px 5px #dfdfdf;
}

.contact-link {
  color: #dfdfdf;
  font-size: 40px;
  display: inline-block;
  position: relative;
}

.contact-link::after {
  content: "";
  position: absolute;
  width: 67%;
  transform: scaleX(0);
  height: 3px;
  bottom: 5px;
  left: 57px;
  background-color: #dfdfdf;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.contact-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.contact-form {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-behavior: smooth;
  background: #000000b0;
  color: #dfdfdf;
  backdrop-filter: blur(10px);
  font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: normal;
  background: radial-gradient(rgb(30 30 30 / 92%), transparent);
  border-bottom: 2px solid #dfdfdf;
  box-shadow: 0px 4px 23px -10px #dfdfdf;
  transform: translateY(-100%);
  transition: 0.4s;
}

@media (orientation: landscape) and (max-height: 600px) {
  .contact-form {
    justify-content: flex-start;
    padding: 30px 0;
  }
}

.revealed {
  transform: translateY(0%);
  border-bottom: none;
}

.contact-form h2 {
  font-size: 40px;
}

.contact-form small {
  font-size: 15px;
  margin-bottom: 10px;
}

.contact-form label {
  font-size: 20px;
  margin-top: 10px;
}

.label-email {
  width: min(250px, calc(100% - 60px));
  align-self: flex-start;
  margin-left: max(30px, calc((100% - 600px) / 2));
  text-shadow: 2px 2px 2px green;
}

.label-textarea {
  width: min(600px, calc(100% - 60px));
  text-shadow: 2px 2px 2px green;
}

.contact-form textarea {
  height: 200px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  display: block;
  scroll-margin-top: 45px;
  background: rgb(30, 30, 30);
  color: #dfdfdf;
  caret-color: #dfdfdf;
  border: none;
  box-shadow: -1px -1px 5px -2px #dfdfdf, inset 2px 2px 5px -2px #000000;
  border-radius: 7px;
  border-bottom: 1px solid #dfdfdf54;
  padding: 10px;
  margin-top: 5px;
}

.submit-form {
  color: #dfdfdf;
  font-size: 20px;
  font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: normal;
  margin-top: 20px;
  padding: 8px 15px;
  border-radius: 7px;
  background: rgb(30, 30, 30);
  border-right: 1px solid #dfdfdf;
  box-shadow: -32px 0px 31px -7px #dfdfdf78, 32px 0px 31px -7px #dfdfdf78;
}

.close-form {
  color: #dfdfdf;
  font-size: 40px;
  top: 20px;
  right: 0px;
  position: absolute;
  margin-right: max(30px, calc((100% - 600px) / 2));
  transform: scale(1.3, 0.9);
}