/* color palatte */
:root {
    --primary-color: #eae2f3; 
    --secondary-color: #e9e3d7;
    --accent-color: #9362cb;

    --accent-txt: #2d115c;
    --dark-txt: #2c3e50;;
    --light-txt: rgb(246, 246, 246);
}

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

    scrollbar-width: thin;
    scrollbar-color: #ba9a5e var(--secondary-color);
}
body { background-color: var(--primary-color); }
h1, h2, h3, h4, h5, h6, p { color: var(--accent-txt); }

/* logo */
.logo img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.logo img:hover {
    transform: scale(1.05);
    /* slight scale up */
}

/* custom scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #ba9a5e;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
    border: 2px solid #ba9a5e;
    /* creates spacing effect */
    transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: #ba9a5e;
}

/* fonts */
h1, h2, h3, h4, h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

body, p, li, input, textarea {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

/* Width Utils */
.w40 { width: 40%; }
.w50 { width: 50%; }
.w100 { width: 100%; }

/* Height Utils */
.h100VH { height: 100vh; }

/* Flexbox Utils */
.flex-rows { display: flex; }
.flex-cols { display: flex; flex-direction: column; }
.flex-grow { flex-grow: 1; }
.flex-center-justify { justify-content: center; }

/* Image Utils */
.contain { object-fit: contain; }
.cover { object-fit: cover; }

/* Text Utils */
.t-normal { font-weight: normal; }
.t-thin { font-weight: 100; }
.t-bold { font-weight: bold; }
.t-italic { font-style: italic; }

.black-txt { color: var(--dark-txt); }
.light-txt { color: var(--light-txt); }

.t-center { text-align: center; }
.t-justify { text-align: justify; }

.t45 { font-size: 45px; }
.t40 { font-size: 40px; }
.t30 { font-size: 30px; }
.t25 { font-size: 25px; }
.t22 { font-size: 22px; }
.t20 { font-size: 20px; }
.t18 { font-size: 18px; }
.t14 { font-size: 14px; }
.t12 { font-size: 12px; }

.ls1 { letter-spacing: 1px; }
.ls2 { letter-spacing: 2px; }

.para {
    line-height: 1.7em;
    letter-spacing: 0.25px;
    color: var(--dark-txt);
}
.section-title {
    font-size: 1.8rem;
    color: #2c3e50;
    margin: 0;
    border-bottom: 2px solid #eee;
}

/* Positional Utils */
.relative { position: relative; }
.absolute { position: absolute; }
.pos-translate-center { transform: translateX(-50%) translateY(-50%); }
.pos-center { top: 50%; left: 50%; }
.pos-topleft { top: 0%; left: 0%; }

.block { display: block; }
.inline-block { display: inline-block; }

/* Padding Utils */
.p15 { padding: 15px; }
.p25 { padding: 25px; }
.p100 { padding: 100px; }

.ptop25 { padding-top: 25px; }
.pbottom25 { padding-bottom: 25px; }

/* Margin Utils */

.margin-center { margin: 0 auto; }
.margin-full-auto { margin: auto; }
.mtop5 { margin-top: 5px; }
.mtop10 { margin-top: 10px; }
.mtop15 { margin-top: 15px; }
.mtop25 { margin-top: 25px; }
.mtop35 { margin-top: 35px; }
.mtop50 { margin-top: 50px; }
.mtop100 { margin-top: 100px; }

.mbottom5 { margin-bottom: 5px; }
.mbottom25 { margin-bottom: 25px; }
.mbottom50 { margin-bottom: 50px; }
.mbottom100 { margin-bottom: 100px; }
.mtop25 { margin-top: 25px; }

.mleft15 { margin-left: 15px; }
.mleft25 { margin-left: 25px; }
.mleft50 { margin-left: 50px; }

.mright10 { margin-right: 10px; }
.mright50 { margin-right: 50px; }

/* BUTTONS */
.purple-btn {
    background-color: #4d3b6b;
    color: white;
    border-radius: 20px;
    font-size: 18px;
    outline: none;
    border: none;
    display: inline-block;
    padding: 10px

}
.purple-btn:hover {
    background-color: #392c50;
    cursor: pointer;
}

/* MISC */
.saturate { filter: saturate(1.8); }
.gutter-scroll { scrollbar-gutter: stable; }
.debug { background-color: red; }
.debug2 { background-color: blue; }