@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

@keyframes slide {
    0% {
        top: -150px;
    }

    10% {
        top: 0px;
    }
}

* {
    padding: 0;
    margin: 0;
    font-family: "Noto Sans Mono", monospace;
}

h1 {
    margin: 20px;
    position: relative;
    animation: slide 1s ease;
} 

body {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(167,220,255,1) 100%);
}

.container {
    text-align: center;
    position: relative;
    top: 30px;
}



.buttons button {
    padding: 5px;
    width: 200px;
    border-radius: 5px;
    border: 2px solid #000000;
    transition: transform 0.2s ease;

}

.buttons button:hover {
    transform: scale(1.1);

}



footer {
    position: absolute;
    bottom: 0 ;
    width: 100%;
    height: 50px;
    padding: 12px;

}

.group1 button {
    background-color: #55cfff;

}

.group2 button {
    background-color: #ec3a3a;
}

.group3 button {
    background-color: #963aec;
}

.group0 button {
    background-color: #3aec49;
}

.group4 button {
    background-color: #ece03a;
}

.group5 button {
    background-color: #ec3ab4;
}



textarea {
    width: 500px;
    height: 400px;
    resize: horizontal;
    max-width: 1200px;
    min-width: 500px;

}

.buttons #color {
    width: 100px;
    height: 30px;
    transform: translateY(8px);
}

.area {
    padding: 5px;
    margin: 10px;

}