*{
    font-family: poppins;
    margin: 0;
}

nav{
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.36) 0px 5px 15px;
    background-color: rgba(0, 0, 0, 0.748);
     color: #fff; /* White core makes it look bright */
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #00f3ff,
    0 0 20px #00f3ff,
    0 0 40px #00f3ff;
    position: sticky;
    top: -1px;
    z-index: 10;
    backdrop-filter: blur(6px);
}
body{
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQM1U0RqLRw5-tzaUjDZ-Dflvi5qGtxBr0UXe-L3GDYnILC9Fmyj3uwFDtn&s=10');
    background-size: cover;
}

.poster{
    max-width: 300px;
    border-radius: 15px;
}

.website-showcase{
    background-color: rgba(0, 0, 0, 0.492);
    margin: 10px;
    border-radius: 10px;
    border: brown 0.5px solid;
    backdrop-filter: blur(6px);
    padding: 10px;
    color: whitesmoke;
}

.website {
    background: linear-gradient(to bottom, #121212 50%, #ff007f 100%);
    background-size: 100% 200%; /* Makes background twice as tall */
    background-position: top;   /* Starts on the dark color */
    width: fit-content;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    border-radius: 15px;
    color: #00ff66;
    transition:  0.6s ease; /* Transitions the position smoothly */
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.website:hover {
    background-position: bottom; /* Slides the pink gradient upward */
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.6); /* Optional: adds a matching pink glow */
    transform: translateY(-15px);
    color: white;
}

button{
    background-color: #0b0c10;
    color: #ff007f;
    border: white , 2px , solid;
    font-size: larger;
    width: 90%;
    border-radius: 99px;
    background: linear-gradient(to bottom, #0b0c10 50%, #cc00ff 100%);
    background-size: 100% 200%;
    background-position: top;
    transition: 0.6s ease;
    cursor: pointer;
}

button:hover{
    background-position: bottom;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.6); 
    border: none;
    color: white;
}

.Title{
    margin: 10px;
    
    background-color: #0b0c10;
    border-radius: 10px;
    color: white;
   text-shadow:
    0 0 5px #fff,
    0 0 10px #ff007f,
    0 0 20px #ff007f,
    0 0 40px #ff007f;
}

form{
    width: 90%;
    background-color: rgba(0, 0, 0, 0.503);
    backdrop-filter: blur(6px);
    margin: 10px;
    border-radius: 10px;
    padding: 10px;
    color: white;
    text-shadow:
     0 0 5px #fff,
     0 0 10px #00f3ff,
     0 0 20px #00f3ff,
    0 0 40px #00f3ff
    ;
}

input{
    width: 90%;
    margin: 20px;
    font-size: larger;
    padding: 10px;
    border-radius: 99px;
    border: rgba(0, 0, 0, 0.753) 3px solid;
    transition: 0.6s ease;
    
}
input:focus{
    box-shadow:
    0 0 5px #fff,
    0 0 10px #00f3ff,
    0 0 20px #00f3ff,
    0 0 40px #00f3ff;
}

*::selection{
    background-color: #00ff66;
}

@media(max-width: 738px){
    .website-showcase{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}