@font-face {
  font-family: 'Japanese3017';
  src: url('fonts/Japanese 3017.otf') format('truetype');
}
@font-face {
  font-family: 'Makisupa';
  src: url('fonts/MAKISUPA.TTF') format('truetype');
}
body{
    margin:auto;
    overflow-x: hidden;
    overflow-y: hidden;
}
.SocialButton{
    position: relative;
    z-index: 3;
    width: 35px;
    height: 35px;
    transition: all 0.5s;
    display:block;
    margin-left: auto;
    margin-right: auto;
}
.SocialButton:hover{
    transform: scale(1.2);
}
.SocialParagraph{
    user-select: none;
    position: relative;
    z-index: 3;
    color: white;
    font-family: 'Japanese3017';
    text-align: center;
    /*transform: translate(50%, 0);*/
}
.Door > img{
    transition: transform 1s;
}
.Door > h1{
    transition: transform 1s;
}
#middleDoor:hover{
    cursor: pointer;
}
#middleDoor:hover ~ #rightDoor{
    transform: translate(6vw, 0px);
}
#middleDoor:hover ~ #leftDoor{
    transform: translate(-6vw, 0px);
}
#leftTitle{
    transform: translate(-50%,-100%);
}
#rightTitle{
    transform: translate(-50%,-100%);
}
#middleDoor:hover ~ #leftTitle{
    transform: translate(-50%, -100%) translate(-30%,0%);
}
#middleDoor:hover ~ #rightTitle{
    transform: translate(-50%, -100%) translate(30%,0%);
}
#leftNumber{
    transform: translate(-50%,-100%);
}
#rightNumber{
    transform: translate(-50%,-100%);
}
#middleDoor:hover ~ #leftNumber{
    transform: translate(-50%, -100%) translate(-1%,0);
}
#middleDoor:hover ~ #rightNumber{
    transform: translate(-50%, -100%) translate(1%,0);
}

#socialsDiv{
    transition: all 0.5s;
}

.BottomIntroText{

    transition: all 0.5s;
}

.RightClip{
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.LeftClip{
    clip-path: polygon(101.5% 0, 0 0, 0 101.5%);
}