/*font*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.noto-sans jp-<uniquifier> {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
  
.pacifico-regular {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
  }
  
  
.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
body{
  font-family:"Poppins";
   background-color:#c0d2dd;
   text-align:center; 
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  	display: absolute; 
  top:50%;  color:#0d3450;
} 
 
 
/*font*/
h1{  
  animation-name: h1;
  animation-duration: 7.17s; 
  animation-iteration-count: infinite;
}
img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}

/*title*/
 

.hover-underline {
  font-size: 2.4rem;
  color: #253a5a;
  position: relative;
  display: inline-block;
}

.hover-underline::after,
.hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #3c46b0, #6ac1ff);
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

.hover-underline::before {
  top: -5px;
  transform-origin: left;
}

.hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(1);
}


/*title*/
  
/*ul*/

ul {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:flex;
  margin:0;
  padding:0;
}

ul li {
  list-style:none;
  margin:0 5px;
  color:#b9d4f1;
}

ul li a .fa {
  font-size: 40px;
  color: #262626;
  line-height:80px;
  transition: .5s;
  padding-right: 14px;
}

ul li a span {
  padding:0;
  margin:0;
  position:absolute;
  top: 30px;
  color: #262626;
  letter-spacing: 4px;
  transition: .5s;
}

ul li a {
  text-decoration: none;
  display:absolute;
  display:block;
  width:210px;
  height:80px;
  background: #fff;
  text-align:left;
  padding-left: 20px;
  transform: rotate(-30deg) skew(25deg) translate(0,0);
  transition:.5s;
  box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}
