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

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

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 500;
  font-style: normal;
} */

/* reset */

* {
	padding: 0px;
	margin: 0px;
	border: none;
}

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

a, a:link, a:visited  {
  text-decoration: none;
}

a:hover  {
  text-decoration: none;
}

aside, nav, footer, header, section, main {
	display: block;
}

h1, h2, h3, h4, h5, h6, p {
  font-size: inherit;
	font-weight: inherit;
}

ul, ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

img, svg {
	max-width: 100%;
	height: auto;
}

address {
  font-style: normal;
}

input, textarea, button, select {
	font-family: inherit;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

input::-ms-clear {
	display: none;
}

textarea {
	resize: vertical;
}

button, input[type="submit"] {
  display: inline-block;
  box-shadow: none;
  background-color: transparent;
  background: none;
  cursor: pointer;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

label {
	cursor: pointer;
}

legend {
	display: block;
}

input[type='file'] {
	max-width: 100%;
}





/* main */

html {
  /* 1rem = 10px */
  font-size: 62.5%; 
}

:root {
  --color-black: #121212;
  --color-black-grid: rgba(255, 255, 255, 0.03);

  --color-blue: #545cc2;
  /* --color-blue-hero: #545bc280; */
  --color-blue-hero: #252A6E;

  --color-white: #ffffff;
  --color-orange: #fb4104;
  --color-pink: #fd0bb8;
  --color-yellow: #fbfa32;
  --color-green: #25fd25;

  /* 320px x 2560px */
  --font-size-giant: clamp(2.4rem, 2.1rem + 0.9375vw, 4.5rem);
  --font-size-large: clamp(1.8rem, 1.5429rem + 0.8036vw, 3.6rem);
  --font-size-normal: clamp(1.4rem, 1.2rem + 0.625vw, 2.8rem);
  --font-size-minimum: clamp(1.2rem, 1.1143rem + 0.2679vw, 1.8rem);

  --margin-normal: clamp(1.8rem, 1.0571rem + 2.3214vw, 7rem);
  --margin-small: clamp(1.2rem, 0.7286rem + 1.4732vw, 4.5rem);
  --margin-minimum: clamp(0.8rem, 0.4571rem + 1.0714vw, 3.2rem);
  
  --padding-normal: clamp(1.2rem, 0.9143rem + 0.8929vw, 3.2rem);
  --padding-small: clamp(0.8rem, 0.5714rem + 0.7143vw, 2.4rem);
  --padding-minimum: clamp(0.6rem, 0.5143rem + 0.2679vw, 1.2rem);
  
  --border-normal: clamp(0.4rem, 0.3429rem + 0.1786vw, 0.8rem);
  --checkbox-normal: clamp(2.4rem, 2.0857rem + 0.9821vw, 4.6rem);

  --ul-normal: clamp(1.8rem, 1.6571rem + 0.4464vw, 2.8rem);

  /* 1024px x 2560px */
  --section-large: clamp(41rem, 0.0667rem + 39.974vw, 102.4rem);
  --section-normal: clamp(27.3rem, -1.0333rem + 27.6693vw, 69.8rem);
}

body{
  font-size: var(--font-size-normal);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-white);
  background-color: var(--color-black);
  background-image: linear-gradient(0deg, transparent 24%, 
  var(--color-black-grid) 25%, 
  var(--color-black-grid) 26%, transparent 27%,transparent 74%, 
  var(--color-black-grid) 75%, 
  var(--color-black-grid) 76%, transparent 77%,transparent),
  linear-gradient(90deg, transparent 24%, 
  var(--color-black-grid) 25%, 
  var(--color-black-grid) 26%, transparent 27%,transparent 74%, 
  var(--color-black-grid) 75%, 
  var(--color-black-grid) 76%, transparent 77%,transparent);
  background-size: 75px 75px;
}

.container{
  margin-inline: var(--margin-normal); 
  margin-block: var(--margin-small);
}

h1{
  font-size: var(--font-size-giant);
}

h2{
  font-size: var(--font-size-large);
}

a:hover{
  text-decoration: none !important;
}




/* menu */

.menu{
  font-size: var(--font-size-large);
  margin-inline: var(--margin-normal); 
  margin-block: var(--margin-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu__logo, .menu__logo::after {
  padding: var(--padding-minimum) var(--padding-normal);
  background: linear-gradient(45deg, transparent 5%, var(--color-orange) 5%);
  border: 0;
  color: var(--color-white);
  border-right: var(--border-normal) solid var(--color-blue);
  outline: transparent;
  position: relative;
}

.menu__logo::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  content: "BorisWebDev";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, var(--color-blue) 3%, var(--color-blue) 5%, var(--color-pink) 5%);
  text-shadow: -3px -3px 0px var(--color-yellow), 3px 3px 0px var(--color-blue);
  clip-path: var(--slice-0);
}

.menu__logo:hover::after {
  animation: 0.6s Glitch;
  animation-timing-function: steps(2, end);
}

@keyframes Glitch {
 0% {
  clip-path: var(--slice-1);
  transform: translate(-20px, -10px);
 }
 10% {
  clip-path: var(--slice-3);
  transform: translate(10px, 10px);
 }
 20% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 10px);
 }
 30% {
  clip-path: var(--slice-3);
  transform: translate(0px, 5px);
 }
 40% {
  clip-path: var(--slice-2);
  transform: translate(-5px, 0px);
 }
 50% {
  clip-path: var(--slice-3);
  transform: translate(5px, 0px);
 }
 60% {
  clip-path: var(--slice-4);
  transform: translate(5px, 10px);
 }
 70% {
  clip-path: var(--slice-2);
  transform: translate(-10px, 10px);
 }
 80% {
  clip-path: var(--slice-5);
  transform: translate(20px, -10px);
 }
 90% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 0px);
 }
 100% {
  clip-path: var(--slice-1);
  transform: translate(0);
 }
}

