* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
body {
  margin:0;
  padding:0;
  background: #ebebeb;
}
/* Wide screen */
@media screen and (min-width: 950px) {
  .profile {
    width: 250px;
  }
  ul li a {
    width:100px;
    height:100px;
    line-height:100px;
    font-size:30px;
    margin: 0 30px;
  }
  ul li a span:nth-child(1),
  ul li a span:nth-child(3){
    height: 3px;
  }
}
/* Narrow screen */
@media screen and (max-width: 950px) {
  .profile {
    width: 150px;
  }
  ul li a {
    width:50px;
    height:50px;
    line-height:50px;
    font-size:15px;
    margin: 0 15px;
  }
  ul li a span:nth-child(1),
  ul li a span:nth-child(3){
    height: 1px;
  }
}

.center-container{
  position: absolute;
  top: 40%;
  left: 50%;
  transform:translate(-50%,-50%);
}
.profile {
  border-radius: 50%;
}
.profile-container{
  width: 100%;
  justify-content: center;
  display: flex;
}
ul {
  margin-top: 15%;
  width: 100%;
  justify-content: center;
  display:flex;
}
ul li {
  list-style:none;
}
ul li a {
  display:block;
  position:relative;
  text-align:center;
  text-decoration:none;
  color:#404040;
  transition:.5s;
}
ul li a span {
  position:absolute;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
  width:100%;
  background:#404040;
}
ul li a span:nth-child(1) {
  top:0;
  left:0;
  transform-origin: right;
}

ul li a span:nth-child(3) {
  bottom:0;
  left:0;
  transform-origin: left;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
  height:100%;
  background:#404040;
}
ul li a span:nth-child(2) {
  top:0;
  left:0;
  transform:scale(0);
  transform-origin: bottom;
}
ul li a span:nth-child(4) {
  top:0;
  right:0;
  transform:scale(0);
  transform-origin: top;
}

.tiktok:hover {
  color: #ff0050;
}

.instagram:hover {
  color: #e1306c;
}

.youtube:hover {
  color: #ff0000;
}