:root {
  --deco-color: #FFFFFF;
  --text-color: #FFFFFF;
  --link-color: #FFFFFF;
  --link-hover-color: #7f3ec7;
  --profire-pic-width: 160px;
  --deco-border-width: 18px; 
  --deco-border-gap: 12px; 
  --deco-border-radius: 80px;
}

#mainWrapper {
  font-family: 'Noto Sans JP', sans-serif;
  background: #333333;
  min-height:100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url(../assets/bg.jpg) no-repeat;
  background-attachment: fixed;
  overflow:hidden;
  background-size: cover;
}

main {
  max-width: 100%;
  width: 640px;
  margin:0 auto;
  padding:32px;
}

.profilePic{
  position:relative;
  padding: calc(var(--deco-border-width) + var(--deco-border-gap));
  z-index:2;
}

.profilePic:before{
  position:absolute;
  content: ' ';
  display:block;
  width:var(--deco-border-width);
  height:var(--deco-border-width);
  border-radius: 100%;
  background:var(--deco-color);
  top:0;
  left:calc((var(--profire-pic-width) + var(--deco-border-width) + var(--deco-border-gap) * 2) / 2 );

}

.profilePic:after{
  position:absolute;
  content: ' ';
  display:block;
  width:calc(100% - ((var(--profire-pic-width) + var(--deco-border-width) * 2 + var(--deco-border-gap)) / 2) - var(--deco-border-radius));
  height:var(--deco-border-width);
  background:var(--deco-color);
  top:calc(var(--profire-pic-width) + var(--deco-border-gap) * 2 + var(--deco-border-width));
  left:calc((var(--profire-pic-width) + var(--deco-border-width) * 2 + var(--deco-border-gap)) / 2);

}

.profilePic__decoLeft{
  width: calc((var(--profire-pic-width) + var(--deco-border-width) * 2 + var(--deco-border-gap) * 2) / 2);
  height: calc(var(--profire-pic-width) + var(--deco-border-width) * 2 + var(--deco-border-gap) * 2);
  position:absolute;
  left:0px;
  top:0px;
  overflow: hidden;
}

.profilePic__decoLeft:before{
  width: calc(var(--profire-pic-width) + var(--deco-border-width) * 2 + var(--deco-border-gap) * 2);
  height: calc(var(--profire-pic-width) + var(--deco-border-width) * 2 + var(--deco-border-gap) * 2);
  position:absolute;
  content: ' ';
  display:block;
  border: var(--deco-border-width) solid var(--deco-color);
  border-radius: 100%;
  left:0px;
  top:0px;
}

.profilePic__frame{
  overflow: hidden;
  border-radius: 100%;
  width: var(--profire-pic-width);
  height: var(--profire-pic-width);
  position:relative;
  

}

.profilePic__frame img{
  height:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.profilePic__decoRight, .content__decoRight, .content__decoLeft{
  width:var(--deco-border-radius);
  height: var(--deco-border-radius);
  position:absolute;
  right:0px;
  top:calc(var(--profire-pic-width) + var(--deco-border-gap) * 2 + var(--deco-border-width));
  overflow: hidden;
}

.profilePic__decoRight:before, .content__decoRight:before, .content__decoLeft:before{
  width: calc(var(--deco-border-radius) * 2);
  height: calc(var(--deco-border-radius) * 2);
  position:absolute;
  content: ' ';
  display:block;
  border: var(--deco-border-width) solid var(--deco-color);
  border-radius: 100%;
  right:0px;
  top:0px;
}

.profilePic__name{
  position:absolute;
  color:var(--text-color);
  font-size:96px;
  bottom:calc(var(--deco-border-width) + 12px);
  left:calc(var(--profire-pic-width) + var(--deco-border-width) + var(--deco-border-gap) * 2);
  font-weight:normal;
  text-shadow: 0 0 30px rgb(9 67 100 / 50%);;
}

.profilePic__name span{
  font-size:32px;
  display:block;
  margin-left:60px;
}

.content{
  
  border-radius: calc(var(--deco-border-radius) - var(--deco-border-width));
  
  margin:calc(var(--deco-border-width) / -2) calc(var(--deco-border-width) / 2) 0;
  position:relative;
  color: var(--text-color);
  backdrop-filter: blur(50px);
  text-shadow: 0 0 30px rgb(9 67 100 / 50%);;
  
}

.content__inner{
  position:relative;
  padding:64px;
  overflow: hidden;
  border-radius:calc(var(--deco-border-radius) - var(--deco-border-width));
  box-shadow: 0 0 20px 2px rgba(0,161,255,.1);

}

.content__inner:before{
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .8);
  filter: blur(50px);
  margin: -20px;
}


.content:after{
  position:absolute;
  content: ' ';
  display:block;
  width:calc(100% - var(--deco-border-radius) * 2 + var(--deco-border-width));
  height:var(--deco-border-width);
  background:var(--deco-color);
  bottom:calc(var(--deco-border-width) / -2);
  left:calc(var(--deco-border-radius) - var(--deco-border-width) / 2);

}

