* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI';
}

/* -------------------------------------------------------- */

.container {
    height: 100vh;
}

.container,
#btn1 {
    /* Giver these 'display' properties to both the elements so that the 'button' can come in the centre of the screen also another reason was that it was common in both so written by using grouping selector ',' (comma) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

/* -------------------------------------------------------- */

/* For Button 1 */
#btn1 {
    height: 100px;
    background-color: rgb(90, 200, 250);

    letter-spacing: 5px;

    padding: 10px 20px;

    border: 2px solid black;
    border-radius: 10px;

    transition-property: border-color, box-shadow;
    transition-duration: 500ms;
    transition-timing-function: ease-out;
}

#btn1:hover {
    border-color: white;
    box-shadow: 7px 7px;
}

/* -------------------------------------------------------- */