body {
    font-family: Arial, sans-serif;
    text-align: center;
}

.product {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px;
    display: inline-block;
}

button {
    background: #28a745;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background: linear-gradient(120deg, #55c2f8, #0b91d4);
    animation: fadeIn 1s ease-in-out;
}

header {
    background: #ff6e6100;
    padding: 20px;
    color: white;
    font-size: 24px;
    font-weight: bold;
    animation: slideDown 1s ease-in-out;
    z-index: 1;
}

.product {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px;
    display: inline-block;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    opacity: 0;
    transform: scale(0.9);
    animation: fadeInScale 0.5s ease-in-out forwards;
}

button {
    background: #28a745;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    border-radius: 5px;
    font-size: 16px;
}

button:hover {
    background: #218838;
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}

/* ✨ Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* Placeholder Animation */
input::placeholder {
    color: #888;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* When input is focused, change placeholder color and move it up */
input:focus::placeholder {
    color: #16a085;
    transform: translateY(-5px);
    font-size: 14px;
}

/* Input Field Styling */
input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #16a085;
    border-radius: 5px;
    transition: border 0.3s ease-in-out;
}

/* Input Focus Effect */
input:focus {
    border-color: #4ca1af;
    outline: none;
    box-shadow: 0px 0px 8px rgba(76, 161, 175, 0.8);
}
.product {
    display: inline-block;
    width: 400px;
    height: 400px;
    margin: 15px;
    padding: 10px;
    text-align: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.product img {
    width: 100%;
    border-radius: 5px;
}

.product:hover {
    transform: scale(1.05);
}
.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    justify-content: center;
}

.product {
    background: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.product img {
    width: 100%;
    border-radius: 5px;
}

.product:hover {
    transform: scale(1.05);
}
@keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #0b91d4;
    overflow: hidden;
}
.background li {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px #0b91d4;
    color: transparent;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 19s ease-in forwards infinite;
}
undefined
.background li:nth-child(0) {
    animation-delay: 0s;
    left: 24vw;
    top: 13vh;
}

.background li:nth-child(1) {
    animation-delay: 2s;
    left: 5vw;
    top: 27vh;
    border-color: #0b91d4;
}

.background li:nth-child(2) {
    animation-delay: 4s;
    left: 32vw;
    top: 49vh;
    border-color:#0b91d4;
}

.background li:nth-child(3) {
    animation-delay: 6s;
    left: 49vw;
    top: 80vh;
    border-color: #0b91d4;
}

.background li:nth-child(4) {
    animation-delay: 8s;
    left: 38vw;
    top: 2vh;
}

.background li:nth-child(5) {
    animation-delay: 10s;
    left: 69vw;
    top: 12vh;
    border-color: #0b91d4;
}

.background li:nth-child(6) {
    animation-delay: 12s;
    left: 99vw;
    top: 50vh;
}

.background li:nth-child(7) {
    animation-delay: 14s;
    left: 82vw;
    top: 71vh;
}

.background li:nth-child(8) {
    animation-delay: 16s;
    left: 74vw;
    top: 34vh;
}

.background li:nth-child(9) {
    animation-delay: 18s;
    left: 0vw;
    top: 56vh;
    border-color: #0b91d4;
}

.background li:nth-child(10) {
    animation-delay: 20s;
    left: 76vw;
    top: 89vh;
}

.background li:nth-child(11) {
    animation-delay: 22s;
    left: 79vw;
    top: 7vh;
    border-color: #0b91d4;
}

.background li:nth-child(12) {
    animation-delay: 24s;
    left: 88vw;
    top: 98vh;
    border-color: #0b91d4;
}

.background li:nth-child(13) {
    animation-delay: 26s;
    left: 50vw;
    top: 24vh;
    border-color: #0b91d4;
}

.background li:nth-child(14) {
    animation-delay: 28s;
    left: 54vw;
    top: 95vh;
}

.background li:nth-child(15) {
    animation-delay: 30s;
    left: 94vw;
    top: 79vh;
}

.background li:nth-child(16) {
    animation-delay: 32s;
    left: 45vw;
    top: 9vh;
    border-color: #0b91d4;
}

.background li:nth-child(17) {
    animation-delay: 34s;
    left: 57vw;
    top: 82vh;
    border-color: #0b91d4;
}

.background li:nth-child(18) {
    animation-delay: 36s;
    left: 80vw;
    top: 40vh;
}

.background li:nth-child(19) {
    animation-delay: 38s;
    left: 95vw;
    top: 76vh;
    border-color: #0b91d4;
}

.background li:nth-child(20) {
    animation-delay: 40s;
    left: 20vw;
    top: 63vh;
    border-color: #0b91d4;
}

.background li:nth-child(21) {
    animation-delay: 42s;
    left: 90vw;
    top: 67vh;
    border-color: #0b91d4;
}

.background li:nth-child(22) {
    animation-delay: 44s;
    left: 40vw;
    top: 39vh;
}

.background li:nth-child(23) {
    animation-delay: 46s;
    left: 17vw;
    top: 74vh;
}

.background li:nth-child(24) {
    animation-delay: 48s;
    left: 56vw;
    top: 45vh;
}

.background li:nth-child(25) {
    animation-delay: 50s;
    left: 17vw;
    top: 19vh;
    border-color: #0b91d4;
}

.background li:nth-child(26) {
    animation-delay: 52s;
    left: 33vw;
    top: 20vh;
}

.background li:nth-child(27) {
    animation-delay: 54s;
    left: 3vw;
    top: 53vh;
    border-color: #0b91d4;
}

.background li:nth-child(28) {
    animation-delay: 56s;
    left: 87vw;
    top: 86vh;
}

.background li:nth-child(29) {
    animation-delay: 58s;
    left: 35vw;
    top: 36vh;
}

.background li:nth-child(30) {
    animation-delay: 60s;
    left: 70vw;
    top: 2vh;
}

.background li:nth-child(31) {
    animation-delay: 62s;
    left: 61vw;
    top: 28vh;
    border-color: #0b91d4;
}

.background li:nth-child(32) {
    animation-delay: 64s;
    left: 63vw;
    top: 65vh;
    border-color: #0b91d4;
}

.background li:nth-child(33) {
    animation-delay: 66s;
    left: 29vw;
    top: 62vh;
    border-color: #0b91d4;
}

.background li:nth-child(34) {
    animation-delay: 68s;
    left: 25vw;
    top: 58vh;
}

.background li:nth-child(35) {
    animation-delay: 70s;
    left: 9vw;
    top: 90vh;
    border-color: #0b91d4;
}

.background li:nth-child(36) {
    animation-delay: 72s;
    left: 67vw;
    top: 16vh;
    border-color: #0b91d4;
}

.background li:nth-child(37) {
    animation-delay: 74s;
    left: 10vw;
    top: 30vh;
    border-color: #0b91d4;
}

.background li:nth-child(38) {
    animation-delay: 76s;
    left: 44vw;
    top: 44vh;
}

.background li:nth-child(39) {
    animation-delay: 78s;
    left: 14vw;
    top: 94vh;
}
.background{
    z-index: -1;
}
#admin-link {
    position: relative;
    transition: color 0.3s ease;
}

#admin-link:hover {
    color: #e74c3c !important;
}

#admin-link::after {
    content: "Admin";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#admin-link:hover::after {
    opacity: 1;
}
html {
  height:100%;
}

body {
  margin:0;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, rgb(72, 73, 75) 50%, rgb(29, 30, 30) 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}
.imgt{
   height: 310px;
   
}