body{
    background-color: #222438;
    margin: 0;
}
main{
    height: 100vh;
    width: 100vw;
    overflow: auto; /* Enable scrolling */
    background-image: repeating-linear-gradient( 
        to right,
         transparent 0 50px,
         #fff1 50px 51px
        ), repeating-linear-gradient( 
        to bottom,
         transparent 0 50px,
         #fff1 50px 51px
        );
    position: relative;
}
form{
    background-color: aliceblue;
    width: max-content;
    padding: 6px;
    margin: 10px;
    display: flex;
    border-radius: 20px;
    gap: 10px;
}
form input, button{
    height: 30px;
    width: 30px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: large;
    cursor: pointer;
}
form input::-webkit-color-swatch-wrapper{
    padding: 0;
}
form input::-webkit-color-swatch{
    border-radius: 50%;
}
#list {
    display: none; /* Hide the note container by default */
}
#list textarea{
    all: unset;
    color: #d6d6d6;
    width: 100%;
    height: 100%;
    resize: none;
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
}
#list .note{
    background-color: #333;
    width: 300px; /* Default width */
    height: auto; /* Adjust height automatically */
    border-top: 30px solid #e6b905;
    border-radius: 10px;
    box-shadow: 0 20px 50px #0004;
    padding: 10px;
    position: absolute;
    top: 60px;
    left: 60px;
    box-sizing: border-box;
}
#list .note span{
    position: absolute;
    bottom: 100%;
    right: 0;
    height: 30px;
    padding-right: 10px;
    font-family: cursive;
    font-size: large;
    cursor: pointer;
}

/* Media query for phones */
@media (max-width: 600px) {
    #list .note {
        width: 200px;
        height: auto; /* Adjust height automatically */
    }
    main {
        padding-bottom: 100px; /* Extra space for scrolling */
        padding-right: 100px; /* Extra space for scrolling */
    }
}

/* Media query for tablets */
@media (min-width: 601px) and (max-width: 900px) {
    #list .note {
        width: 250px;
        height: auto; /* Adjust height automatically */
    }
}