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

.container {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    font-weight: bold;
    display: flex;
    margin: auto;
    width: 240px; 
    aspect-ratio: 16/9;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5em;
}

.input-container {
    filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);
    animation: blinkShadowsFilter 8s ease-in infinite;
    position: relative;
    width: 100%;
}

.input-content {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    padding-inline: 1em;
    position: relative;
}

.input-content::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(40px);
    clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);
    background: rgba(122, 251, 255, 0.55);
    transition: all 1s ease-in-out;
}

.input-content::after {
    content: "";
    position: absolute;
    width: 98%;
    height: 98%;
    box-shadow: inset 0px 0px 20px 20px #212121;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0%,
        rgba(64, 144, 181, 0.6) 1px,
        rgb(0, 0, 0) 3px,
        hsl(295, 60%, 12%) 5px,
        #153544 4px,
        transparent 0.5%
    ),
    repeating-linear-gradient(
        to left,
        hsl(295, 60%, 12%) 100%,
        hsla(295, 60%, 12%, 0.99) 100%
    );
    clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);
    animation: backglitch 50ms linear infinite;
}

.input-dist {
    z-index: 80;
    display: grid;
    align-items: center;
    text-align: center;
    width: 100%;
    padding-inline: 1em;
    padding-block: 1.2em;
    grid-template-columns: 1fr;
}

.input-type {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
}

.input-is {
    color: #fff;
    font-size: 0.9rem;
    background-color: transparent;
    width: 100%;
    box-sizing: border-box;
    padding: 0.7em 0.5em;
    border: none;
    border-bottom: 1px solid hsl(221, 26%, 43%);
    transition: all 1s ease-in-out;
    position: relative;
    z-index: 100;
}

.input-is:hover, .input-is:focus {
    outline: none;
    background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);
    border-bottom: 1px solid hsl(192, 100%, 100%);
}

.input-is::placeholder {
    color: hsla(192, 100%, 88%, 0.806);
}

.submit-button {
    width: 50%;
    border: none;
    color: hsla(192, 100%, 88%, 0.806);
    background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);
    clip-path: polygon(0 0, 85% 0%, 100% 0, 100% 15%, 100% 90%, 91% 100%, 0 100%);
    padding: 0.5em;
    animation: blinkShadowsFilter 0.5s ease-in infinite;
    transition: all 500ms;
    z-index: 10;
    cursor: pointer;
}

.submit-button:hover {
    color: hsl(0, 0%, 100%);
    font-weight: bold;
}

#error-msg {
    color: #ff4d4d;
    font-size: 0.8rem;
    font-family: sans-serif;
    font-style: normal;
    min-height: 1.2em;
    text-align: center;
}

@keyframes backglitch {
    0%, 100% { box-shadow: inset 0px 20px 20px 30px #212121; }
    50% { box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%); }
}

@keyframes blinkShadowsFilter {
    0%, 100% { filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.34)) drop-shadow(-55px -40px 28px #9e30a9); }
    25% { filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.9)) drop-shadow(-55px 40px 24px #9e30a9); }
    50% { filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.9)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.3)); }
    75% { filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.9)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.3)); }
}