/*
BackGround - #000614
Primary - #69747C
Secondary - #2B323B
Text - #B3B8BD
Highlight - #DEE0E3
Border - #dc3545
 

*/


.body-tertiary {
  background-color: rgba(0,0,0,0.2) !important;
  --bs-bg-opacity: 1;
}

iframe {
    overflow: clip !important;
}

.navbar {
    position: sticky !important;
    z-index: 2;
    top: 0;
    --bs-navbar-color: rgba(222, 224, 227, 1) !important;
    --bs-navbar-hover-color: rgba(255, 255, 255, 1) !important;
    --bs-navbar-disabled-color: rgba(105, 116, 124, 1) !important;
    --bs-navbar-active-color: rgba(255, 255, 255, 1) !important;
    --bs-navbar-brand-color: rgba(255, 255, 255, 1) !important;
    --bs-navbar-brand-hover-color: rgba(255, 255, 255, 1) !important;
}

.b-background {
    z-index: 0;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.b-star {
    z-index: -1;
    width: 100px; /* Set a specific width */
    height: 100px; /* Set the same height as the width */
    background-image: radial-gradient(#e62336, #970211); /* Choose a background color */
    border-radius: 50%; /* Make it a circle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Adjusts for element's own size */
    position: fixed;
    display: flex;

    justify-content: center;
    align-items: center; /* To align vertically, if needed */
}

.b-planet {
    z-index: -2;
    width: 50px; /* Set a specific width */
    height: 50px; /* Set the same height as the width */
    background-color: rgb(175, 0, 0); /* Choose a background color */
    border-radius: 50%; /* Make it a circle */
    position: inherit;
    transform-origin: initial;
    transform: translate(200px, 0px);
    display: flex;
    justify-content: center;
    align-items: center; /* To align vertically, if needed */
    animation: Orbit 10s linear 2s infinite;
}

@keyframes Orbit {
  0%   {rotate: 0deg;}
  25%  {rotate: 90deg;}
  50%  {rotate: 180deg;}
  75% {rotate: 270deg;}
  100% {rotate: 360deg;}
}

.b-moon {
    z-index: -3;
    width: 20px; /* Set a specific width */
    height: 20px; /* Set the same height as the width */
    background-color: rgb(125, 0, 0); /* Choose a background color */
    border-radius: 50%; /* Make it a circle */
    position: inherit;
    transform-origin: initial;
    transform: translate(50px, 0px);
    animation: Orbit 10s linear 2s infinite;
}

.b-text {
    color: #DEE0E3;
    text-align: center;
    font-size: 110%;
}

.b-border {
    border-style: solid;
    border-radius: 1%;
    border-color: #dc3545;
    border-width: 2px;
    border-radius: 10px; 
}

.b-box {
    z-index: 1;
    height: 45%;
    width: 55%;
    margin: 0 auto;
    margin-top: 4%;
    padding: 0.5%;
}

.primary-color {
    background-color: #69747C;
}

.b-background-color {
    background-color: rgba(0,0,0,0.2);
}

p {
    color: #B3B8BD;
    margin: 0 auto;
    /*padding-left: 5%; /* Adds 15px padding to all sides of all <p> elements */
    width: 60%;
}


.title {
    text-align: center;
    font-size: 250%;
}

.title::after {
    content: "";
    background-color: #dc3545;
    width: 20%;
    height: 2px;
    margin: 0 auto;
    margin-top: 5px;
    display: block;
}

body {
    background-color: #000614 !important;
    color: #DEE0E3 !important;
    text-align: center;
    overflow: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* For IE and Edge */
    -ms-overflow-style: none !important;

    /* For Firefox */
    scrollbar-width: none !important;
}

::-webkit-scrollbar {
    display: none !important;
}

.footer {
    margin-top: 100px;
    height: 100px;
    width: 100%;
    border-bottom: #dc3545;
    border-right: #dc3545;
    border-left: #dc3545;
    border-radius: 0px;
    padding-top: 1.5%;
}

.bloom {
    box-shadow: 
    0 0 10px #970211,
    0 0 20px #970211,
    0 0 30px #970211,
    0 0 40px #970211,
    0 0 70px #970211,
    0 0 80px #970211,
    0 0 100px #970211,
    0 0 150px #970211,
    0 0 250px #970211,
    0 0 350px #970211;
    text-shadow:     
    0 0 10px #dc3545,
    0 0 20px #dc3545,
    0 0 30px #dc3545,
    0 0 40px #dc3545,
    0 0 70px #dc3545,
    0 0 80px #dc3545,
    0 0 100px #dc3545,
    0 0 150px #dc3545;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Three columns: one flexible unit, two flexible units, one flexible unit */
  grid-template-rows: auto auto auto; 
}

.card {
--bs-card-bg: #000614 !important;
--bs-card-title-color: #B3B8BD !important;
color: #DEE0E3 !important;
--bs-card-border-color: #dc3545 !important;
--bs-card-border-width: 2px !important;
margin: 5px;
}