/* fonts import Google fonts  */

/* DM Serif - header font  */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap");

/* Google sans code - general font */
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap");

/* global style */
:root {
    --primary-font: "DM Serif Text", serif;
    --secondary-font: "Google Sans Code", monospace;
    --primary-color: #feb234; /* Gold */
    --secondary-color: #e5e5e5; /* Grey */
    --highlight-color: #ffffff; /* white */
    --highlight-color-dark: #111c36; /* Navy */
    --black-color: #000000; /* black */
}

body {
    font-family: var(--secondary-font);
    /* font color is set to navy while screen is white. */
    color: var(--highlight-color-dark);
}

h1,
h2,
h3 {
    font-family: var(--primary-font);
    color: var(--primary-color);
}

h2 {
    margin-bottom: 2rem;
}

p {
    font-family: var(--secondary-font);
    color: var(--secondary-color);
}

body {
    margin: 0%;
    background-color: var(--black-color);
    background-image: url(../images/header-background-image.jpg);
}

/* body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
    margin: 0%;
    background-color: var(--black-color);
    background-image: url(../images/header-background-image.jpg);
}

main {
  flex: 1;
} */

/* header styling  */

.header-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 20%;
    background-color: var(--black-color);
    background-repeat: no-repeat;
    background-size: cover;
}

.header-text {
    font-size: 4rem;
    text-align: center;
}

.header-slogan {
    font-size: small;
    text-align: left;
    padding-left: 20px;
}

/* Nav bar styling  */
#nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 20%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--black-color);
    background-image: url(../images/star-banner-resized.jpg);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23feb234' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-link {
    font-family: var(--secondary-font);
    color: var(--primary-color);
}

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

#nav-bar-active {
    font-family: var(--secondary-font);
    color: var(--primary-color);
}

#nav-bar .logo {
    width: 27px;
}

/* stress response section  */

.display-system-stress {
    font-size: 250%;
}

.card {
    background-color: #000000;
}

.card-title {
    color: var(--primary-color);
    text-align: center;
}

.card-text {
    color: var(--secondary-color);
}

#stress-responses card {
    margin-bottom: 2rem;
}

.card-img-top {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    max-width: 30%;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Grounding video section */

.astronaut {
    margin-top: 2rem;
    width: 30%;
}

#grounding-video {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
}

iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

/* Resources page  */
.btn {
    background-color: black;
    color: var(--primary-color);
}

/* footer styling */
footer {
    color: var(--primary-color);
    background-color: var(--black-color);
    height: auto;
    padding-top: 300px;
    padding: 10px;
}

#social-networks {
    text-align: center;
    padding: 20px 0;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
}

#social-networks i {
    font-size: 160%;
    padding: 5%;
    color: #3a3a3a;
}