* {
    box-sizing: border-box;
    font-size: 12px;

    /* Possible color */

    /* #0D3B66  Yale Blue */
    /* #2EBFA5  Keppel*/
    /* #2E294E  Space cadet*/
    /* #8783D1 Tropical Indigo */

}

body {
    margin: 0;
    background-color: #1F2833;
    color: #ddd;
    font-family: "Playfair Display", serif;
}

.container {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#card {
    width: 450px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 4rem;
     border: 2px solid #1F2833;
    box-shadow: rgba(135, 131, 209, 0.4) 5px 5px,
            rgba(135, 131, 209, 0.3) 10px 10px,
            rgba(135, 131, 209, 0.2) 15px 15px,
            rgba(135, 131, 209, 0.1) 20px 20px,
            rgba(135, 131, 209, 0.05) 25px 25px;
}

h2 {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: cursive, sans-serif;
    letter-spacing: 0.3rem;
    text-shadow: 4px -4px 3px #8783D1;
}

p {
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 0.5rem;
    line-height: 50px;
}

#btn {
    margin: 5rem auto;
    padding: 1.2rem;
    border-radius: 10px;
    background-color: #1F2833;
    color: #f5ecec;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-weight: 700;
}

#btn:hover {
    background-color: #8783D1;
    color: #ddd;
    cursor: pointer;
}