/*  CSS of Index Page */
:root {
    --text-bg-colorl-1: #ffd60a;
}
.login-section {
    background-color: var(--text-bg-colorl-1);
}
.hlinkl-1 {
    -webkit-text-stroke-width: 1px;
    font-family: 'Trebuchet MS', sans-serif;
    color: var(--text-bg-colorl-1);
    letter-spacing: 3px;
    font-weight: 800;
    font-size: 1.5rem;
}
/*applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
    .hlinkl-1 {
        font-size: 1.3rem;
    }
}
/*applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .hlinkl-1 {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }
}
/*applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .hlinkl-1 {
        font-size: 1rem;
        letter-spacing: 1px;
    }
        .hlinkl-1 img {
            height: 25px;
        }
}
/* Background colors */
.bg-color {
    background-color: var(--yellow);
}
.bg-color-white {
    background-color: var(--white);
}
/* Text Colors */
.text-colorl-1 {
    color: var(--yellow);
}
.text-colorl-2 {
    color: var(--white);
}
.text-colorl-3 {
    color: var(--black);
}
/*form*/
.login-form {
    height: calc(100vh - 5rem);
}
/* Heading*/
.hdgl-1 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    font-stretch: condensed;
    letter-spacing: -5px;
}
/*applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
    .hdgl-1 {
        font-size: 2.8rem;
    }
}
/*applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .hdgl-1 {
        font-size: 2.5rem;
    }
}
/*applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .hdgl-1 {
        font-size: 2rem;
    }
}
.hdgl-2 {
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #000000;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: 700;
    font-size: 8rem;
    line-height: 8.498rem;
}
@media (max-width: 1600px) {
    .hdgl-2 {
        font-size: 6rem;
        line-height: 6rem;
    }
}
/*applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
    .hdgl-2 {
        font-size: 5rem;
        line-height: 5rem;
    }
}
/*applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .hdgl-2 {
        -webkit-text-stroke-width: 4px;
        font-size: 5rem;
        line-height: 5rem;
    }
}
/*applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
    .hdgl-2 {
        -webkit-text-stroke-width: 4px;
        font-size: 3.5rem;
        line-height: 5rem;
    }
}
/*applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .hdgl-2 {
        font-size: 2rem;
        line-height: 4rem;
        -webkit-text-stroke-width: 3px;
    }
}
/*applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .hdgl-2 {
        -webkit-text-stroke-width: 2px;
        font-size: 1.8rem;
        line-height: 3rem;
    }
}
.hdgl-3 {
    -webkit-text-stroke-width: 1px;
    font-family: 'Trebuchet MS', sans-serif;
    letter-spacing: 3px;
    font-weight: 800;
    font-size: 1.9rem;
}
/*applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
    .hdgl-3 {
        font-size: 1.8rem;
    }
}
/*applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .hdgl-3 {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
}
/*applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    /*    :root {
        --bg-colorl-1: red;
        --text-colorl-1: #00ff21;
    }*/
    .hdgl-3 {
        font-size: 1rem;
        letter-spacing: 1px;
    }
}
.hdgl-4 {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000000;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: 700;
    font-size: 3.875rem;
    font-style: italic;
}
/*applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .hdgl-4 {
        font-size: 2rem;
    }
}
/*applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .hdgl-4 {
        -webkit-text-stroke-width: 1px;
        font-size: 2rem;
    }
}
/*applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .hdgl-4 {
        font-size: 1.5rem;
        line-height: 2.5rem;
    }
}
/* End Of Sections  */