.menu__lang{
  cursor: default;
  margin: var(--padding-minimum) var(--padding-normal);
}





/* form section */

.form{
  width: var(--section-normal);
  position: absolute;
  margin-left: var(--margin-normal);
}

.form__container {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  border-left: var(--border-normal) solid var(--color-blue);
  background: linear-gradient(315deg, transparent 3%, var(--color-yellow) 3%, var(--color-orange) 13%, var(--color-orange) 100%);
  padding: var(--padding-normal);
}

.form__text{
  font-weight: 500;
  cursor: default;
}
  
.form__input {
  color: var(--color-white);
  width: 100%;
  background-color: var(--color-black);
  border: none;
  outline: none;
  padding: var(--padding-minimum);
  transition: all 0.2s ease-in-out;
  border-right: 1px solid transparent;
  resize: none;
}

.form__input:focus, .form__input:not(:placeholder-shown) {
  border-right: var(--border-normal) solid var(--color-green);
}

.form__input::placeholder{
  color: var(--color-white);
  opacity: 0.46;
  font-weight: 300;
  font-size: var(--font-size-minimum);
}

.form__checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--padding-minimum);
}

.form__checkbox{
  width: var(--checkbox-normal);
  height: var(--checkbox-normal);
  margin: 0; 
  opacity: 0;
  flex-shrink: 0;
}

.form__checkbox-text{
  font-size: var(--font-size-minimum);
}

.form__checkbox-custom {
  margin-left: calc(var(--checkbox-normal) * -1 - var(--padding-minimum));
  flex-shrink: 0;
  width: var(--checkbox-normal);
  height: var(--checkbox-normal);
  position: relative;
  transition: all 0.2s ease;
  background-color: var(--color-black);
}

.form__checkbox-custom.block{
  cursor: not-allowed;
}

