@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --background-colour: #151D28;
    --foreground-colour: #2C3A4E;

    --text-colour: white;

    --button-colour: #0F73FF;
    --button-highlight-colour: #4D97FF;
}

* {
    font-family: "Inter", sans-serif;
    font-size: medium;
}

body {
    background-color: var(--background-colour);

    max-width: 500px;

    margin: auto;

    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

@keyframes disappear {
    from {
        opacity: 100%;
    }
    to {
        opacity: 0%;
    }
}

.disappear {
    opacity: 0%;
    animation: disappear 5s linear 1;
}

.box {
    border: solid 1px var(--foreground-colour);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
}

.right {
    text-align: right;
}

textarea {
    color: var(--text-colour);

    resize: none;
    width: 100%;
    
    background: none;
    border: none;
    outline: none;
}

textarea:disabled {
    color: var(--text-colour);
}

#text {
    height: 2lh;
}

button {
    background-color: var(--button-colour);
    color: var(--text-colour);

    border-radius: 1000px; /* really big number lol */
    padding: 10px;
    border: none;
    padding-left: 15px;
    padding-right: 15px;
}

button:hover {
    background-color: var(--button-highlight-colour);
    cursor: pointer;
}