*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

padding: 20px;

font-family: Arial, sans-serif;

background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

}

.container {

width: 100%;

max-width: 500px;

}

form {

background: white;

padding: 35px;

border-radius: 20px;

box-shadow:
    0 20px 45px rgba(0,0,0,0.2);

}

h1 {

text-align: center;

color: #4f46a5;

margin-bottom: 8px;

}

.subtitle {

text-align: center;

color: #888;

margin-bottom: 25px;

}

input,
textarea {

width: 100%;

padding: 14px;

border:
    2px solid #eee;

border-radius: 12px;

margin-bottom: 15px;

font-size: 15px;

outline: none;

font-family: inherit;

transition: 0.3s;

}

textarea {

min-height: 150px;

resize: vertical;

}

input,
textarea {

border-color: #667eea;

box-shadow:
    0 0 0 4px
    rgba(102,126,234,0.12);

}

button {

width: 100%;

padding: 14px;

border: none;

border-radius: 12px;

background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

color: white;

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: 0.3s;

}

button {

transform:
    translateY(-3px);

box-shadow:
    0 8px 20px
    rgba(91,75,196,0.3);

}

#message {

text-align: center;

margin-top: 15px;

color: #4f46a5;

font-weight: bold;

}

/* See all notes */

.all-notes {

display: block;

text-align: center;

margin-top: 20px;

padding: 15px;

background: white;

color: #5b4bc4;

text-decoration: none;

font-weight: bold;

border-radius: 12px;

transition: 0.3s;

}

.all-notes {

transform:
    translateY(-3px);

box-shadow:
    0 8px 20px
    rgba(0,0,0,0.2);

}