/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Comfortaa:wght@300;400&family=Raleway&display=swap");

:root {
    --color-theme-primary: #ca1f7b;
    --color-theme-secondary: #8f06e4;
    --color-theme-dark-secondary: #600896;
    --color-theme-accent: #06e494;
    /*font-family*/
    font-size: 16px;
    --color-theme-bg-light: #efefef;
    --color-theme-navbar-bg-light: #fff;
    --color-theme-navbar-bg-dark: #242424;
    --color-theme-component-bg-light: #fff;
    --color-theme-component-bg-dark: #303030;
    --color-theme-bg-dark: #121212;
    --color-theme-link-light: #004da0;
    --color-theme-link-dark: #1e8aff;
    --color-theme-accent-navbar: #038756;
}

/*font-family: 'Architects Daughter', cursive;*/
/*font-family: 'Comfortaa', cursive;*/
/*font-family: 'Raleway', sans-serif;*/

body {
    margin: 0;
    padding: 0;
}

main {
    margin-top: 4rem;
    padding-left: 10px;
    padding-right: 10px;
    font-family: 'Architects Daughter', cursive;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
}

a:visited {
    color: var(--color-theme-link, #0056b2);
}

button {
    border: none;
    border-radius: 5px;
    height: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    width: max-content;
    background-color: var(--color-theme-accent);
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 14px;
    margin: 8px;
}

button:hover {
    filter: brightness(0.7);
}

.navbar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    background-color: var(--color-theme-component-bg-light);
    font-family: 'Comfortaa', sans-serif;
    z-index: 1;
}
.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.navbar-item {
    width: 100%;
    /*border-top: 1px solid var(--color-theme-primary);*/
    border-bottom: 1px solid var(--color-theme-primary);
    border-left: none;
    border-right: none;
    align-items: center;
    height: 3rem;
    align-items: center;
    /*border-right: 1px solid transparent;*/
}
.navbar-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    /*margin: 4px;*/
    align-items: center;
    justify-content: center;
}
.navbar-link:hover {
    /*border-top: 1px solid var(--color-theme-primary);*/
    background-color: var(--color-theme-primary);
}
.logo {
    font-size: 20px;
    margin-left: auto;
    transition: font-size 0.25s ease-in-out;
}
.logo:hover {
    /*animation-duration: 1s;*/
    /*animation-name: wiggle;*/
    font-size: 26px;
}
.navbar a {
    color: var(--color-theme-accent);
    /*padding: 4px;*/
}
.has-dropdown:hover .dropdown {
    opacity: 100;
    pointer-events: auto;
    display: flex;
}
.dropdown {
      list-style: none;
      position: relative;
      opacity: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      transition: opacity .15s ease-out;
      padding: 0;
      display: none;
}
.dropdown-item {
    height: 2.5rem;
    text-align: center;
}
.navbar-search {
  /*display: inline-flex;*/
  align-items: center;
  border-bottom: 1px solid var(--color-theme-primary);
  height: 100%;
}
.navbar-search-button {
  background: transparent;
  border: none;
  color: currentColor;
  /* font-size: inherit; */
  padding: 1rem;
  font: inherit;
  display: inline-block;
}
.navbar-search-button:hover {
  background-color: var(--color-theme-primary);
}
.navbar-search-button:active,
.navbar-search-button:focus {
  display: inline-block;
}

/*.navbar-search-wrapper > .navbar-search-input-component:not(:active):not(:active ~ .navbar-search-input-component) {*/
/*  display: block;*/
/*}*/

.navbar-search-input {
  border: none;
  display: none;
  background-color: transparent;
  height: calc(3rem - 8px);
  /* margin: 8px; */
  border-bottom: 1px solid var(--color-theme-accent-navbar);
  /* margin-top: 8px; */
  /* margin-right: 8px; */
  /* margin-bottom: 8px; */
  /* margin-left: 8px; */
  /*color: var(--color-theme-accent-navbar);*/
}
/*.nav-search-icon:focus-within {*/
/*    display: none;*/
/*}*/

.navbar-search-input:focus,
.navbar-search-input:active {
  outline: none;
  display: block;
  border-bottom: 1px solid var(--color-theme-accent-navbar);
}

.navbar-search-input:focus,
.navbar-search-input:focus-within ~ .navbar-search-button {
  display: inline-block;
}

.navbar-search-wrapper {
  display: inline-flex;
  height: calc(100% - 0.5px);
  border-bottom: 1px solid var(--color-theme-primary);
}

