/* Nunito font import */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap');

/* Theme Colors: #1c1c1c gray, #5b94f0 blue, #ff4747 red, #44cf69 green, #fcfc23 yellow*/

body {
color:#ffffff;
font-family: 'Nunito', sans-serif;
background-color:#1c1c1c;
 text-align: center;
    max-width: 100%;
    height: 100vh;           
}
/* HTML element */
button {
 color: #ffffff;
    text-decoration: none;
    border: #ffffff solid 2px;
    border-radius: 10px;
    padding: 7px;
    margin: 5px;
 font-family: 'Nunito', sans-serif;
 font-size: 22px;
 cursor: pointer;
 /* button code by class */
}
.button-r {
 color: #ffffff;
    text-decoration: none;
    border: #ff4747 solid 2px;
    border-radius: 10px;
    padding: 7px;
    margin: 5px;
}
.button-b {
 color: #ffffff;
    text-decoration: none;
    border: #5b94f0 solid 2px;
    border-radius: 10px;
    padding: 7px;
    margin: 5px;
}
.button-g {
 color: #ffffff;
    text-decoration: none;
    border: #44cf69 solid 2px;
    border-radius: 10px;
    padding: 7px;
    margin: 5px;
 cursor:pointer;
}
.button-y {
 color: #ffffff;
    text-decoration: none;
    border: #fcfc23 solid 2px;
    border-radius: 10px;
    padding: 7px;
    margin: 5px;
}
p {
font-size:24px;
}
.button-r:hover{
    transition: all 0.3s ease-in-out;
    background-color: #ff4747;
    color: #ffffff;
}
.button-b:hover{
    transition: all 0.3s ease-in-out;
    background-color: #5b94f0;
    color: #ffffff;
}
.button-g:hover{
    transition: all 0.3s ease-in-out;
    background-color: #44cf69;
    color: #ffffff;
}
.button-y:hover{
    transition: all 0.3s ease-in-out;
    background-color: #fcfc23;
    color: #ffffff;
}