/*GOOGLE FONTS*/
@font-face { font-family: "Bitter";  src: url("/assets/fonts/Bitter/static/Bitter-Regular.ttf");  font-weight: 400;  font-style: normal;}
@font-face { font-family: "Josefin Sans";  src: url("/assets/fonts/Josefin_Sans/static/JosefinSans-Regular.ttf");  font-weight: 400;  font-style: normal;}
@font-face { font-family: "Poppins";  src: url("/assets/fonts/Poppins/Poppins-Regular.ttf");  font-weight: 400;  font-style: normal;}
@font-face { font-family: "Spectral SC";  src: url("/assets/fonts/Spectral_SC/SpectralSC-Regular.ttf");  font-weight: 400;  font-style: normal;}

/*VARIABLES*/
:root {
    /*BG COLORS*/
    --bg-black: #0c0c0c;
    --bg-darkgray: #151515;
    --bg-gray: #212121;

    /*TEXT COLORS*/
    --txt-white: #ffffff;
    --txt-lightgray: #9c9c9c;
    /*--txt-gray: #c2c2c2;*/

    /*BORDER RADIUS*/
    --border-radius: 10px;
}

/*GENERAL*/
html{ scroll-behavior: smooth; }
body{
    width: 100%;
    margin: 0!important;
    padding: 0!important;
    background-color: var(--bg-black);
    color: var(--txt-white);
    cursor: default;
    background-image: url("/assets/img/blackboard.jpg");
}
section{ max-width: 700px; margin-left: auto; margin-right: auto; }
:target:before {
    content: "";
    display: block;
    height: 75px;
    margin: -75px 0 0;
}
a{text-decoration: none;}
a:hover{text-decoration: none;}

/*COLOR & TEXT TEMPLATE*/
.white-1{ color: var(--txt-white);!important;}
.white-2{ color: var(--txt-lightgray);!important;}

.bg-1{ background-color: var(--bg-black);!important;}
.bg-2{ background-color: var(--bg-darkgray);!important;}
.bg-3{ background-color: var(--bg-gray);!important;}

.width-100{width: 100%;!important;}

.xxxl-size{font-size: 60px; line-height: 77px;}
.xxl-size{font-size: 35px;}
.xl-size{font-size: 28px;}
.l-size{font-size: 1.3rem}
.m-size{font-size: 1.1rem;}
.s-size{font-size: 0.95rem;}
.xs-size{font-size: 0.85rem;}

.default-font{ font-family: 'Poppins', sans-serif; }
.header-font{ font-family: "Spectral SC", serif; }
.detail-font{ font-family: 'Bitter', serif; }

/*BUTTON TEMPLATE*/
.lime-btn{
    border: 1px solid var(--highlight-txt);
    border-radius: 3px;
    width: fit-content;
    display: inline-block;
    padding: 15px 18px;
    transition: background-color 0.25s;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 0.9rem;
}
.lime-btn-navbar{ transform: translateY(-6px); }
.lime-btn:hover{ background-color: rgba(201, 229, 126, 0.2); }

/*EXTRAS*/
.box-shadow{
    box-shadow: rgba(0, 0, 0, 0.78) 0px 6px 12px -2px, rgba(0, 0, 0, 0.49) 0px 3px 7px -3px;
    border-radius: 5px;
}