* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans JP";
  color: rgb(50, 50, 50);
}

html{
 scroll-behavior: smooth;
}

h1{
 font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding: 1rem;
  margin: 0;
}

h3 {
 font-size: 1.25rem;
}

h5 {
  margin: 0;
}

p {
  margin: 0;
  /* font-weight: lighter; */
}

a {
  /* font-weight: lighter; */
}

/* .header-back {
 background: linear-gradient(45deg,  #23d5ab,#23a6d5,#e73c7e, #ee7752);
 background-size: 600% 600%;
 height: 100vh;
 animation: gradient 10s ease-in-out infinite;
} */

.header-back {
 background:linear-gradient(180deg,  black,black,black, rgb(250, 250, 250));
 height: 100vh;
}

video {
 width: 100%;
 position: absolute;
 padding: 0;
 padding-bottom: 1.5rem;
 /* z-index: 0; */
}

.home-wrap {
 padding-left: 1rem;
 position: absolute;
 animation: title-animate 2s ease-in-out;
}

.home-link {
 color: white;
 border: 1px solid white;
 margin: 0 auto;
 padding: 0.5rem 1rem 0.5rem 1rem;
 transition: all .5s ease;
 text-decoration: none;
 font-weight: bolder;
}

.home-link:hover {
 background-color: white;
 color: black;
 text-decoration: none;

}

.home-link-a:hover {
 text-decoration: none;
}

.home-link-container {
 display: flex;
 justify-content: right;
 padding-top: 1rem;
}

.bolder {
 font-weight: bolder;
}

.under-line {
 height: 1px;
 background: rgb(50, 50, 50);
 margin-bottom: 1rem;
}

.nav {
 font-size: 3.5rem;
 background-color: rgba(100, 100, 100, 0.7);
}

.nav-text:hover {
 text-decoration: none;
}

.menu-btn {
width: 100%;
height: 50px;
cursor: pointer;
transition: all .3s ease-in;
padding-right: 0.5rem;
}

.menu-btn-burger {
 width: 25px;
 height: 2px;
 background-color: white;
 transition: all .3s ease-in;
}

.menu-btn-burger2,
.menu-btn-burger3 {
 position: absolute;
 width: 25px;
 height: 2px;
 transition: all .3s ease-in;
 background-color: white;
}

.bg-black {
 background-color: black;
}

.menu-btn-burger2{
 transform: translateY(-10px);
}
.menu-btn-burger3{
 transform: translateY(10px);
}

.menu-btn.open .menu-btn-burger {
 transform: translateX(50px);
 background-color: transparent;
 box-shadow: none;
}

.menu-btn.open .menu-btn-burger2 {
 transform: rotate(45deg);
}

.menu-btn.open .menu-btn-burger3 {
 transform: rotate(-45deg);
}

.nav-text:hover {
 opacity: 0.7;
}

.close:hover {
 cursor: pointer;
}

.fade-in {
 animation: fade-in 0.5s ease;
}

.fade-out {
 animation: fade-out 0.5s ease;
}

.profile-wrap {
 width: 80%;
 margin: 0 auto;
}

.profile {
 width: 100%;
 filter: grayscale(100%);
 background-repeat: no-repeat;
 margin: 0 auto;
}

.about-me {
 padding: 1rem;
}

.skills-wrap {
 width: 90%;
 margin: 0 auto;
 color: gray;
}

.skill {
 font-size: 0.75rem;
}

.progress {
 border-radius: 0;
}

.bar-back {
 display: flex;
 -ms-flex-direction: column;
 flex-direction: column;
 -ms-flex-pack: center;
 justify-content: center;
 overflow: hidden;
 color: #fff;
 text-align: center;
 white-space: nowrap;
 background: url(../img/fire.jpg);
 background-size: 250%;
 animation: fire 10s linear infinite;
}

#Myproject {
 background-color: white;
}

.project {
 position: relative;
 width: 100%;
 margin: 0 auto;
 height: auto;
}

.project-wrap {
 width: 90%;
 margin: 0 auto;
 padding-top: 1rem;
 padding-bottom: 1rem;
 margin-top: 1rem;
 margin-bottom: 1rem;
}

