@import 'reset.css';
@import 'fonts.css';

* {
  box-sizing: border-box;
}

.logo {
  position: absolute;
  width: 6.6vw;
  height: 6.6vw;
  background-image: url(../images/logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  top: 1.3vw;
  left: 1.3vw;
  z-index: 3;
}

.error {
  width: 100vw;
  height: 71vw;
  position: relative;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  background-color: #fff6d2;
}

.link {
  position: absolute;
  background-color: #1a1a1a;
  font-family: 'SF_Pro_Display';
  font-size: 2.7vw;
  color: #fff6d2;
  z-index: 3;
  padding: 2vw 4vw;
  border-radius: 4vw;
  text-decoration: none;
  transition: all ease 0.6s;
  left: 38vw;
  top: 50vw;
}
.link:hover {
  color: #fff6d2;
  background-color: #5d8bed;
}
.bagr {
  position: absolute;
  width: 100vw;
  height: 71vw;
  background-image: url(../images/bagr.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.error_404 {
  position: absolute;
  font-family: 'Lemon Milk';
  font-size: 24.3vw;
  top: 16.25vw;
  left: 23vw;
  color: #5d8bed;
}

.text_er {
  position: absolute;
  font-family: 'SF_Pro_Display';
  font-size: 3.3vw;
  color: #ff7db7;
  top: 42vw;
  left: 33vw;
}

/* мобилка */
@media screen and (max-width: 767px) {
  .error {
    height: 216vw;
  }
  .link {
    width: 52vw;
    height: 14vw;
    font-size: 5.5vw;
    padding: 3vw 13vw;
    border-radius: 14vw;
    transition: all ease 0.6s;
    top: 130vw;
    left: 23.43vw;
  }
  .bagr {
    position: absolute;
    width: 100vw;
    height: 210vw;
    background-image: url(../images/errwal.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }
  .error_404 {
    font-size: 38vw;
    top: 71.498vw;
    left: 11.111vw;
  }

  .text_er {
    font-size: 4.8vw;
    top: 117vw;
    left: 27.155vw;
  }
  .logo {
    width: 15.4vw;
    height: 15.4vw;
    top: 3vw;
    left: 3vw;
    z-index: 3;
  }
}