/* Bootstrap Overrides */
/* Font options: Numans (from wordpress version), Avenir Next LT Pro, Bookman Old Style, Calisto MT, Cascadia Code, Century Gothic, Meiryo, Segoe UI, Times New Roman, Univers*/
:root {
  --bs-blue: #172a53;
  --bs-darkblue: #14213d;
  --bs-purple: #221753;
  --bs-yellow: #fca311;
  --bs-gray: #e5e5e5;
  --bs-dark: #0d1527;
  --bs-white: #ffffff;
  --bs-body-bg: #000000;
  --bs-body-font-size: 1.3rem;
  --bs-font-sans-serif: "century_gothicregular", "century_gothicregular2", "century_gothicbold", "century_gothicbold", "century_gothicitalic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  --bs-link-color: var(--bs-yellow);
  --bs-link-hover-color: #14213d;
  --bs-link-color-rgb: 246, 170, 28;
  --bs-link-hover-color-rgb: 20, 33, 61;
}

.navbar-nav .show>.nav-link,
.navbar-nav .nav-link.active {
  color: var(--bs-navbar-active-color);
}

.navbar {
  --bs-navbar-hover-color: var(--bs-yellow);
  --bs-navbar-active-color: var(--bs-yellow);
  --bs-navbar-brand-font-size: 1.3em;
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-blue);
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--bs-yellow);
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffca2c;
  --bs-btn-hover-border-color: var(--bs-yellow);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffcd39;
  --bs-btn-active-border-color: var(--bs-yellow);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--bs-yellow);
  --bs-btn-disabled-border-color: #ffc107;
  font-weight: bold;
}

.accordion {
  --bs-accordion-color: var(--bs-white);
  --bs-accordion-bg: var(--bs-dark);
  --bs-accordion-btn-color: var(--bs-white);
  --bs-accordion-btn-bg: var(--bs-blue);
  --bs-accordion-btn-focus-border-color: white;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-white);
  --bs-accordion-active-color: var(--bs-white);
  --bs-accordion-active-bg: var(--bs-purple);
}

.accordion-button {
  background-color: var(--bs-blue);
  color: var(--bs-white);
  font-size: large;
  font-weight: bold;
  padding: 2em;
}

.accordion-button:hover {
  background-color: var(--bs-gray);
  color: var(--bs-black);
}

/* // End bootstrap overrides */

/* Own CSS */

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-white);
  font-display: auto;
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-body-font-size);
}

h1 {
  font-size: 6rem !important;
  font-weight: bold;
}

h2:not(.h4),
h3,
.h3,
.h5,
.fa-desktop:not(.text-white) {
  color: var(--bs-dark);
  text-align: center;
}

h2:not(.h4),
h3:not(.h4),
.h3,
.h4.display-5,
.fa-desktop:not(.text-white) {
  font-weight: bolder !important;
}

h5 {
  color: var(--bs-dark);
  font-size: x-large;
}

.bg-darkblue {
  background-color: var(--bs-darkblue);
}

.bg-blue {
  background-color: var(--bs-blue);
}

.bg-gray {
  background-color: var(--bs-gray);
  color: black;
}

.text-white {
  color: var(--bs-white);
}

.text-black {
  color: var(--bs-black) !important;
}

.list-unstyled li a {
  color: var(--bs-black);
  text-align: center;
}

.list-unstyled li a:hover {
  color: var(--bs-yellow);
}

.mb-6 {
  margin-bottom: 5.9em;
}

.py-6 {
  padding: 5.9em 0;
}

.fa-solid {
  font-size: calc(1.275rem + 0.3vw);
  margin-right: 0.5rem;
}

::selection {
  color: var(--bs-darkblue);
  background: var(--bs-yellow);
}

/* Navigation */

nav {
  position: fixed !important;
}

.nav-brand {
  font-size: var(--bs-navbar-brand-font-size);
}

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

.nav-link {
  color: var(--bs-white);
  font-weight: bold;
}

.active {
  color: var(--bs-yellow);
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 2em;
  height: 2em;
}

.hamRotate.active {
  transform: rotate(45deg);
}

.hamRotate180.active {
  transform: rotate(180deg);
}

.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #000;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.ham8 .top {
  stroke-dasharray: 40 160;
}

