.st {
   
    text-transform: uppercase;
    font-size: 2.5rem; /* Reduzi o tamanho da fonte */
    font-family: 'ITC Benguiat W01';
    font-weight: 800;
    color: #1c0502;
    letter-spacing: -2px;
    animation: popShadow 5s infinite;
}

@keyframes popShadow {
    0% {
        text-shadow: 0 0 0 black;
    }
    50% {
        text-shadow: -0.05rem -0.05rem 1px #ed2b12,
            0.05rem -0.05rem 1px #ed2b12,
            -0.05rem 0.05rem 1px #ed2b12,
            0.05rem 0.05rem 1px #ed2b12,
            0 0 15px #630100,
            0 0 20px #450100;
    }
    100% {
        text-shadow: 0 0 0 black;
    }
}



.st-bound {
    box-shadow: -0.05rem -0.05rem 2px #ed2b12,
        0.05rem -0.05rem 2px #ed2b12,
        -0.05rem 0.05rem 2px #ed2b12,
        0.05rem 0.05rem 2px #ed2b12;
    height: 5px;
}

.st-bound-full {
    width: 100%;
    margin: auto;
    margin-bottom: -1.2rem;
    max-width: 612px;
    margin-left: 5px;
    margin-bottom: 1px;
}

.st-bound-mini {
    margin-top: 0.5rem;
}

.st-bound-left {
    float: left;
    width: 25px;
    position: relative;
    left: 5px;
}

.st-bound-right {
    float: right;
    width: 25px;
    left: 0.3rem;
    position: relative;
}

.st-bottom {
    clear: both;
    top: -1.75rem;
    position: relative;
    left: 0.5rem;
    letter-spacing: 2px;
    margin-top: 15px;
    
}

.st-things-t {
    font-size: 104%;
    letter-spacing: 2px;
}

.st-things-n {
    letter-spacing: -5px;
}

.st-things-g {
    letter-spacing: -3px;
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box
}
main {
    display:flex;
    flex-direction:column;
    width:100%;
    background-color:bisque;
    min-height:100vh;
    align-items:center;
    justify-content:center
}
body {
    background-image: url(fundo.jpg);
    background-size: cover;
    background-position: center;
    
    height: 100vh;
    font-family: "monocraft", sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: colorShift 15s ease-in-out infinite;
}
.container {
    position:relative;
    padding:2rem;
    border-radius:12px;
    box-shadow:0 8px 16px rgba(0,0,0,.3);
    text-align:center;
    width:100%;
    max-width:400px;
    z-index:1
}
.container::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url(gggg.avif);
    background-size:cover;
    background-position:center;
    opacity:50%;
    border-radius:12px;
    z-index:-1;
    background-repeat:no-repeat
}
.logo {
    width:100%;
    max-width:400px;
    margin-bottom:1rem
}
.The {
    margin-bottom:1rem;
    font-size:2rem;
    color:#fff;
    text-shadow:0 0 10px rgb(255,0,0),0 0 20px rgb(255,0,0),0 0 40px rgb(255,0,0),0 0 80px rgb(255,0,0)
}
h1 {
    font-family:"monocraft",sans-serif;
    margin-bottom:1rem;
    font-size:2rem;
    color:#fff;
    text-shadow:0 0 10px rgb(255,0,0),0 0 20px rgb(255,0,0),0 0 40px rgb(255,0,0),0 0 80px rgb(255,0,0)
}
h2 {
    font-family:"monocraft",sans-serif;
    margin-bottom:1rem;
    font-size:2rem;
    color:#fff
}
.input-container {
    display:flex;
    margin-bottom:1rem
}
input {
    flex:1;
    padding:.5rem;
    border-radius:5px;
    border:2px solid #FFA36F;
    outline:none;
    font-size:1rem
}
button {
    font-family:"monocraft",sans-serif;
    background-color:#d40000;
    color:#fff;
    border:none;
    padding:.5rem 1rem;
    border-radius:5px;
    margin-left:.5rem;
    cursor:pointer;
    font-size:1rem;
    transition:background-color 0.3s ease,transform 0.1s ease;
    &:hover {
        background-color:#d40000
    }
    &:active {
        background-color:#7b0303;
        transform:scale(.95);
        box-shadow:inset 0 4px 6px rgba(0,0,0,.3)
    }
}
ul {
    list-style:none;
    margin-bottom:1rem;
    max-height:100px;
    overflow-y:auto
}
li {
    background-image:url(tooo.png);
    background-size:cover;
    background-position:center;
    color:#fff;
    padding:.5rem;
    border-radius:5px;
    margin-bottom:1rem;
    animation:fadeIn 0.5s ease-out
}
.hidden {
    display:none
}
@keyframes fadeIn {
    from {
        opacity:0;
        transform:translateY(-10px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@media screen and (max-width:768px) {
    .container {
        padding:1rem
    }
    h1 {
        font-size:1.5rem
    }
    button {
        font-size:.9rem
    }
}