/*General*/
body * {
  font-family: "Montserrat", sans-serif;
}

:root {
  /* Light Mode - Blue Theme */
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --nav-border: #000000;
  --nav-text: #000000;
  --brand-color: #4f21f3;
  /* Blue */
  --brand-hover: #490bda;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode - Red Theme */
    --bg-color: #000000;
    --text-color: #ffffff;
    --nav-border: #ffffff;
    --nav-text: #ffffff;
    --brand-color: #f44336;
    /* Red */
    --brand-hover: #d32f2f;
  }
}

html,
body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  background-color: var(--bg-color);
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: bold;
}

p {
  font-size: 18px;
  font-weight: 550;
}

ul li {
  border: none !important;
}

/*Containers*/

.mono-icon {
  color: #4f21f3;
  font-size: 3em;
}

@media (prefers-color-scheme: dark) {
  .mono-icon {
    color: #f44336;
    font-size: 3em;
  }
}

.image-border {
  border-style: solid;
  border-width: 4px;
  border-color: #4f21f3;
}

@media (prefers-color-scheme: dark) {
  .image-border {
    border-style: solid;
    border-width: 4px;
    border-color: #f44336;
  }
}

.image-section {
  height: 100vh;
  -moz-text-align: center;
  /*works on Firefox */
  -webkit-text-align: center;
  /*works on Safari and Google Chrome*/
  text-align: center;
  background-color: #262626;
  color: rgb(255, 255, 255);
  -moz-padding: 20px;
  /*works on Firefox */
  -webkit-padding: 20px;
  /*works on Safari and Google Chrome*/
  padding: 20px;
}

.image-section img {
  max-width: 60%;
  max-height: 60%;
  margin-top: 50px !important;
  object-fit: cover;
}

.icon-row {
  display: flex;
  align-items: center;
  /* This aligns them vertically in the center */
  gap: 15px;
  /* Adds even spacing between all items */
  padding-top: 10px;
  padding-bottom: 15px;
}

/* Ensure the image behaves like the icons */
.icon {
  display: block;
  width: auto;
}

.invert {
  display: block;
  width: auto;
  filter: brightness(0) saturate(100%) invert(16%) sepia(98%) saturate(7494%) hue-rotate(258deg) brightness(94%) contrast(102%);
}

@media (prefers-color-scheme: dark) {
  .invert {
    filter: brightness(0) invert(34%) sepia(66%) saturate(1860%) hue-rotate(338deg) brightness(95%) contrast(100%);
  }
}

.links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.links a {
  flex: 0 0 10%;
}

.icon-link {
  text-decoration: none;
  font-size: 48px auto;
  padding: 26px;
}

.content-container {
  width: 70%;
  margin: 0 auto;
}

.home {
  width: 80%;
  margin: 0 auto;
}

.home p {
  font-weight: bold;
}

.home h1 {
  font-size: 64px;
}

.contact p {
  font-size: 18px;
}

.contact a {
  font-size: 18px;
  text-decoration: none;
}

.html {
  width: 90%;
}

.w3-ul li {
  padding: 8px 0px;
  font-size: 18px;
  font-weight: 550;
}

/*Utilities*/

.w3-margin-top-2 {
  margin-top: 32px;
}

.w3-margin-top-4 {
  margin-top: 64px;
}

.w3-margin-top-20-percent {
  margin-top: 20%;
}

.w3-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.w3-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.nav-adaptive {
  border-color: var(--nav-border) !important;
  color: var(--nav-text) !important;
}

.brand-border {
  border-color: var(--brand-color) !important;
}

.brand-text-hover:hover {
  color: var(--brand-color) !important;
}

.brand-border-hover:hover {
  border-color: var(--brand-color) !important;
}

.brand-button {
  background-color: var(--brand-color) !important;
  color: white !important;
  transition: 0.3s;
}

.brand-button:hover {
  background-color: var(--brand-hover) !important;
}


/*Media queries*/
@media screen and (max-width: 1200px) {
  .home {
    width: 90%;
  }

  .content-container {
    width: 80% !important;
  }

  .download-text {
    display: none;
  }
}

@media screen and (max-width: 992px) {
  .home {
    width: 100%;
  }

  .home h1 {
    font-size: 48px;
  }
}

@media screen and (max-width: 600px) {
  .content-container {
    width: 100% !important;
  }

  .image-section {
    -moz-padding: 10px;
    /*works on Firefox */
    -webkit-padding: 10px;
    /*works on Safari and Google Chrome*/
    padding: 10px;
  }

  .links a {
    flex: 0 0 5% !important;
  }

  .home {
    text-align: center;
    width: 100%;
  }

  .home p {
    font-size: medium !important;
  }

  .home h1 {
    font-size: 32px;
  }

  .home h2 {
    font-size: 24px;
  }

  .w3-fixed {
    position: inherit;
  }

  .image-section {
    height: auto;
  }

  .image-section img {
    max-width: 80%;
    max-height: 80%;
  }

  .icon-link {
    font-size: 24px;
  }

  .w3-container,
  .w3-panel {
    padding: 0.01em;
  }

  .download-text {
    display: inline-block;
  }
}