/* style.css */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:#ffffff;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.container{
  width:100%;
  max-width:1200px;
  padding:40px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.logo-box{
  margin-bottom:30px;
  animation:float 4s ease-in-out infinite;
}

.logo-box img{
  width:220px;
  max-width:90%;
  user-select:none;
  pointer-events:none;
}

.content h1{
  font-size:58px;
  color:#1ea7ff;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:14px;
}

.content p{
  color:#6b7280;
  font-size:18px;
  max-width:600px;
  line-height:1.7;
  margin:auto;
  margin-bottom:35px;
}

.buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn{
  padding:14px 30px;
  border-radius:14px;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  transition:.3s ease;
}

.primary {
  display: inline-block;
  padding: 10px 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #45a5ff;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #000;
  transition: all 0.3s ease;
  cursor: pointer;
}

.primary:hover {
  background-color: #fff;
  color: #45a5ff;
  border: 2px solid #45a5ff;
  box-shadow: 5px 5px 0px #45a5ff;
}

.primary:active {
  background-color: #45a5ff;
  box-shadow: none;
  transform: translateY(4px);
}


@keyframes float{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-8px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Responsive */

@media(max-width:768px){

  .content h1{
    font-size:42px;
  }

  .content p{
    font-size:16px;
  }

  .btn{
    width:100%;
    max-width:260px;
  }

}