style.css

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    scroll-behavior: smooth;
    box-sizing: border-box;
    
}
.navbar{
    background-color: #151515;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 10px 15px 10px 15px;
}
.navdiv{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navdiv button{
  animation: round 1s infinite;
  border: solid #151515 5px;
}
@keyframes round{
  0%{
    border-top: solid 5px #0e2549;
  }
  25%{
    border-right: solid 5px #0a5921;
  }
  50%{
    border-bottom: solid 5px #951b99;
  }
  75%{
    border-left: solid 5px #0a5921;
  }
  100%{
    border-top: solid 5px #0e2549;
  }
}
.logo a{
    font-size: 35px;
    color: white;
}
li{
    list-style: none;
    display: inline-block;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
li a{
    margin-right: 20px;
    font-size: 18px;
}
li a:hover{
    color: #94dec3;
}

.head1{
    background-image: url("https://img.freepik.com/free-photo/beige-abstract-wallpaper-background-image_53876-102527.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.head1 h1{
    text-align: center;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

.head1 p{
    transform: translateY(200px);
    font-size: 25px;
    font-weight: 500;
    color: darkblue;
    text-align: start;
    padding-left: 20px;
}
.head1 > .video1{
    text-align: end;
    padding-right: 100px;
}
video{
    max-width: 800px;
    max-height: 430px;
    border-radius: 15px;
    border: 1px solid black;
}

button{
    border: 2px solid black;
    border-radius: 20px;
    padding: 10px;
    background-color: #fed1e6;
    cursor: pointer;
}
button:hover{
    background-color: #94dec3;
}

button a{
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 1px;
    word-spacing: 1px;
}
.head1{
    height: 80vh;
}
.game-info{
    margin: 0;
    padding: 0;
    
}
.game-info > .image1{
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100vh;
    background-color: #151515;
    padding-left: 20px;
}

.game-info > .content1{
    margin-left: 0;
}
.content1 h1{
    color: #5c9fe1;
    text-align: end;
    align-items: center;
    padding-right: 20px;
    transform: translateY(-150px);
}
.content1 p{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-align: start;
    padding-left: 20px;
    justify-content: space-evenly;
    word-spacing: 2px;
    letter-spacing: 1px;
    color: #5c9fe1
}
.content1 h1:hover{
    color: #94dec3;
    cursor: default;
}
.card {
    position: relative;
    width: 220px;
    height: 320px;
    background: #94dec3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
  }
  
  .card::before,
  .card::after {
    position: absolute;
    content: "";
    width: 20%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    background-color: #5c9fe1;
    transition: all 0.5s;
  }
  
  
  .card::before {
    top: 0;
    right: 0;
    border-radius: 0 15px 0 100%;
  }
  
  .card::after {
    bottom: 0;
    left: 0;
    border-radius: 0 100%  0 15px;
  }
  
  .card:hover::before,
  .card:hover:after {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    transition: all 0.2s;
  }
  
  .card:hover:after {
    content: "The Tetris effect isn't just a myth—astronauts on the International Space Station have been known to play Tetris to help their brains adapt to space.";
  }
  .card:nth-child(2):hover:after {
    content: "In space, there is microgravity, which means astronauts and objects float around. Imagine playing Squard-line in zero gravity!";
  }
  .card:nth-child(3):hover:after {
    content: "Did you know the universe is about 13.8 billion years old? Just like the ever-expanding universe, your skills in Squard-line can grow infinitely as you master each level";
  }
  .card:nth-child(4):hover:after {
    content: "Just like in the game where you manage falling blocks, NASA tracks over 27,000 pieces of orbital debris to avoid collisions with satellites and space stations. Precision is key in both!";
  }
  .card:nth-child(5):hover:after {
    content: "The beautiful colors of nebulas and galaxies are due to various gases and elements emitting light. In Squard-line, enjoy vibrant, space-inspired visuals as you align your blocks.";
  }

  
  .cards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }
.modes{
    background-color: beige;
    height: 90vh;
}
.modes h2{
    text-align: center;
    padding: 30px 0 60px 0;
}
.leaderboard{
    height: 90vh;
    background-color: #151515;
}
.leaderboard h2{
    text-align: center;
    padding: 20px;
    margin: 0px 5px;
    border: 2px dashed #94dec3;
    border-radius: 5px;
}

.leaderboard > .image2{
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 5px 20px;
}
.leaderboard p{
    font-size: 20px;
    text-align: start;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    justify-content: space-evenly;
    word-spacing: 1px;
    letter-spacing: 1px;
    line-height: 50px;
}
.leaderboard a{
    line-height: 250px;
    color: black;
    cursor: default;
}
.leaderboard a:hover{
    color: #94dec3;
}
.social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
}
footer{
    background-color: black;
    height: 30vh;
}
footer li{
    color: whitesmoke;
    font-size: 25px;
    padding-top: 10px;
}
footer h2{
    text-align: center;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 5px;
    padding-top: 30px;
}
footer h3{
    text-align: center;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 5px;
    padding-top: 50px;
}
footer a:hover{
    color: #94dec3;
}
.line{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: black;
    button {
        position: relative;
        padding: 12px 35px;
        background: #fec195;
        font-size: 17px;
        font-weight: 500;
        color: #181818;
        border: 3px solid #fec195;
        border-radius: 8px;
        box-shadow: 0 0 0 #fec1958c;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
      }
      
      .star-1 {
        position: absolute;
        top: 20%;
        left: 20%;
        width: 25px;
        height: auto;
        filter: drop-shadow(0 0 0 #fffdef);
        z-index: -5;
        transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
      }
      
      .star-2 {
        position: absolute;
        top: 45%;
        left: 45%;
        width: 15px;
        height: auto;
        filter: drop-shadow(0 0 0 #fffdef);
        z-index: -5;
        transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
      }
      
      .star-3 {
        position: absolute;
        top: 40%;
        left: 40%;
        width: 5px;
        height: auto;
        filter: drop-shadow(0 0 0 #fffdef);
        z-index: -5;
        transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
      }
      
      .star-4 {
        position: absolute;
        top: 20%;
        left: 40%;
        width: 8px;
        height: auto;
        filter: drop-shadow(0 0 0 #fffdef);
        z-index: -5;
        transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
      }
      
      .star-5 {
        position: absolute;
        top: 25%;
        left: 45%;
        width: 15px;
        height: auto;
        filter: drop-shadow(0 0 0 #fffdef);
        z-index: -5;
        transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
      }
      
      .star-6 {
        position: absolute;
        top: 5%;
        left: 50%;
        width: 5px;
        height: auto;
        filter: drop-shadow(0 0 0 #fffdef);
        z-index: -5;
        transition: all 0.8s ease;
      }
      
      button:hover {
        background: transparent;
        color: #fec195;
        box-shadow: 0 0 25px #fec1958c;
      }
      
      button:hover .star-1 {
        position: absolute;
        top: -80%;
        left: -30%;
        width: 25px;
        height: auto;
        filter: drop-shadow(0 0 10px #fffdef);
        z-index: 2;
      }
      
      button:hover .star-2 {
        position: absolute;
        top: -25%;
        left: 10%;
        width: 15px;
        height: auto;
        filter: drop-shadow(0 0 10px #fffdef);
        z-index: 2;
      }
      
      button:hover .star-3 {
        position: absolute;
        top: 55%;
        left: 25%;
        width: 5px;
        height: auto;
        filter: drop-shadow(0 0 10px #fffdef);
        z-index: 2;
      }
      
      button:hover .star-4 {
        position: absolute;
        top: 30%;
        left: 80%;
        width: 8px;
        height: auto;
        filter: drop-shadow(0 0 10px #fffdef);
        z-index: 2;
      }
      
      button:hover .star-5 {
        position: absolute;
        top: 25%;
        left: 115%;
        width: 15px;
        height: auto;
        filter: drop-shadow(0 0 10px #fffdef);
        z-index: 2;
      }
      
      button:hover .star-6 {
        position: absolute;
        top: 5%;
        left: 60%;
        width: 5px;
        height: auto;
        filter: drop-shadow(0 0 10px #fffdef);
        z-index: 2;
      }
      
      .fil0 {
        fill: #fffdef;
      }
      
}

@media screen and (max-width: 1050px) and (min-width:768px){
  .modes{
    display: none;
  }
  .video1{
    display: none;
  }
  .leaderboard a{
    font-size: x-large;
  }
  .content{
    display: none;
  }
}
@media screen and (max-width: 370px) and (min-width:0px){
  body{
    margin: 0;
    padding: 0;
  }
  .content{
    display: none;
  }
  .logo > a{
    font-size:30px
  }   
  .navdiv > ul> li{
    display: none;
  }
  .video1{
    visibility: hidden;
    display: none;
  }
  .game-info{
    height: 80vh;
  }
  .game-info img{
    display: none;
    margin: 0 auto;
    clear: both;
  }
  .content1{
    position: absolute; /* Set position absolute */
    top: 90rem; /* Position below the image */
    left: 0; /* Align with the left side of the container */
    width: 100%; /* Take full width of the container */
  }
  .content1 > h1{
    transform: translateY(-550px);
    text-align: center;
    font-size: 20px;
  }
  .content1 > p{
    transform: translateY(-300px);
    font-size: 18px;
    text-align: center; /* Center the content */
    padding: 0 10px;
    font-style: italic;
  }
  .modes{
    display: none;
  }
  .leaderboard a{
    display: none;
  }
  #footer{
    font-size: 10px;
    padding: 0 2px;
  }
  #footer a{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .leaderboard p{
    transform: translateY(50px);
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) and (min-width:370px) {
  body{
    margin: 0;
    padding: 0;
  }
  .content{
    display: none;
  }
  .logo > a{
    font-size:30px
  }   
  .navdiv > ul> li{
    display: none;
  }
  .video1{
    visibility: hidden;
    display: none;
  }
  .game-info{
    height: 80vh;
  }
  .game-info img{
    display: none;
    margin: 0 auto;
    clear: both;
  }
  .content1{
    position: absolute;
    top: 90rem;
    left: 0;
    width: 100%;
  }
  .content1 > h1{
    transform: translateY(-550px);
    text-align: center;
    font-size: 20px;
  }
  .content1 > p{
    transform: translateY(-300px);
    font-size: 18px;
    text-align: center; /* Center the content */
    padding: 0 10px;
    font-style: italic;
  }
  .modes{
    display: none;
  }
  .leaderboard p{
    /* transform: translateY(50px); */
    font-size: 22px;
  }
  .leaderboard a{
    display: none;
  }
  #footer{
    font-size: 10px;
    padding: 0 2px;
  }
  #footer a{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
section{
  display: flex;
	align-items: center;
	justify-content: center;
  transform: translateY(-120px);
}

.content h2 {
	color: #fff;
	font-size: 5em;
	position: absolute;
	transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
	color: transparent;
	-webkit-text-stroke: 2px #8338ec;
}

.content h2:nth-child(2) {
	color: #94dec3;
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}
@media screen and (min-width:1441px) and (max-width:2570px) {
  .leaderboard a{
    display: none;
  }
  .leaderboard p{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
  }
}