style.css

/* make the site stunningly beautiful, complete design of framer website; dark, blue-purple grad etc */
body{
        background: rgb(7,0,15);
        background: linear-gradient(59deg, rgba(7,0,15,1) 0%, rgba(0,0,0,1) 32%, rgba(0,0,0,1) 76%, rgba(18,0,13,1) 100%);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        font-family: "Mont";
        color: white;
        display: grid;
        place-items: center;

}
h1{
        margin-top: 20px;
        font-size: 80px;
}
#sudo{
        /* background-color: white; */
        display: grid;        
        grid-template-columns: repeat(9, 50px);
        width: max-content;
        height: max-content;
        gap: 6px;
        margin-bottom: 50px;
}
#sudo > div{
        display: block;
        width: 50px;
        height: 50px;
        border: solid rgb(41, 41, 41) 1px;
        overflow: hidden;
        /* background-color: rgb(170, 48, 48); */
        /* border-radius: 0px; */

        &:focus-within{

                border-color: crimson;
                /* border-image: linear-gradient(141deg, rgba(87,1,38,1) 0%, rgba(0,53,115,1) 100%); */
        }
        /* &:hover{
        } */
}
#sudo input{
        width: 100%;
        height: 100%;
        object-fit: fill;
        background-color: rgb(10, 10, 10);
        color: white;
        font-size: x-large;
        text-align: center;
        border: none;
        caret-color: transparent;

}
input[type=submit]{
        background: rgb(87,1,38);
        background: linear-gradient(141deg, rgba(87,1,38,1) 0%, rgba(0,53,115,1) 100%);
        width: 200px;
        height: 50px;
        font-size: x-large;
        color: white;
        border-radius: 12px;
        border: none;
}
button{
        margin-top: 30px;
                background: rgb(87,1,38);
        background: linear-gradient(11deg, rgba(87,1,38,1) 0%, rgba(0,53,115,1) 100%);
        width: 150px;
        height: 30px;
        font-size: large;
        color: white;
        border-radius: 10px;
        border: none;
}