.content:before{
  position:absolute;
  content: ' ';
  display:block;
  width:var(--deco-border-width);
  height:calc(100% - var(--deco-border-radius) * 2 + var(--deco-border-width));
  background:var(--deco-color);
  top:calc(var(--deco-border-radius) - var(--deco-border-width) / 2);
  right:calc(var(--deco-border-width) / -2);

}

.content__decoRight{
  transform: rotate(90deg);
  right:calc(var(--deco-border-width) / -2);
  bottom:calc(var(--deco-border-width) / -2);
  top:auto;
}

.content__decoLeft{
  transform: rotate(180deg);
  left:calc(var(--deco-border-width) / -2);
  bottom:calc(var(--deco-border-width) / -2);
  top:auto;
}

.content__decoElipsce{
  position:absolute;
  left:calc(var(--deco-border-width) / -2);
  bottom:calc(var(--deco-border-radius) - var(--deco-border-width) / 2 );
  width:var(--deco-border-width);
  height:180px;
}

.content__decoElipsce .dot, .content__decoElipsce .dot:before, .content__decoElipsce .dot:after, .content__decoElipsce:before, .content__decoElipsce:after{
  position:absolute;
  content:' ';
  width:var(--deco-border-width);
  height:var(--deco-border-width);
  background:var(--deco-color);
  border-radius: calc(var(--deco-border-width) / 2);
}

.content__decoElipsce .dot{
  bottom: calc(var(--deco-border-width) / -2);
}

.content__decoElipsce .dot:before{
  bottom:27px;
  height: 100px;
}

.content__decoElipsce .dot:after{
  bottom:140px;
  height: 30px;
}

.content__decoElipsce:before{
  bottom:200px;
}

.content__decoElipsce:after{
  bottom:160px;
}


.content__list{
  margin-bottom:2rem;
}

.content__list__headline{
  font-weight:normal;
  font-size:32px;
  margin-bottom:16px;
}

.content__list ul{
  list-style-type: none;
  margin-left:30px;
}

.content__list ul li{
  margin-bottom:8px;
}

.content a{
  
  color: var(--link-color);
  transition: color .3s;
}

.content a:hover{
  color: var(--link-hover-color);
  
  text-decoration: none;
}

.content__snslist{
  margin-top:64px;
  margin-bottom:30px;
}

.content__snslist ul{
  list-style-type:none ;
  display:flex;
  justify-content: space-between;
}

.content__snslist a{
  text-decoration: none;
  text-align:center;
  display:block;
  font-size:14px;
  width:50px;
  position:relative;
}

.content__snslist [class^="icon-"],.content__snslist [class*=" icon-"]{
  display:block;
  width:50px;
  height:50px;
  font-size:50px;
  text-decoration: none;
  margin:0 auto;
  transition: color .3s;
  
}

.content__snslist a .icon-twitch{
  margin-right:-5px;
}

.content__snslist a .text{
  display:block;
  width:100px;
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  margin-left:-50px;
  opacity:0;
  transform: translateY(-120%);
  transition: opacity .3s, transform .3s;
  color: var(--link-color);
}

.content__snslist a:hover .text{
  opacity:100;
  transform: translateY(0);
  color: var(--link-color)
}

.content__snslist a:hover .icon-x{
  color:#000000;
}


.content__snslist a:hover .icon-twitch{
  color:#9146FF
}

.content__snslist a:hover .icon-twitter{
  color:#1D9BF0
}

.content__snslist a:hover .icon-plurk{
  color:#FF574D
}

.content__snslist a:hover .icon-instagram{
  color:#000000;
}


@media screen and (max-width: 640px) {
  :root {
    --profire-pic-width: 100px;
    --deco-border-width: 8px; 
    --deco-border-gap: 8px; 
    --deco-border-radius: 45px;
  }

  .profilePic__name{
    font-size:42px;
    text-shadow: 0 0 30px rgb(9 67 100 / 50%), 0 0 10px rgb(9 67 100 / 50%), 0 0 1px rgb(9 67 100 / 50%);
  }
  .profilePic__name span{
    font-size:16px;
    margin-left:20px;
  }

  .content{
    text-shadow: 0 0 30px rgb(9 67 100 / 50%), 0 0 10px rgb(9 67 100 / 50%), 0 0 1px rgb(9 67 100 / 50%);
  }

  .content__inner{
    padding:32px;
  }

  .content__list__headline{
    font-size:24px;
  }

  .content__snslist{
    margin-bottom:10px;
  }
   ul{
    flex-wrap: wrap;
  }
  .content__snslist ul li{
    width:50%;
    text-align: center;
    margin-bottom:24px;
  }

  .content__snslist ul li a{
    display:inline-block;
  }

  .content__snslist [class^="icon-"], .content__snslist [class*=" icon-"]{
    width:40px;
    height:40px;
    font-size:40px;
  }

  .content__snslist a .icon-twitch{
    margin-right:2px;
  }

  .content__snslist a .text{
    position:relative;
    opacity: 100;
    width: auto;
    transform: none;
    margin-top:4px;
  }
}