.navbar-search-wrapper:focus-within .navbar-search-input {
    display: block;
}

.navbar-search-focusable:focus-within ~ .navbar-search-input,
.navbar-search-focusable:focus-within ~ .navbar-search-button {
  display: block;
}
.navbar-search-icon {
  height: 2rem;
  padding: 8px;
  /*border-bottom: 1px solid var(--color-theme-primary);*/
  /*display: inherit;*/
}

.banner {
  position: relative;
  top: 3rem;
  background-color: lightblue;
  color: black;
  font-family: Raleway, sans-serif;
  padding: 0.5rem 1rem;
  font-size: 14px;
  border-bottom: 2px solid steelblue;
  z-index: 0;
}

.banner-warn {
  background-color: #ff4b5b;
  position: relative;
  top: 3rem;
  color: white;
  font-family: Raleway, sans-serif;
  padding: 0.5rem 1rem;
  font-size: 14px;
  border-bottom: 2px solid steelblue;
  z-index: 0;
}
.banner-content {
  display: flex;
}

.banner-text {
  height: 100%;
  align-self: center;
}

.banner-action {
  margin-left: auto;
}
.banner-button {
  background-color: transparent;
  color: currentColor;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  letter-spacing: .0892857143em;
  font-size: 0.875rem;
  line-height: inherit;
  border: none;
}

.banner-button:hover {
  background-color: #8ac7dbb3;
  transition: background-color 0.25s;
}

.card-container {
  background-color: var(--color-theme-component-bg-dark);
  min-height: 15rem;
  max-width: 12rem;
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  display: inline-flex;
  height: 100%;
}

.card-link {
  text-decoration: none;
  box-sizing: border-box;
  padding: 8px;
}

.card-text {
  width: 100%;
}
.card-content {
  width: 100%;
  padding: 8px;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  box-sizing: border-box;
}

.footerContainer {
  height: 75px;
  width: 100%;
  background-color: #434343;
  bottom: 0px;
  border-top: 4px solid #06e494;
  font-size: 12px;
  font-family: 'Comfortaa', sans-serif;
}
.footerContainer .foot {
  text-align: center;
  color: white;
  top: 50%;
  left: 50%;
  position: static;
  /*transform: translate(-50%, -50%);*/
}
  
.footerContainer .foot  a {
  text-align: center;
  color: white;
}

    
@media (prefers-color-scheme: dark) {
    body {
        background: var(--color-theme-bg-dark);
    }
    hr {
        border: 1px solid white;
    }
    .navbar {
        background: var(--color-theme-navbar-bg-dark);
    }
    .dropdown {
        background-color: var(--color-theme-navbar-bg-dark);
    }
    :root {
        color: white;
        --color-theme-link: var(--color-theme-link-dark);
        --color-theme-accent-navbar: var(--color-theme-accent);
    }
    .snackbar-link {
        color: #92c7ff;
    }
    a {
        color: var(--color-theme-link-dark);
    }
    
    .navbar a {
        color: white;
    }
    .navbar-search-input {
      color: white;
    }
    button {
        background-color: var(--color-theme-component-bg-dark);
        border: 1px solid hsl(277deg 90% 31%);
        color: white;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background: var(--color-theme-bg-light);
    }
    hr {
        border: 1px solid black;
    }
    .navbar {
        background: var(--color-theme-navbar-bg-light);
    }
    .dropdown {
        background-color: var(--color-theme-navbar-bg-light);
    }
    :root {
        color: black;
        --color-theme-link: var(--color-theme-link-light);
        
    }
    .snackbar-link {
        color: #92c7ff;
    }
    a {
        color: var(--color-theme-link-light);
    }
    .navbar a {
        color: black;
    }
    .navbar-search-input {
      color: black;
    }
    button {
        background-color: var(--color-theme-component-bg-light);
        border: var(--color-theme-secondary);
        filter: brightness(0.9);
        color: black;
    }
}

@keyframes wiggle {
    from {
        transform: rotateY(0deg);
    }
    
    25% {
        transform: rotateY(-70deg);
    }
    
    50% {
        transform: rotateY(70deg);
    }
    
    75% {
        transform: rotateY(-45deg);
    }
    
    to {
        transform: rotateY(0deg);
    }
}

@media only screen and (max-width: 600px) {
  .navbar-search-wrapper {
    display: inline-flex;
  }
  
}

@media only screen and (min-width: 600px) {
  .navbar-search-wrapper {
    display: inline-flex;
  }
}