@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
html {
  width: 100%;
}

h1{
    color: rgb(5, 3, 85);
    font-family: cursive, 'cursive';
    font-size: 100%;
    padding-top:80px;
    font-weight: bold;
    height: 400px;
    width: 100%;
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
}
.Wordaction h1{
    height: 30%;
    width: 100%;

}

.Wordaction p{
    color: rgb(5, 3, 85);
    font-family: cursive, 'cursive';
    font-size: 100%;
    text-align:center;
    padding-top:80px;
    font-weight: bold;
    height: 400px;
    position: absolute;
    
    width: 100%;
}
.Wordaction .WordOut span{
    display: inline-block;
    text-shadow: 0 0 0 whitesmoke;
    -webkit-animation: smoky 5s 3s both;
            animation: smoky 5s 3s both;
  }
  
  .WordOut  span:nth-child(even) {
    -webkit-animation-name: smoky-mirror;
            animation-name: smoky-mirror;
  }
  
  @-webkit-keyframes smoky {
    60% {
      text-shadow: 0 0 5px whitesmoke;
    }
    to {
      -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1);
              transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1);
      text-shadow: 0 0 5px whitesmoke;
      opacity: 0;
    }
  }
  
  @keyframes smoky {
    60% {
      text-shadow: 0 0 5px whitesmoke;
    }
    to {
      -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1);
              transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1);
      text-shadow: 0 0 5px whitesmoke;
      opacity: 0;
    }
  }
  @-webkit-keyframes smoky-mirror {
    60% {
      text-shadow: 0 0 5px whitesmoke;
    }
    to {
      -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(1);
              transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(1);
      text-shadow: 0 0 5px whitesmoke;
      opacity: 0;
    }
  }
  @keyframes smoky-mirror {
    60% {
      text-shadow: 0 0 40px whitesmoke;
    }
    to {
      -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(1);
              transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale();
      text-shadow: 0 0 20px whitesmoke;
      opacity: 0;
    }
  }
  .WordOut span:nth-of-type(1) {
    -webkit-animation-delay: 2.0s;
            animation-delay: 2.0s;
  }
  
  .WordOut span:nth-of-type(2) {
    -webkit-animation-delay: 2.1s;
            animation-delay: 2.1s;
  }
  
  .WordOut span:nth-of-type(3) {
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s;
  }
  
  .WordOut span:nth-of-type(4) {
    -webkit-animation-delay: 2.3s;
            animation-delay: 2.3s;
  }
  
  .WordOut span:nth-of-type(5) {
    -webkit-animation-delay: 2.4s;
            animation-delay: 2.4s;
  }
  
  .WordOut span:nth-of-type(6) {
    -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s;
  }
  
  .WordOut span:nth-of-type(7) {
    -webkit-animation-delay: 2.6s;
            animation-delay: 2.6s;
  }
  
  .WordOut  span:nth-of-type(8) {
    -webkit-animation-delay: 2.7s;
            animation-delay: 2.7s;
  }
  
  .WordOut span:nth-of-type(9) {
    -webkit-animation-delay: 2.8s;
            animation-delay: 2.8s;
  }
  
  .WordOut span:nth-of-type(10) {
    -webkit-animation-delay: 2.9s;
            animation-delay: 2.9s;
  }
  
  .WordOut span:nth-of-type(11) {
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
  }
  
  .WordOut span:nth-of-type(12) {
    -webkit-animation-delay: 3.1s;
            animation-delay: 3.1s;
  }
  
  .WordOut span:nth-of-type(13) {
    -webkit-animation-delay: 3.2s;
            animation-delay: 3.2s;
  }
  
  .WordOut span:nth-of-type(14) {
    -webkit-animation-delay: 3.3s;
            animation-delay: 3.3s;
  }
  .WordOut span:nth-of-type(15) {
    -webkit-animation-delay: 3.4s;
            animation-delay: 3.4s;
  }
  .WordOut span:nth-of-type(16) {
    -webkit-animation-delay: 3.5s;
            animation-delay: 3.5s;
  }
  .WordOut span:nth-of-type(17) {
    -webkit-animation-delay: 3.6s;
            animation-delay: 3.6s;
  }
  .WordOut span:nth-of-type(18) {
    -webkit-animation-delay: 3.7s;
            animation-delay: 3.7s;
  }
  .WordOut span:nth-of-type(19) {
    -webkit-animation-delay: 3.8s;
            animation-delay: 3.8s;
  }
  .WordOut span:nth-of-type(20) {
    -webkit-animation-delay: 3.9s;
            animation-delay: 3.9s;
  }
  .WordOut span:nth-of-type(21) {
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
  }


  .Wordaction .WordIn span {/*各テキストにanimationを設定*/
    display: inline-block;
    color: transparent;/*テキストを透明にしてtext-shadowだけ表示する*/
    animation: blur 10s ease-out infinite;
    animation-fill-mode: forwards;
    padding-bottom: 10px;
    width: auto;
    
  }
   
  .WordIn span:nth-child(1) {/*一文字ずつ遅延させる*/
    animation-delay: 5s;
  }
  .WordIn span:nth-child(2) {
    animation-delay: 5.1s;
  }
  .WordIn span:nth-child(3) {
    animation-delay: 5.2s;
  }
  .WordIn span:nth-child(4) {
    animation-delay: 5.3s;
  }
  .WordIn span:nth-child(5) {
    animation-delay: 5.4s;
  }
  .WordIn span:nth-child(6) {
    animation-delay: 5.5s;
  }
  .WordIn span:nth-child(7) {
    animation-delay: 5.6s;
  }
  .WordIn span:nth-child(8) {
    animation-delay: 5.7s;
  }
  .WordIn span:nth-child(9) {
    animation-delay: 5.8s;
  }
   
  @keyframes blur {/*opacityとtext-shadow+animationでフェードインを表現する*/
    0%    {text-shadow:  0 0 100px rgb(5, 3, 85);opacity:0}
    5%    {text-shadow:  0 0 90px rgb(5, 3, 85);}
    15%    {opacity: 1;}
    20%    {text-shadow:  0 0 0px rgb(5, 3, 85);}
    80%    {text-shadow:  0 0 0px rgb(5, 3, 85);}
    85%    {opacity: 1;}
    95%    {text-shadow:  0 0 90px rgb(5, 3, 85);}
    100%  {text-shadow:  0 0 100px rgb(5, 3, 85); opacity:0;}
  }
  .Wordaction .Name span{
    display: inline-block;
    color: transparent;/*テキストを透明にしてtext-shadowだけ表示する*/
    animation: blur2 10s ease-out infinite;
    animation-fill-mode: forwards;
    padding-bottom: 3px;
  }
  .Name span:nth-child(1){
    animation-delay: 5.9s;
  }
  .Name span:nth-child(2){
    animation-delay: 6s;
  }
  .Name span:nth-child(3){
    animation-delay: 6.1s;
  }
  .Name span:nth-child(4){
    animation-delay: 6.2s;
  }
  .Name span:nth-child(5){
    animation-delay: 6.3s;
  }
  .Name span:nth-child(6){
    animation-delay: 6.4s;
  }
  .Name span:nth-child(7){
    animation-delay: 6.5s;
  }
  .Name span:nth-child(8){
    animation-delay: 6.6s;
  }
  .Name span:nth-child(9){
    animation-delay: 6.7s;
  }
  .Name span:nth-child(10){
    animation-delay: 6.8s;
  }
  .Name span:nth-child(11){
    animation-delay: 6.9s;
  }
  .Name span:nth-child(12){
    animation-delay: 7s;
  }
  .Name span:nth-child(13){
    animation-delay: 7.1s;
  }
  .Name span:nth-child(14){
    animation-delay: 7.2s;
  }
  .Name span:nth-child(15){
    animation-delay: 7.3s;
  }
  @keyframes blur2 {/*opacityとtext-shadow+animationでフェードインを表現する*/
    0%    {text-shadow:  0 0 100px rgba(61, 27, 1);opacity:0}
    5%    {text-shadow:  0 0 90px rgba(61, 27, 1);}
    15%    {opacity: 1;}
    20%    {text-shadow:  0 0 0px rgba(61, 27, 1);}
    80%    {text-shadow:  0 0 0px rgba(61, 27, 1);}
    85%    {opacity: 1;}
    95%    {text-shadow:  0 0 90px rgba(61, 27, 1);}
    100%  {text-shadow:  0 0 100px rgba(61, 27, 1); opacity:0;}
  }



