*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --dark-bg: rgb(37,37,37);
    --faint-bg: #f5f5f5ab;
    --border-color: rgba(143, 143, 143, 0.185);
}

:droot{
    --main-bg: /*#F2F3F8;*/ #f5f5f5ab /*#f5f5f57a*/;
    --content-bg:#fff;
    --icon-bg: #e6e6e65b;  /*#f1f1f1*/;
    --text-bg: #f5f5f57a;
    --text-bg-hover: #f5f5f550;
    --faint-bg: #FAFAFB /*#f7f7f7*/;
    --modal-bg: #e6e6e7;
    --drawer-bg: #eee;
    --input-bg: #f7f7f7;
    --info-inform-bg:#e6e6e65b;
    --border-color: rgba(143, 143, 143, 0.185);
    --text: #333;
    --text-muted: rgb(61,61,61);
    --text-muted-2: #535c6c;
    --icon:#a8a8a8;

    --content-bg: #15171B; /*#262626*/;
    --icon-bg:rgba(70, 71, 75, 0.356);
    --text-bg:rgba(70, 71, 75, 0.199);
    --text-bg-hover:rgba(70, 71, 75, 0.363);
    --faint-bg:#25252a;
    --modal-bg: #161616;
    --drawer-bg: #131519;
    --input-bg:rgba(70, 71, 75, 0.356);
    --info-inform-bg:rgba(70, 71, 75, 0.356);
    --border-color: rgba(143, 143, 143, 0.185);
    --text:#F1F1EB;
    --text-muted:#9C9EA0;
    --text-muted-2:rgb(156, 163, 175);
}



html{
    scroll-behavior: smooth;
}

body{
    width: min(100%, 1400px);
    margin: 0 auto;
    font-optical-sizing: auto;
    font-family: "Inter", sans-serif;
}

.container{
    margin: 6rem auto;
}

.title{
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

/* used for projects title and names */
.semi-title{
    font-size: 1.5rem;
    font-weight: 500;
}

/* used for divs that wraps around content after the title. eg: projects-display, mascots-display etc */
.section-body{
    margin-top: 45px;
}