.project-overlay {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 background-color: whitesmoke;
 opacity: 0;
 transition: all 0.5s ease;
}

.project-overlay:hover {
 opacity:1;
 cursor: pointer;
}


.project-image {
 width: 100%; 
}

.next-pic {
 filter: grayscale(100);
}

.next-text {
display: flex;
flex-direction: column;
justify-content: center;
}

.project-title {
 padding-top: 1rem;
 padding-bottom: 1rem;
 width: 100%;
 text-align: center;
} 

.project-exp {
 text-align: center;
 padding: 1.5rem;
}

.project-link {
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translate(-50%, -50%);
 white-space: nowrap;
 color: rgb(50, 50, 50);
 border: 1px solid #0275d8;
 transition: all .5s ease-in-out;
 padding: 0.5rem;
 font-weight: 300;
}

.project-link:hover {
  background-color: #0275d8;
  color: white;
  text-decoration: none;
  opacity: 1;
}

.message {
 padding: 1rem;
}

.mail-container {
 display: flex;
 justify-content: center;
 padding: 1rem;
}

.mail-link {
 color: rgb(50, 50, 50);
 border: 1px solid rgb(50, 50, 50);
 margin: 0 auto;
 padding: 0 0.5rem 0 0.5rem;
 text-decoration: none;
 transition:  .5s ease-in-out;
 font-weight: bolder;
}

.mail-link:hover {
 text-decoration: none;
 background-color: #0275d8;
 border: 1px solid white;
}

.mail-link p:hover {
 color: white;
}

.jump-container {
 display: flex;
 justify-content: center;
 font-size: 2.5rem;
}

.fas:hover {
 filter: brightness(1.5);
 transition: .5s;
}