a.nav-list{
    color: rgb(250, 249, 249);
    font-family: cursive, 'cursive';
    font-size: 50px;
    margin: 0 80px;
    font-size:150%;
    font-weight: bold;
    text-align:center;
}
.container1 {
    display: flex;
    justify-content: space-between;
    margin: auto;
    width: 100%;
  }
.header-nav {
    background-color: rgba(0,0,0,0.8);
    background-blend-mode:lighten;
    display: flex;
    list-style-type: none;
    z-index: 9999; /* 重なる順番　数値が大きいほど手前に表示*/
    position: fixed;
    height: var(--nav-height);
    top: 0px;
    left: 0px;
    width: 100%;
}

#Myprofile,
#Mystudy{
    padding-top:70px;
    margin-top:-70px;
}
#SNS,
#GitHub{
    padding-top:10px;
    margin-top:-10px;
}
body {
    background-image: url("福ちゃん.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100%, 100%;
    height: 100%;
    background-color:rgba(255,255,255,0.5);
    background-blend-mode:lighten;
}
img{
    width: 200px;
    height: auto;
}
h2{
    font-family:'Comic Sans MS';
    color: rgb(5, 3, 85);
    font-size: 60px;
    font-weight: bold;
}
.Myprofile{
    background-color: rgb(250, 249, 249, 0.4);
    background-blend-mode:lighten;
    display: inline-block;
    width: 100%;
    background-repeat: no-repeat;
    justify-content: space-between;
}
.box-img,
.box-Myprofile1,
.box-Myprofile2 {
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
    font-size: 25px;
    padding-left: 65px; 
}
h3{
    font-family:'Comic Sans MS';
    color: rgb(5, 3, 85);
    font-size: 60px;
    font-weight: bold;
}
h4{
    font-family:'Comic Sans MS';
    color: rgb(5, 3, 85);
    font-size: 60px;
    font-weight: bold;
    padding-left: 65px;
}
h5{
    font-size: 23px;
    font-weight: bold;
    color: rgba(61, 27, 1);
}
p{
    font-size: 15px;
}
.Mystudy{
    background-blend-mode:lighten;
    justify-content: space-between;
}
.未来創造PJ1,
.未来創造PJ2{
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
    padding-left: 10px; 
}
.Dream_Journal,
.Search_location_in_Tokyo{
    display: inline-block;
    vertical-align: top;
    width: 50%; 
}
.info{
    background-color: rgb(250, 249, 249, 0.4);
    background-blend-mode:lighten;
    justify-content: space-between;
}
footer{
    text-align: center;
    margin: 20px 0;
}
/* フッターの固定 */
div#footer-fixed{
      position: fixed;            /* フッターの固定 */
      bottom: 0px;                /* 位置(下0px) */
      left: 0px;                  /* 位置(左0px) */
      width: 100%;                /* 横幅100%　*/
      height: 140px;              /* 縦幅140px */
}