:root {
    --purple: #7638e0;
    --pink: #e39add;
    --orange: #f09148;
}

/* Extending the color theming, I only add what I know I'm going to use. */
.bg-purple { background-color: var(--purple) !important; }
.text-purple { color: var(--purple) !important; }
.badge-purple { background-color: var(--purple) !important; color: white; }

.bg-pink { background-color: var(--pink) !important; }
.text-pink { color: var(--pink) !important; }
.badge-pink { background-color: var(--pink) !important; color: white; }

.bg-orange { background-color: var(--orange) !important; }
.text-orange { color: var(--orange) !important; }
.badge-orange { background-color: var(--orange) !important; color: white; }


/* Unique font weight styles. */
.font-weight-200 { font-weight: 200 !important; }
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-weight-800 { font-weight: 800 !important; }
.font-weight-900 { font-weight: 900 !important; }


/* For custom scroll bars */
.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: #F8F9FC; }
.custom-scroll::-webkit-scrollbar-thumb { background: #355CCD; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #254CC0; }


/* Misc Classes */
.w-max { width: max-content; }

.link { cursor: pointer; }
.link:hover { text-decoration: none; opacity: .7; }

.profile-img-sm { height: 46px; width: 46px; }
.profile-img-md { height: 58px; width: 58px; }
.profile-img-lg { height: 268px; width: 268px; }

.hov-scale { transition: transform .2s;}
.hov-scale:hover { transform: scale(1.1); }

.text-white-placeholder::placeholder { color: white; }

.modal {
    top: 200px;
    width: 800px !important;
    left: 50%;
    transform: translateX(-50%);
}

textarea { resize: none; border: none; outline: none; }


/* For the Login & Register Forms, it makes the code DRY, and makes it so the code isn't repeated in both Login & Register Page Components */
.login-form input[type="submit"], .register-form input[type="submit"] {
    transition: all .2s;
}
.login-form input[type="submit"]:hover, .register-form input[type="submit"]:hover {
    background-color: white !important;
    color: #4066D5 !important;
}

/* This isn't the same breakpoint as bootstrap uses, but it fits the design better. */
@media (min-width: 442px) { .pt-sm-16vh { padding-top: 16vh !important; } }

.pt-6 { padding-top: 3rem; }

@media (max-width: 768px) { p.resp { font-size: 18px !important; } }

@media (min-width: 992px) { .w-md-50 { width: 50% !important; } }

/* Unique for the Sidebar component */
.sidebar {
    width: 16rem !important; 
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .sidebar { width: 6.5rem !important; }
    .sidebar[class~="auto-toggle"] { display: none; }
    #besties, #enemies, #finder, .quick { width: 56vw !important; }
}