utils.css

@import url('https://fonts.googleapis.com/css2?fami ly=Bitter:ital,wght@1,600;1,800&family=Merriweather:ital,wght@1,900&family=Montserrat:wght@300;400;500;600;700&family=Permanent+Marker&family=Poppins:wght@300;400&display=swap');
:root{
    --primary-clr:#05386b;
    --secondary-clr:#04478a;
    --danger-clr: #c31010;
    --warning-clr:#c1c1c0;
    --success-clr:#188f1d;
    --info-clr:#1a5eb1;
    --clr-blue:#2b6cb0;
    --clr-grey:#646464cf;
    --clr-teal:#12b2b3;    
    --clr-black:#010908;
    --clr-white:#fff;
    --clr-lightgrey:#edf2f7;
    --clr-grey-100:#edf2f785;
    --clr-yellow:#FFC600;
    --clr-darkBlue:#011627;
    --clr-maroon:#B12704;
    --clr-purple:#9A0680;
    --clr-skyBlue:#1597BB;
    --clr-light-green:#28FFBF;
    --clr-pink:#FF004D;
    --clr-red:#ff1d15;
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
    letter-spacing: 0.11rem;
    --box-shadow-clr:0 3px 6px 0 rgb(0 0 0 / 20%);
}

*::before,*::after,*{
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Poppins';
}
.container{
    border: 2px solid black;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem auto;
    max-width: 100rem;
}
/* Margin */
.m-0{
    margin: 0;
}

.m-0-5{
    margin: 0.5rem;
}

.m-1{
    margin: 1rem;
}

.m-1-5{
    margin: 1.5rem;
}

.m-2{
    margin: 2rem;
}

/* ||Padding */
.p-0{
    padding: 0;
}

.p-0-5{
    padding: 0.5rem;
}

.p-1{
    padding: 1rem;
}

.p-1-5{
    padding: 1.5rem;
}

.p-2{
    padding: 2rem;
}
.p-3{
    padding: 3rem;
}
.p-4{
    padding: 5rem;
}
.p-5{
    padding: 5rem;
}
/* grid */
.grid{
    display: grid;
}
/* flex */
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.grid{
    display: grid;
    place-items: center;
}
.hidden{
    visibility: hidden;
}
img{
    object-fit: cover;
}

.bg-black{
    background-color: var(--clr-black);
}

.bg-grey{
    background-color: var(--clr-grey);
}

.bg-blue{
    background-color: var(--clr-blue);
}

.bg-red{
    background-color: var(--clr-red);
}

.bg-teal{
    background-color: var(--clr-teal);
}

.bg-ltblue{
    background-color: var(--clr-ltblue);
}
.bg-primary{
    background-color: var(--primary-clr);
}

.avatar-circle{
    border-radius: 50%;
}

/* IMAGE-SIZE */
img.size-xs{
    width: 4rem;
    height: 4rem;
}
img.size-sm{
width: 6rem;
height: 6rem;
}

img.size-md {
width:8rem;
height: 8rem;
}

img.size-lg{
width: 10rem;
height: 10rem;
}

img.size-xl{
width: 12rem;
height: 12rem;
}

img.size-2xl{
width: 14rem;
height: 14rem;
}
img.size-3xl{
    width: 20rem;
    height: 20rem;
}
  
  .res{
    max-inline-size: 100%;
    block-size: auto;
    width: 100%;
}

.hidden{
    visibility: hidden;
}

.none{
    display: none;
}

.icon{
    cursor: pointer;
}
.pointer{
    cursor: pointer;
}
.avatar-sq{
    border-radius: 1rem;
}

.list-none{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}
.logo{
    font-family: 'Permanent Marker', cursive;
    font-size: 5rem;
    color: var(--primary-clr);
    text-decoration: none;
}

.w-100{
    width: 100%;
    max-width: 100%;
}
.h-100{
    height: 100%;
    max-height: 100%;
}
.relative{
    position: relative;
}
.sticky{
    position: sticky;
}
.absolute{
    position: absolute;
}
button{
    cursor: pointer;
}

.bg-grey{
    background-color: var(--clr-lightgrey);
}
.flex-column{
    flex-direction: column;
}
.overflow-hidden{
    overflow: hidden;
}
.inset{
    inset: 0;
}