@font-face {
  font-family: "din";
  src: local("din"), url("../assets/din.woff") format("woff");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.rotate__container {
  font-family: "din";
  color: white;
  min-width: 100vw;
  min-height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  background: url("../assets/rotate_mobile_bg.png") 0 0 / cover no-repeat;
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  background-color: #7700ff;
  border: 20px solid white;
  padding: 120px 40px 40px 40px;
}

.modal__photo {
  width: 295px;
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
}

.modal__photo img {
  width: 100%;
}

.modal__text {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 30px;
}

.modal__text p {
  font-weight: 400;
  font-size: 32px;
  line-height: 119%;
  text-align: center;
}

@media screen and (max-width: 321px) {
  .modal {
    padding: 100px 20px 20px 20px;
  }
}