.form__checkbox-custom::after {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 38%;
  width: clamp(1rem, 0.9286rem + 0.2232vw, 1.5rem);
  height: clamp(2rem, 1.8571rem + 0.4464vw, 3rem);
  border: solid var(--color-green);
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.form__checkbox:checked + .form__checkbox-custom::after {
  display: block;
}

.form__checkbox:focus-visible + .form__checkbox-custom {
  border: 1px solid black;
  outline: 1px solid var(--color-white);
}

.form__checkbox-href, .form__checkbox-href:link, .form__checkbox-href:visited{
  color: var(--color-white);
  text-decoration: underline;
  font-weight: 500;
}

.form__submit-button {
  font-weight: 500;
  position: relative;
  overflow: hidden;
  padding: var(--padding-minimum) var(--padding-normal);
  cursor: pointer;
  text-align: center;
  color: var(--color-white);
  background: var(--color-black);
  background: linear-gradient(315deg, transparent 5%, var(--color-black) 5%);
}

.form__submit-button:hover {
  color: var(--color-black);
}

.form__submit-button:hover::before {
  transform: scaleX(1);
}

.form__submit-button.is-active{
  color: var(--color-black);
  cursor: default;
}

.form__submit-button.is-active::before {
  transform: scaleX(1);
}

.form__submit-button.failure{
  color: var(--color-black);
  cursor: default;
}

.form__submit-button.failure::before {
  transform: scaleX(1);
  background: linear-gradient(315deg, transparent 5%, var(--color-yellow) 5%);
}

.form__submit-button-content {
  position: relative;
}

.form__submit-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg, transparent 5%, var(--color-green) 5%);
  transition: all 0.2s;
}

.form__website {
  display: none !important;
  visibility: hidden;
}





/* about section */

.about{
  width: var(--section-large);
  margin-left: var(--margin-normal);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--padding-normal);
  z-index: 1;
  cursor: default;
}

.about__li {
  list-style: disc;
}

.about__ul{
  padding: 0 0 0 var(--ul-normal);
}

.about__title{
  display: inline;
  font-size: inherit;
  font-weight: inherit;
}