ul li a:before {
  content: '';
  position: absolute;
  top:10px;
  left:-20px;
  height:100%;
  width:20px;
  background: #b1b1b1;
  transform: .5s;
  transform: rotate(0deg) skewY(-45deg);
}
ul li a:after {
  content: '';
  position: absolute;
  bottom:-20px;
  left:-10px;
  height:20px;
  width:100%;
  background: #b1b1b1;
  transform: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
  box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

ul li:hover .fa {
  color:#fff;
}

ul li:hover span {
  color:#fff;
}

ul li:hover:nth-child(1) a{
  background: #3b5998;
}
ul li:hover:nth-child(1) a:before{
  background: #365492;
}
ul li:hover:nth-child(1) a:after{
  background: #4a69ad;
}

ul li:hover:nth-child(2) a{
  background: #00aced;
}
ul li:hover:nth-child(2) a:before{
  background: #097aa5;
}
ul li:hover:nth-child(2) a:after{
  background: #53b9e0;
}

ul li:hover:nth-child(3) a{
  background: #dd4b39;
}
ul li:hover:nth-child(3) a:before{
  background: #b33a2b;
}
ul li:hover:nth-child(3) a:after{
  background: #e66a5a;
}

ul li:hover:nth-child(4) a{
  background: #e4405f;
}
ul li:hover:nth-child(4) a:before{
  background: #d81c3f;
}
ul li:hover:nth-child(4) a:after{
  background: #e46880;
}

/*ul*/
/*marquee*/
marquee{
width:80%;
  text-align: center;
}
/*marquee*/


/*main*/

main {
      padding: 20px;
      display: block;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      min-width: 100vh;
    }
    h2 {
      text-align: center;
      color: #132044;
    }

    .comment-container{
display: flex; align-items: center; justify-content: center;
    }
    /*comment*/
    .comment-section {
      max-height: 45vh; 
      max-width: 60%;
      
      overflow-y: scroll;
    }
    .comment-section2 {
      max-height: 45vh; 
      max-width: 150%;
      
      overflow-y: scroll;
    }
    .comment {
     height: 10%;
      padding: 2%;
      margin: 2%;
      background-color: #ffff;
      color: rgb(0, 0, 0);
     }

  /*comment*/

/*main*/ 
@keyframes   h1 {
  0%   {color: #0d3450;}
  20%  {color: #279ef3;}
  40%  {color: #143a61;}
  60% {color: #338ef6;}
  80% {color: #2386ef;}
  100%   {color: #0d3450;}
}

/*3d lift*/

.card1 {
  text-align:center;
  position: absolute;
  left: 100px;
  width: 250px;
  height: 350px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: linear-gradient(rgb(225,150,58),rgb(227,144,91));
  transition:.6s;
  
  transform: rotatex(75deg) translatey(-200px) translatez(-100px);
  box-shadow: 0px 20px 60px rgba(0,0,0, 0.5);
}
.card1:hover{
  transform: rotatex(0deg);
  transform: rotatez(0deg);
  transition:.6s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card1 img{
  transform: translateY(15px);
  width:200px;
  height:120px;
}
h3{
  font-size:25px;
  font-family: 'Abel', sans-serif;
  color:rgb(255,255,255);
  text-shadow: 0 0 2px rgb(255,255,255);
  transform: translatey(10px);
}

p{
  
  font-family: 'Abel', sans-serif;
  color: white;
  text-align:center;
  width:220px;
  transform: translatex(12px);
}


.card2 {
  text-align:center;
  position: absolute;
  left: 550px;
  width: 250px;
  height: 350px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: linear-gradient(rgb(93,94,170),rgb(93,66,103));
  animation: animate 1s linear infinite;
  transition:.6s;
  
  transform: rotatex(75deg) translatey(-200px) translatez(-100px);
  box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5);
}
.card2:hover{
   transform: rotatex(0deg);
  transition:.6s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card2 img{
  transform: translateY(15px);
  width:180px;
  height:150px;
}
.card3 {
  text-align:center;
  position: absolute;
  left: 1000px;
  width: 250px;
  height: 350px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: linear-gradient(#ff5252, #b33939);
  transition:.6s;
  
  transform: rotatex(75deg) translatey(-200px) translatez(-100px);
  box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5);
}
.card3:hover{
   transform: rotatex(0deg);
  transition:.6s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card3 img{
  transform: translateY(15px);
  width:200px;
  height:120px;
}
/*3d lift*/
/*holo*/
.holographic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}

.holographic-card {
  width: 300px;
  height: 200px;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.5s ease;
}

.holographic-card h2 {
  color: #0ff;
  font-size: 2rem;
  position: relative;
  z-index: 2;
}

.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(0,255,255,0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}

.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

/*holo*/


/*link*/
a:link {
color: rgb(60, 113, 153);
background-color: transparent;
text-decoration: none;
}

a:visited {
color: rgb(36, 87, 105);
background-color: transparent;
text-decoration: none;
}

a:hover {
color: rgb(231, 213, 16);
background-color: transparent;
text-decoration: underline;
}

a:active {
color: rgb(255, 251, 149);
background-color: transparent;
text-decoration: underline;
}/*

/*link*/
/*double sided card*/
.card {
  width: 200px;
  height: 250px;
  margin: 1rem auto;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.card-front {
  background: white;
  border: 1px solid #c7d2e8;
}

.card-back {
  background: #9dbee7;
  color: black;
  transform: rotateY(180deg);
}
/*double sided card*/ 


.container {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}
 
  
/*image*/ 

 

img {
  height: 300px;
  width: 450px;
  object-fit: cover;
  object-position: top;
  
  transition: all 1434ms ease-in-out;
}   
/*image*/


/*cube hover*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
 

@keyframes animate {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

.container {
	position: relative;
	top: -160px;
	transform: skewY(-20deg);
	animation: animate 5s linear infinite;
	.cube { 
		position: relative;
		z-index: 2;
		&:nth-child(2) {
			z-index: 1;
			translate: -120px -120px;
		}
		&:nth-child(3) {
			z-index: 3;
			translate: 120px 120px;
		}
		div {
			position: absolute;
			display: flex;
			flex-direction: column;
			gap: 60px;
			translate: calc(-140px * var(--x)) calc(-120px * var(--y));
			span {
				position: relative;
				display: inline-block;
				width: 100px;
				height: 100px;
				background: #dcdcdc;
				z-index: calc(1 * var(--i));
				transition: 1.5s;
				&:hover {
					transition: 0s;
					background: #ef4149;
					filter: drop-shadow(0 0 60px #ef4149);
					&:before, 
					&:after {
						transition: 0s;
						background: #ef4149;
					}
				}
				&:before {
					content: "";
					position: absolute;
					left: -80px;
					width: 80px;
					height: 100%;
					background: #fff;
					transform-origin: right;
					transform: skewY(45deg);
					transition: 1.5s;
				}
				&:after {
					content: "";
					position: absolute;
					top: -80px;
					left: 0px;
					width: 100%;
					height: 80px;
					background: #f2f2f2;
					transform-origin: bottom;
					transform: skewX(45deg);
					transition: 1.5s;
				}
			}
		}
	}
}

/*cube hover*/