@charset "UTF-8";

:root {
  --main-bg-color: lightgray;
  --main-font-color: black;
  --main-padding: 12px;
  --secondary-font-color: black;
  --btn-bg-color: aquamarine;
  --btn-font-color: aquamarine;
  --btn-border-color: aquamarine;

}

body {
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    margin:0;
    padding:0;
    overflow-x:hidden;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.navbar, .navbar-light, .navbar-brand, .navbar-nav, .nav-link, .dropdown-menu, .dropdown-item {
  background-color: lightgray;
  color: black;
}

.dark-mode {
    background-color: black;
    color: lightgray;
}

.inverted {  
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.meditate {
  box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0) !important;
  z-index: 1 !important;
  position: relative !important;
}

.navbar-brand {
    padding-left: 15px;
}

form {
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
    width: 50%;
}

.form-group {
    padding-bottom: 6px;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color:aquamarine;
    border: none;
    color: var(--secondary-font-color);
    margin-bottom:20px;
    margin-top: 5px;
}

.btn.btn-primary:active {
    background-color: var(--main-bg-color);
    border: none;
    color: aquamarine;
    border-style:solid;
    border-width:1px;
    border-color:aquamarine;
}

.main {
    padding-left: var(--main-padding);
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    transition: transform 2s, filter 1s ease-in-out;
    transform-origin: center center;
    filter: brightness(50%);
  }

  .column img:hover {
    filter: brightness(100%);
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }

  h1 {
      font-size: 1.4em;
      padding-top: var(--main-padding);
      padding-bottom: var(--main-padding);
  }

  p {
      font-size: 0.9em;
  }

  footer {
    background-color: var(--main-bg-color);
  }

  .copyright {
      color:black;
  }

  nav {
    padding: 5px;
    text-align: right;
}