@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

.spin {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.black-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}
.extrabold-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}
.bold-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.semibold-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
.medium-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.regular-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.light-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
.extralight-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}
.thin-lexend {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.black-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}
.extrabold-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}
.bold-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.semibold-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
.medium-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.regular-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.light-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
.extralight-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}
.thin-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

/* light mode colors */
:root {
    --primary-bg: #ffffff;
    --primary-color: #4771F1;
    --text-color: #111111;
    --border-gray: #e3e3e3;
    --icon-gray: #D6D6D6;
}

/* dark mode colors */
body.dark-mode {
    --primary-bg: #101010;
    --primary-color: #4771F1;
    --text-color: #f1f1f1;
    --border-gray: #e3e3e3;
    --icon-gray: #D6D6D6;
}

.a_color {
    color: var(--text-color);
}
.a_color:hover {
    color: var(--text-color);
}
.a_color i {
    color: var(--icon-gray);
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    border-radius: 50%;
    overflow: hidden;
}

.border1px {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-gray);
}

/* light mode */
body {
    background-color: var(--primary-bg);
    color: var(--text-color);
    font-size: 14px;
}

.dark_mode .dark-mode-btn i {
    color: var(--text-color);
}