/* 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*/
html {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}
body {
color:#ffffff;
font-family: 'Nunito', sans-serif;
background-color:#1c1c1c;
 text-align: center;
    max-width: 100%;
    height: 100vh;           
    padding: 0;
    margin: 0;                                                                
}
.title {
   width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    
}
.header {
  font-size:60px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.subheader {
  font-size:15px;
}
.links {
font-size:15px;
}
.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;
}
.button-y {
 color: #ffffff;
    text-decoration: none;
    border: #fcfc23 solid 2px;
    border-radius: 10px;
    padding: 7px;
    margin: 5px;
}
                        

.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;
}
.blue {
color:#5b94f0;
}

.red {
color:#ff4747;
}

.green: {
color:#44cf69;
}

.yellow {
color:#fcfc23;
}

.bg {
 margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  filter:blur(20px);
    opacity:50%;
    z-index:1;
}
.footer {
 position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
}