.ham8 .middle {
  stroke-dasharray: 40 142;
  transform-origin: 50%;
  transition: transform 400ms;
}

.ham8 .bottom {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition: transform 400ms, stroke-dashoffset 400ms;
}

.ham8.active .top {
  stroke-dashoffset: -64px;
}

.ham8.active .middle {
  transform: rotate(90deg);
}

.ham8.active .bottom {
  stroke-dashoffset: -64px;
}


nav.active {
  background: var(--bs-white);
}

nav.active a:not(.dropdown-item) {
  color: var(--bs-dark);
}

nav.active a:hover {
  color: var(--bs-yellow);
}
/* End Navigation */

/* Footer */

.footer {
  background-color: #0d1527;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}

.text-yellow {
  color: var(--bs-yellow);
}

.text-yellow:hover {
  color: var(--bs-yellow);
}

.footer-link {
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-weight: normal;
}

/* End Footer */

/* Header */

header:not(.smallheader) {
  padding-top: 10em;
  padding-bottom: 7em;
}

.smallheader {
  padding-top: 5em;
}

.cover-img {
  background-attachment: scroll;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../files/img/space2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 5em;
}

/* End Header */

/* Top 4 white */

.text-start,
.fs-2 {
  color: var(--bs-white);
}

.fs-2 {
  text-align: left;
}

/* End Top 4 white */

/* Carousel */

.flickity-viewport {
  position: relative;
  transition: height 0.2s;
}

.carousel-cell {
  border-radius: 5px;
  counter-increment: carousel-cell;
  height: 35em;
  margin-right: 10px;
  object-fit: cover;
}

.flickity-page-dots .dot {
  background-color: var(--bs-white);
}

.carousel-caption {
  background-color: rgba(0, 0, 0, 0.712);
  color: var(--bs-white) !important;
  opacity: 0;
  transition: 500ms ease-in-out;
}

.carousel-cell:hover .carousel-caption {
  opacity: 1;
}

.flickity-button:focus {
  box-shadow: 0 0 0 5px var(--bs-yellow);
}

/* End Carousel */

/* About me */
.profile {
  border-radius: 2%;
  filter: grayscale(100%);
  object-fit: cover;
  transition-duration: 0.5s;
  width: 400px;
  height: 400px;
}

.profile-4 {
  width: 200px;
  height: 200px;
  text-align: center;
}

.profile:hover {
  filter: none;
}

.block {
  width: 75%;
  margin-left: 0.5rem;
  display: block;
}

.row-cols-1 .col-sm-12 {
  text-align: center;
}

/* Wordt maar 1x gebruikt? */
.text-margin-top {
  margin-top: 5.9em;
}

/* End About me */

/* Contact */
.bg-wavy {
  background-attachment: scroll;
  background-image: url("../files/img/wave.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 5em;
  padding-bottom: 5em;
}

.msg {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 400px;
}

/* End Contact */

/* Fractals */

#fractal-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  display: hidden;
}

#rain-canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* background-color: black; */
}

/* End Fractals */

@media only screen and (max-width: 767px) {

  h1,
  .h1 {
    font-size: 2.75rem !important;
    hyphens: auto;
    word-wrap: break-word;
  }

  h2,
  .h2 {
    font-size: 2.25rem !important;
  }

  h3,
  .h3 {
    font-size: 2rem !important;
  }

  h4,
  .h4 {
    font-size: 1.75rem !important;
  }

  h5,
  .h5 {
    font-size: 1.5rem !important;
  }

  h6,
  .h6 {
    font-size: 1.25rem !important;
  }

  .profile {
    width: 200px;
    height: 200px;
  }

  nav {
    color: var(--bs-dark);
    background-color: var(--bs-white);
  }

  .navbar-toggler {
    background-color: var(--bs-yellow) !important;
  }

  .navbar-brand,
  .dropdown,
  .nav-link {
    color: var(--bs-dark);
  }

  .navbar-brand:active {
    color: var(--bs-yellow);
  }

  .text-margin-top {
    margin-top: 2em;
  }

  .block {
    display: block !important;
  }
}

@media only screen and (max-width: 1200px) {
  .block {
    display: none;
  }
}

/* End Own CSS */