/* Import Poppins from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); /* The :root selector matches the element and has the highest specificity */ :root { /* Brand Colors */ --primary-color:rgba(76, 0, 130, 0.5); --secondary-color: slateblue; --accent-color: rgb(252, 221, 165); --text-main: #1f202b; --text-light: antiquewhite; --bg-main: rgb(247, 240, 235); --bg-light: #f8f9fa; --font-main: 'Poppins', sans-serif; /* Spacing System */ --gap-sm: 0.5rem; --gap-md: 1rem; --gap-lg: 2rem; /* Shadow for the .card-container */ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --txt-shadow : 3px 3px 5px rgb(123, 117, 142); } /* Base Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); color: var(--text-main); background-color: var(--bg-light); line-height: 1.6; } /* Brand styling*/ .brand { /*font-size: 2rem;*/ font-weight: bold; color: var(--text-light); } nav {background-color : var(--bg-main)} section{transition: all 0.4s ease;} /* Reusable Components */ .btn-primary { background-color: var(--primary-color); color: white; padding: 0.8rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; } .title-1{ font-size: 40px; font-weight: 700; color:var(--secondary-color); text-shadow: var(--txt-shadow); } .title-2{ font-size: 40px; font-weight: 700; color:var(--accent-color); text-shadow: var(--txt-shadow) } .btn-1{ background-color: var(--accent-color); color: black; padding: 0.8rem 1.5rem; } .grow:hover{ transition: transform 0.5s ease; transform: scale(1.05); box-shadow: 3px 3px 5px rgb(216, 207, 245); background-color: var(--secondary-color); } /* Mobile menu section */ .menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 2100; } .menu-toggle span { width: 25px; height: 3px; background: #1e293b; border-radius: 3px; transition: 0.3s; } @media (max-width: 1100px) { .menu-toggle { display: flex; } .nav-links { position: fixed; top: 0; right: -100%; height: 100vh; width: 70%; padding-top: 20%; background: whitesmoke; flex-direction: column; justify-content: start; gap: 2rem; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -10px 0 20px rgba(0,0,0,0.1); } a {color: rgb(45, 45, 45); font-size: 1.5rem; text-align: end;} .nav-links.active { right: 0; } } /* Custom styling for the Google Doc content*/ #new-content div { padding: 2%; margin: auto; } @media screen and (min-width: 768px) { #new-content div { padding: 10%; max-width: 100%; margin: auto; } }