@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --color-gray : #eeeeee;
    --color-red:#F33332;
    --color-nice:#d2e7fc;
    --color-green:#0fa060;
    --color-blue:#027AB9;
}
body {
    font-family: "Almarai", sans-serif;
    background-color: var(--color-blue);
    
}
main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
main #content {
    padding: 20px 10px;
    margin: 0px 10px;
    background-color: var(--color-gray);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
   align-items: center;
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
main #content .title{
    text-align: center;
    margin: 5px 0px;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-red);
}
main #content .btn {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--color-blue);
    text-align: center;
    cursor: pointer;
    color: white;
    transition: all 200ms ease-in-out;
}
main #content .btn:hover {
background-color: var(--color-green);
}
/* public */
a {
text-decoration: none;
}