/* general rules for the whole website */
html {
  font-size: 10px;
  height: 100%;
  width: 100%;
}

h1 {
  font-size: 5.84rem; 
}

h2 {
    font-size: 4.86rem;
}

h3 {
    font-size: 4.08rem; 
}

h4 {
    font-size: 3.10rem; 
}

h5 {
    font-size: 2.48rem; 
}

h6 {
    font-size: 1.92rem; 
}


body {
  scroll-behavior: smooth;
  background-color: rgb(255, 255, 255);
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  height: 100%;
  width: 100%;
  line-height: 2;
}

/* general title dimensions */


/* To which page does this rule refer to */
.btn {
  border: 0;
  font-size: 1.5rem;
  padding: 1rem;
  font-weight: 500;
  border-radius: 10px;
}

/* Buttons */
.btn-primary {
  background-color: var(--tertiary);
  color: var(--primary);
  border: 2px solid var(--tertiary);
}

.btn-primary:hover {
  background-color: var(--primary);
  color: var(--tertiary);
  border: 2px solid var(--tertiary);
  transition: all 0.3s ease-out;
}


/* Nav bar */
/* Save on home css */
.navbar {
  height: 5rem;
  background-color: var(--primary) !important; 
  border-bottom: 1px solid gray; 
}

.navbar-nav .nav-item {
  margin-right: 1rem;
}

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

.navbar-nav .nav-item .nav-link.active {
  color: var(--tertiary); 
}

.navbar-brand img {
  height: 3.5rem;
}

.modal-title img {
  width: 90%;
}

/* Nav bar app version */
/* Save on home css */
/* The modal window covers the full screen */
.modal-fullscreen .modal-content {
  height: 100vh;
  width: 100vw;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}


/* Footer section */
#footer {
  margin: auto;
  padding: 3rem 5vw;
  border-top: solid 1px grey;
  font-size: 1.2rem;
  color: var(--primary);
  background-color: var(--secondary);
  text-wrap: wrap;
  text-align: justify;
}

#footer a {
  text-decoration: underline;
  color: var(--primary);
}

#footer li {
  list-style: outside;
}

#footer p.title {
  font-size: 1.3rem;
  font-weight: 500;
}

/* Adjust the modal header and body */
.modal-header {
  flex: 0 0 auto;
}

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Desktop version */
@media (min-width: 768px) {
  html {
    font-size: 12px;
  }


}