.about__text:first-of-type {
  opacity: 0;
  animation: Reveal 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

.about__li {
  opacity: 0;
  animation: SlideUp 0.6s ease-out forwards;
}
.about__li:nth-child(1) { animation-delay: 0.9s; }
.about__li:nth-child(2) { animation-delay: 1.1s; }
.about__li:nth-child(3) { animation-delay: 1.3s; }

.about__text:last-of-type {
  opacity: 0;
  animation: Reveal 0.8s ease-out forwards;
  animation-delay: 1.8s;
}

@keyframes Reveal {
  0% {
    opacity: 0;
    filter: brightness(2) blur(8px);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}

@keyframes SlideUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* .about__href, .about__href:link, .about__href:visited {
  display: inline-block;
  color: var(--color-white);
  font-size: var(--font-size-large);
  font-weight: 500;
  text-decoration: underline;
  animation: Glow 1.5s ease-in-out forwards;
  animation-delay: 2.5s; 
  transition: text-shadow 0.3s ease, transform 0.3s ease;
}

@keyframes Glow {
  from {
      text-shadow: 0 0 0 var(--color-black);
      color: var(--color-white);
      text-decoration-color: var(--color-white);
  }
  to {
      text-shadow: 0 0 10px var(--color-orange);
      color: var(--color-orange);
      text-decoration-color: var(--color-orange);
  }
} */

.about__img-container{
  width: var(--font-size-giant);
  height: var(--font-size-giant);
  border-radius: 50%;
  background-color: #29a9ea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(5%, 15%);
  overflow: hidden; 
  position: relative;
}

.about__img{
  width: 63%;
  height: 63%;
  transform: translate(-6%, 3%);
}

.about__href:hover .about__img {
  animation: flyAway 0.2s linear;
}

@keyframes flyAway {
  0% {
    transform: translate(-6%, 3%) scale(1);
    opacity: 1;
  }
  48% {
    transform: translate(173%, -100%) scale(0.6);
    opacity: 1;
  }
  49% {
    transform: translate(173%, -100%) scale(0.6);
    opacity: 0;
  }
  51% {
    transform: translate(-173%, 100%) scale(1.6);
    opacity: 0;
  }
  52% {
    transform: translate(-173%, 100%) scale(1.6);
    opacity: 1;
  }
  100% {
    transform: translate(-6%, 3%) scale(1);
    opacity: 1;
  }
}





/* hero section */

.hero {
  position: fixed;
  bottom: 0px;
  right: 0px;
}

.hero__image {
  display: block;
  max-height: 80vh;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 0 1rem var(--color-blue-hero));
  /* animation: FloatShadow 5s linear infinite; */
  width: var(--section-normal);
}

/* @keyframes FloatShadow {
  0% {
    filter: drop-shadow(20px -10px 3rem var(--color-blue-hero));
  }
  25% {
    filter: drop-shadow(10px -20px 3rem var(--color-blue-hero));
  }
  50% {
    filter: drop-shadow(0px -10px 3rem var(--color-blue-hero));
  }
  75% {
    filter: drop-shadow(10px 0px 3rem var(--color-blue-hero));
  }
  100% {
    filter: drop-shadow(20px -10px 3rem var(--color-blue-hero));
  }
} */





/* privacy section */

.container--privacy{
  display: flex;
  flex-direction: column;
  gap: var(--padding-minimum);
  cursor: default;
}

.privacy__href{
  display: block;
  font-size: var(--font-size-minimum);
  margin-inline: var(--margin-normal);
  margin-top: var(--padding-normal);
  margin-bottom: var(--padding-normal);
  text-align: right;
}

.privacy__href--index{
  position: fixed;
  bottom: 0px;
  left: 0px;
}

.privacy__href, .privacy__href:link, .privacy__href:visited{
  color: var(--color-white);
  opacity: 0.46;
  font-weight: 300;
  text-decoration: underline;
}

.privacy__href:hover{
  opacity: 1;
}

.privacy-full__h2{
  margin-top: var(--margin-small);
}

.privacy-full__li {
  list-style: disc;
}

.privacy-full__ul{
  padding: 0 0 0 var(--ul-normal);
}

.privacy-full__table{
  border: 1px solid var(--color-white);
  border-collapse: collapse;
}

.privacy-full__table-td{
  border: 1px solid var(--color-white);
  padding-inline: var(--padding-minimum); 
  padding-block: var(--padding-minimum);
}

.privacy-full__href, .privacy-full__href:link, .privacy-full__href:visited{
  color: var(--color-white);
  text-decoration: underline;
  font-weight: 500;
}





/* other page section */

.page__h1{
  margin-bottom: var(--padding-minimum);
  text-align: center;
  line-height: 1.1;
}

.page__h2{
  text-align: center;
}

.page__text{
  text-align: center;
}

.container--page{
  cursor: default;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
}

.page__href, .page__href:link, .page__href:visited{
  color: var(--color-white);
  text-decoration: underline;
  font-weight: 500;
}

.privacy__href--page{
  position: fixed;
  bottom: 0px;
  right: 0px;
  text-align: right;
}





/*heisenberg page*/

.container--heisenberg{
  display: flex;
  justify-content: center;
}

.heisenberg__logo-container{
  display: flex;
  align-items: center;
  gap: var(--margin-small);
}

.heisenberg__logo{
  height: 500px;
  width: auto;
}

.heisenberg__text-container{
  width: var(--section-large);
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: var(--padding-minimum);
}





/* adaptive */

@media (orientation: landscape) and (max-width: 1024px) {

    .container--index {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        row-gap: var(--margin-normal);
    }

    .form {
        grid-column: 1 / 3; 
        position: static;
        width: auto;
        margin-right: var(--margin-normal);
        max-width: 140vh;
    }

    .about {
        grid-column: 1 / 2;
        position: static;
        transform: none;
        width: auto;
        display: flex;
        justify-self: start;
        margin-bottom: var(--margin-normal);
    }

    .hero {
        position: static; 
        grid-column: 2 / 3;
        justify-self: end;
        object-fit: contain;
    }

    .hero__image {
        width: auto; 
        max-height: 100vh;
    }

    .form__checkbox-custom::after {
        border-width: 0 2px 2px 0;
    }

    .privacy__href--index{
        position: relative;
        margin-inline: auto;
        margin-bottom: auto;
        text-align: left;
    }

}

@media (orientation: portrait) and (max-width: 1024px) {

    .container--index {
        display: flex;
        flex-direction: column;
        gap: var(--margin-normal);
    }

    .form {
        position: static;
        width: auto;
        margin-right: var(--margin-normal);
        max-width: 50vh;
    }

    .about {
        position: static;
        transform: none;
        width: auto;
        margin-right: var(--margin-normal);
    }

    .hero {
        position: static;
        align-self: flex-end;
    }

    .hero__image {
        max-height: 50vh;
        width: auto;
    }

    .form__checkbox-custom::after {
        border-width: 0 2px 2px 0;
    }

    .privacy__href--index{
        position: relative;
        margin-inline: auto;
        margin-bottom: auto;
        text-align: left;
    }
}