common.css

:root {
    --accordion-color-dark: rgb(25, 26, 27);
    --accordion-color-light:rgb(35, 41, 51);

    --bar-color: rgb(0, 102, 255);
    --border-color: rgb(87, 81, 72);
    --bg-color: rgb(18, 19, 20);
    --border-bottom-color: rgb(0, 255, 255);
    --button-color: rgb(0, 179, 233);
    
    --card-bg-color: rgb(14, 15, 16);

    --disabled-color: rgb(78, 78, 78);

    --gun-card-bg-color: rgb(26, 26, 32);
    --gun-footer-bg-color: rgb(228, 228, 228);

    --link-color: rgb(0, 140, 255);

    --nav-bg-color: rgb(10, 10, 10);

    --primary-font-color: rgb(232, 230, 227);

    --border-radius: 15px;
    
    touch-action: manipulation;     /* disable double-tap-to-zoom for better UX */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px;   /* to account for the navbar */
}

body {
    min-height: 100vh;
    height: fit-content;
    font-family: 'Helvetica', 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
	background-color: rgb(18, 19, 20) !important;
    background-image: url('./resources/background.jpg');
	color: var(--primary-font-color) !important;
}

/* this accounts for the navbar */
body::before {
    display: block;
    content: '';
    height: 50px
}

#main {
    min-height: 100%;
	padding: 15px;
    background-color: var(--bg-color);
    margin: auto;
    flex: 1 0 auto;
}

/***** CLASSES *****/
.accordion-body {
    background-color: var(--output-card-bg-color);
    color: var(--primary-font-color);
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.accordion-button, .accordion-button:not(.collapsed) {
    background-color: var(--accordion-color-dark);
    color: var(--primary-font-color);
    border: 1px solid var(--border-color);
}

.accordion-button:is(.collapsed) {
    background-color: var(--accordion-color-light);
}

.border-highlighted {
    border-bottom: 5px solid var(--border-bottom-color) !important;
}

.border-highlight {
    border-radius: 0px !important;
    border-bottom: 5px inset transparent !important;

    transition: border-bottom 0.25s ease;
}

.border-highlight:hover {
    border-bottom: 5px solid var(--border-bottom-color) !important;
}

.btn {
    border-width: 0px !important; /* override an annoying pixel problem */
}

.site-btn {
    margin: 5px;
    border: none;
    border-radius: 0px !important;
    padding: 10px;
    background-color: var(--button-color);
    color: var(--primary-font-color);
}

.site-btn-disabled {
    background-color: var(--disabled-color) !important;
}

.search-btn {
    border: none;
    padding: 10px;
    background-color: var(--button-color);
    color: var(--primary-font-color);
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.gun-card {
    margin-top: 5px;
    margin-bottom: 5px;
    background: var(--gun-card-bg-color) !important;
    color: var(--primary-font-color) !important;
}

.gun-img {
    margin: 10px auto;
    padding-top: 10px;
    object-fit: scale-down;
    width: 50%;
    height: 75px;
}

.gun-img-lg {
    margin: 15px auto;
    padding-top: 10px;
    object-fit: scale-down;
    width: 50%;
    height: 125px;
}

.gun-title {
    font-size: 100%;
    padding: 5px;
    margin: auto !important;
    display: flex;
    justify-content: center;
    color: white;
}

.gradient {
    position: relative;
    background-image: linear-gradient(to bottom, rgb(212, 212, 212) 85%, rgb(212, 212, 212) 85%);
    z-index: 1;
}

.gradient::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgb(212, 212, 212) 50%, rgb(0, 217, 255) 85%);
    z-index: -1;

    transition: opacity 0.25s linear;
    opacity: 0;
}

.gradient:hover::before {
    opacity: 1;
}

.gradient-transparent {
    position: relative;
    background-image: linear-gradient(to bottom, transparent 95%, transparent 100%);
    z-index: 1;
}

.gradient-transparent::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, transparent 50%, rgba(0, 255, 255, 0.733) 90%);
    z-index: -1;

    transition: opacity 0.25s linear;
    opacity: 0;
}

.gradient-transparent:hover::before {
    opacity: 1;
}

.link {
    color: var(--primary-font-color);
    text-decoration: none;

    transition: color 200ms ease-in-out;
}

.link:hover {
    color: var(--link-color);
}

.navbar-dark {
    background-color: var(--nav-bg-color) !important;
}

.nav-item,
.navbar-brand {
    padding: auto 2rem auto 2rem;
}

.no-bkgd {
    background: none !important;
    background-color: transparent !important;
}

.no-border {
    border: none !important;
}

.no-radius {
    border-radius: 0 !important;
}

/* This fixes the jittering when SVGs aren't loaded fast enough */
#op-imgs {
    min-height: 4rem !important;
}

.output-card {
	background-color: var(--card-bg-color) !important;
	color: var(--primary-font-color) !important;
	border: 1px solid rgb(134, 134, 134);
	border-radius: 15px;
    padding: 10px;

    margin: 5px;
}

.output-op-div {
    position: fixed;
    width: 100%;
    height: 720px;
    overflow: hidden;
}

.page-title {
    font-size: 2rem;
    text-align: center;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--border-color);
}

.siege-uppercase {
    text-transform: uppercase !important;
    font-style: italic !important;
    font-weight: bold !important;
}

.siege-bold {
    text-transform: uppercase;
    font-weight: bold;
}

.search-icon {
    width: 25px;
}

.speed-icon {
    width: 30px;
}

.standout {
    margin: 15px auto;
    text-align: center;
    font-size: 20px;
}

.subheader {
    font-size: 20px;
    padding-top: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-font-color) !important;
}

.uppercase {
    text-transform: uppercase;
}

/**** SVG CHARTS ****/
.bar {
    fill: var(--bar-color);
}

.bar-blank {
    fill: var(--primary-font-color);
}

/* KEYFRAMES */
@keyframes fadeIn {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}