/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');


/* Default Button */
.btn-default {
    color: #fff;
    background-color: #23525d;
    width: 160px;
    transition: 0.3s;
    padding: 8px 0px;
    font-size: 17px;
    font-family: 'Open Sans', sans-serif;
}

.btn-accent {
    color: #fff;
    background-color: #0f819b;
    width: 160px;
    transition: 0.3s;
    padding: 8px 0px;
    font-size: 17px;
    font-family: 'Open Sans', sans-serif;
}

.btn-default-lg {
    color: #fff;
    background-color: #23525d;
    width: 180px;
    transition: 0.3s;
    padding: 8px 0px;
    font-size: 17px;
    font-family: 'Open Sans', sans-serif;
}

.btn-accent-lg {
    color: #fff;
    background-color: #0f819b;
    width: 180px;
    transition: 0.3s;
    padding: 8px 0px;
    font-size: 17px;
    font-family: 'Open Sans', sans-serif;
}


.btn-default:hover {
    color: #fff;
    transform: scale(1.03);
    background-color: #119acf;
}

.btn-accent:hover {
    color: #fff;
    transform: scale(1.03);
    background-color: #021e29;
}

.btn-default-lg:hover {
    color: #fff;
    transform: scale(1.03);
    background-color: #119acf;
}

.btn-accent-lg:hover {
    color: #fff;
    transform: scale(1.03);
    background-color: #021e29;
}


/* PROGRESS BAR */
@property --percentage {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

body {
    margin: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: 'Roboto', sans-Serif;
}