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

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

body {
  box-sizing: border-box;
  background-color: #7fe4c7;
  width: 100%;
  height: 100%;
  font-family: 'Josefin sans', 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: 90%;
  max-width: 20rem;
  display: flex;
  justify-content: center;
}

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

.header__icon-box img {
  border-radius: 0%;
  height: 80%;
  max-height: 13.2rem;
  margin-top: 5rem;
}

.header__chat-box h1 {
  font-family: 'Fredoka One', sans-serif;
  font-size: 1.25em;
  letter-spacing: .1rem;
  padding: 17%;
  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;
}

.sociallinks {
  display:flex;
  margin-top: 30px;
}
    
ul li {
  list-style:none;
}
    
.sociallinks a {
  display:block;
  position:relative;
  width:2em;
  line-height:30px;
  font-size:30px;
  text-align:center;
  text-decoration:none;
  color:#404040;
  transition:.5s;
}

.twitter:hover {
  color: #1da1f2;
}
.twitter:hover span { 
  background: #1da1f2;
}
.instagram:hover {
  color: #c32aa3;
}
.instagram:hover span { 
  background: #c32aa3;
}
    .youtube:hover {
  color: #dd4b39;
}
.youtube:hover span { 
  background: #dd4b39;
}

ul li a .twitter {
  color: #1da1f2;
}



@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: 11rem;
  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: 1.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;
}



/* 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;
    }

    .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__icon-box img {
  border-radius: 0%;
  height: 80%;
  max-height: 13.2rem;
  margin-top: 2rem;
}
    
    .header--box {
      order: 1;
      /* border: 1px solid red; */
    }

    .header__chat-box {
      top: -4em;
    }

    .header__chat-box--behind {
      height: 9rem;
      width: 12.5rem;
    }

    .header__chat-box h1 {
      font-size: 1.4rem;
      padding: 13%;
    }

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

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

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

    .links-container li {
      max-width: 20.5rem;
        font-size: 1em;
    }

    .space {
      display: none;
    }
}