/*
  COLORS:
  dark purple: #43192d
  light 'gray': #684d46
  white: #fff
  pink: #e9488a
*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

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

body {
  box-sizing: border-box;
  background-image: url(https://telecabinramsar.com/wp-content/uploads/2025/03/patt.png);
  width: 100%;
  height: 100%;
  font-family: 'Lalezar', sans-serif;
}

.triangle {
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 100% 30vh);
  z-index: -1;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.space {
  width: 100%;
  height: 7%;
}

.header--box {
  width: 70%;
  max-width: 20rem;
  display: flex;
  justify-content: center;
}

.header {
  display: flex;
  justify-content: flex-end;
  width: 20rem;
  height: 16.5rem;
  max-height: 19rem;
  position: relative;
}

.header__icon-box img {
  border-radius: 50%;
  border: .4rem solid #43192d;
  height: 150px;
  width: 150px;
  object-fit: cover;
  max-height: 13.2rem;
  background-color: #43192d;
  margin-top: 2rem;
}

.header__chat-box h1 {
  font-family: 'Lalezar', sans-serif;
  font-size: 1.9rem;
  /* letter-spacing: .3rem; */
  padding: 0;
  color: #43192d;
}

.header__chat-box {
  z-index: 1;
  position: absolute;
  top: .5rem;
  left: -26px;
  transform: rotate(-7deg);
  animation: pop-in .35s ease-in backwards .7s;
}

@keyframes pop-in {
  0% {
    transform: scale(0,0);
    opacity: 0;
  }
  86% {
    transform: scale(1.3,1.3) rotate(-7deg);
    opacity: 1;
  }
  100% {
    transform: scale(1,1) rotate(-7deg);
  }
}

.header__chat-box--behind {
  background-color: #43192d;
  height: 9.5rem;
  width: 13rem;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%,
    0% 75%);
  text-align: center;
  position: relative;
}

.header__chat-box--front {
  background-color: #fff;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%,
    0% 75%);
  text-align: center;
  position: absolute;
  top: .2rem;
  left: .2rem;
  right: .2rem;
  bottom: .3rem;
}

.links-container {
  display: flex;
  flex:1;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  width: 70%;
  max-width: 20.5rem;
}

.links-container li {
  display: inline-block;
  margin-bottom: 1.5rem;
  border: .2rem solid #43192d;
  width: 100%;
  padding: 1.2rem 0 1.2rem 0;
  background-color: #fff;
  position: relative;
  transition: all .2s;
  color: #fff;
}

.links-container li::after {
  content: '';
  border: .1rem solid #43192d;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  top:0;
  left:0;
  z-index: -1;
  opacity: 0;
  transition: all .4s;
}

.links-container li:hover::after {
  transform: scaleX(1.1) scaleY(1.35);
  opacity: 1;
}

.links-container li:active::after {
  transform: scaleX(1.07) scaleY(1.25);
}

.links-container li:active {
  /* box-shadow: inset -.2rem .2rem 0 rgba(233, 72, 138, 1); */
  background-color: #e9488a;
}


@keyframes slide-in-left {
  0% {
    opacity: 0;
    margin-left: -20rem;
  }
  75% {
    margin-left: 1.5rem;
  }
  100% {
    opacity: 1;
    margin-left: 0;
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    margin-right: -20rem;
  }

  75% {
    margin-right: 5rem;
  }

  100% {
    opacity: 1;
    margin-right: 0;
  }
}

.links-container li:last-of-type {
  margin-bottom: 0;
}

.links-container li.right a {
  transform: skew(20deg);
  display: block;
}

.links-container li.right {
  transform: skew(-20deg);
  animation: slide-in-right .9s ease backwards;
}

.links-container li.left a {
  transform: skew(-20deg);
  display: block;
}

.links-container li.left {
  transform: skew(20deg);
  animation: slide-in-left .9s ease backwards;
}

.links-container a:link,
.links-container a:visited {
  text-decoration: none;
  font-size: 2.2rem;
  text-align: center;
  color: #684d46;
  transition: all .2s;
}

.links-container a:active {
  color: #fff;
}

.user-info h2 {
  font-family: 'Fredoka one', sans-serif;
  color: #43192d;
  /* letter-spacing: .1rem; */
}

.user-info-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 0 2rem 0;
}


/* Mobile Styles */
@media only screen and (max-width: 400px) {
  body {

  }
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
  body {

  }
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
  html {
    font-size: 78%;
  }
    body {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      wrap: nowrap;
      align-items: center;
      /* border: 1px solid pink; */
    }

    .triangle {
      clip-path: polygon(30% 0, 100% 0, 100% 45vh);
    }

    .container {
      flex-direction: column;
      justify-content: center;
      align-content: space-around;
      flex-wrap: wrap;
      /* border: 1px solid green; */
      width: 50%;
      max-width: 55rem;
      height: 400px;
    }

    .header {
      height: 15rem;
    }

    .header--box {
      order: 1;
      /* border: 1px solid red; */
    }

    .header__chat-box {
      left: -1px;
    }

    .header__chat-box--behind {
      height: 8rem;
      width: 13rem;
    }

    .header__chat-box h1 {
      font-size: 1.7rem;
      padding: 0;
    }

    .header__icon-box img {
      max-height: 12rem;
    }

    .user-info-box {
      order: 2;
      /* border: 1px solid purple; */
      justify-content: flex-start;
      align-items: flex-end;
      width: 20rem;
      flex:1;
      padding: .2rem 0 .2rem 0;
    }

    .links-container {
      order: 3;
      flex:0;
      min-width: 40rem;
      max-width: 30.5rem;
      min-height: 400px;
      /* border: 1px solid blue; */
      margin-top: 0;
    }

    .links-container li {
      max-width: 20.5rem;
    }

    .space {
      display: none;
    }
}