.fas {
 background: linear-gradient(#23a6d5,#e73c7e);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
 transition: .2s;
}

footer {
 background-color:white;
 color: rgb(50, 50, 50);
}

.footer-container {
 width: 90%;
 margin: 0 auto;
 padding-top: 0.5rem;
}

.icon {
 width: 1rem;
 transition: .5s ease;
}

.icon:hover {
 transform: scale(1.25);
}

.flag {
 height: 1rem;
 width: 1.5rem;
 border: 1px solid lightgray;
 transition: .5s ease;
}

.flag:hover {
 transform: scale(1.25);
 cursor: pointer;
}

.copyright {
 font-size: 0.5rem;
}


/* Keyframes */

@keyframes title-animate {
 0% {
   opacity: 0.2;
   filter: blur(5px);
   left: -70%;
 }
 100% {
   opacity: 1;
   filter: blur(0);
   left: 0;
 }
}

@keyframes gradient {
 0% {
   background-position: 0% 50%;
 }
 50% {
   background-position: 100% 50%;
 }
 100% {
   background-position: 0% 50%;
 }
}

@keyframes fade-in{
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

@keyframes fade-out{
 0% {
   opacity: 1;
 }
 100% {
   opacity: 0;
 }
}

@keyframes fire {
 100% {
   background-position: 0% 100%;
 }
 /* 95% {
   filter: brightness(70);
 }
 90% {
   filter: brightness(50);
 }
 85% {
   filter: brightness(40);
 }
 80% {
   filter: brightness(20);
 }
 70% {
   filter: brightness(2);
 }
 60% {
   filter: brightness(1);
 }
 50% {
   filter: brightness(2);
 }
 40% {
   filter: brightness(1);
 }
 30% {
   filter: brightness(2);
 }
 20% {
   filter: brightness(1);
 }
 10% {
   filter: brightness(2);
 }
 5% {
   filter: brightness(50);
 } */
 0% {
   background-position: 100% 0%;
   /* filter: brightness(100); */
   /* width: 0%; */
 }
}

@media(min-width:768px) {
 h1{
   font-size: 3.5rem;
 }

 h2 {
   font-size:3rem;
   padding: 2rem;
   margin: 0;
 }

 h3 {
 font-size: 2rem;
 }

 h5 {
   margin: 0;
 }

 p {
   margin: 0;
   font-weight: lighter;
 }

 a {
   font-weight: lighter;
 }

 .home-wrap {
 animation: title-animate 2s ease-in-out;
 }
 

 .menu-btn {
   padding-right: 1rem;
   padding-top: 0.5rem;
   justify-content: space-between;
 }

 .menu-btn-burger {
   width: 50px;
   height: 5px;
   margin-bottom: 20px;
   margin-top: 20px;
 }
 
 .menu-btn-burger2,
 .menu-btn-burger3 {
   width: 50px;
   height: 5px;
   margin-bottom: 20px;
 }

 .menu-btn.open .menu-btn-burger {
 transform: translateX(100px);
 }

 .nav {
   font-size: 4.5rem;
 }
 
 .home-wrap {
   padding-left: 1.5rem;
 }

 .profile-container {
   display: flex;
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }

 .profile-wrap {
   width: 50%;
   margin: 0 auto;
   padding-top: 1.5rem;
 }

 .about-me {
   width: 50%;
   margin: 0;
   margin-right: 1.5rem;
   margin-left: 0.5rem;
 }

 .ability {
   width: 50%;
   margin: 0;
   margin-right: 0.5rem;
 }

 .row:first-child  {
   padding-top: 2rem;
 }

 .ability .row {
   margin-bottom: 0.75rem;
 }

 .bar-back {
   background-size: 200%;
   animation: fire 10s linear infinite;
 }

 .project-wrap {
   display: grid;
   grid-template-columns: 1fr 1fr;
   padding-bottom: 5rem;
 }

 .mail-link {
   font-size: 1.25rem;
 }

 .jump-container {
   padding-bottom: 2.5rem;
   font-size: 4rem;
 }

 #footer-wrapper {
   padding-top: 1rem;
 }
}


@media(min-width:1024px) {
 h1{
   font-size: 4.5rem;
   }

 h2 {
   font-size:3rem;
   padding: 2rem;
   margin: 0;
 }

 h3 {
 font-size: 2rem;
 }

 h5 {
   margin: 0;
 }

 p {
   margin: 0;
   font-weight: lighter;
 }

 a {
   font-weight: lighter;
 }

 .home-wrap {
 animation: title-animate 2s ease-in-out;
 }

 .header-back {
   background: black;
 }

 .nav {
   font-size: 5rem;
   background-color: rgba(100, 100, 100, 0.7);
 }

 video {
 width: 80%;
 }

 .menu-btn {
   padding-right: 1rem;
   padding-top: 0.5rem;
   justify-content: space-between;
 }

 .menu-btn-burger {
   width: 40px;
   height: 3px;
   margin-bottom: 20px;
   margin-top: 20px;
 }

 .menu-btn-burger2,
 .menu-btn-burger3 {
   width: 40px;
   height: 3px;
   margin-bottom: 20px;
 }

 .under-line {
 margin-bottom: 2.5rem;
 }

 .home-wrap {
   padding-left: 2.5rem;
 }

 .profile-container {
   display: flex;
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
 }

 .profile-wrap {
   width: 30%;
   margin: 0 auto;
 }

 .about-me {
   width: 50%;
   margin: 0;
   margin-left: 2.5rem;
 }

 .ability {
   width: 50%;
   margin: 0;
   margin-right: 2.5rem;
 }

 .row:first-child  {
   padding-top: 2rem;
 }

 .ability .row {
   margin-bottom: 0.5rem;
 }

 .bar-back {
   background-size: 130%;
   animation: fire 10s linear infinite;
 }

 .project p {
   font-size: 0.75rem;
 }

 .project-wrap {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }

 .mail-link {
   font-size: 1.25rem;
 }

 .jump-container {
   padding-bottom: 3.5rem;
   font-size: 4rem;
 }
}


@media(min-width:1025px) {

 .home-wrap p {
   font-size: 1.5rem;
 }

 video {
   width: 60%;
 }

 .project-title {
  padding-bottom: 1rem;
 } 

 .project p {
   font-size: 1.25rem;
 }

 #About p,
 #Contact p {
   font-size: 1.25rem;
 }


 .icon {
   width: 1.25rem;
   transition: .5s ease;
   padding-bottom:2rem;
 }
}