@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: normal;
  src: url(./fonts/Spectral/Spectral-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: normal;
  src: url(./fonts/Spectral/Spectral-Italic.ttf) format('truetype');
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: bold;
  src: url(./fonts/Spectral/Spectral-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: normal;
  src: url(./fonts/Jost/Jost-400-Book.ttf) format('truetype');
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Spectral', serif;
  background: linear-gradient(323.89deg, #1C2C44 6%, #101B2D 60%);
  color: #ECF1F8;
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  margin: 0.5em 0;
}


h4 {
  font-size: inherit;
  font-weight: 500;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.btn {
  padding: 0.2em 1em;
  border-radius: 0.2em;
  text-decoration: none;
  background: #223a58;
  transition: all 300ms;
}

.btn:hover {
  background: #2a476b;
}

.btn-secondary {
  border-bottom: 1px solid #28426C;
  color: #ECF1F8;
  text-decoration: none;
  transition: all 300ms;

}

.btn-secondary:hover {
  color: #fff;
  border-color: #fff;
}

.container {
  margin: 0 auto;
  max-width: 1024px;
  padding: 0 1em;
}

.contribute {
  margin-bottom: 1em;
  padding-bottom: 5em;
}

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container > * {
  margin-right: 2em;
}
.flex-container > *:last-child {
  margin-right: 0;
}

.full-height {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.intro-content {
  padding: 2em 0;
  display: flex;
  justify-content: center;
  align-items: center;
}





.intro-content > img {
  margin-right:3em;
  min-width: 258px;
  height: auto;
  filter: drop-shadow(1px 10px 30px rgba(0,0,0,0.5));
  /* animation: schatten 3s ease-in-out; */
  object-fit: contain;
}

@keyframes schatten {
  0% { filter: drop-shadow(100px 10px 800px rgba(0,0,0,1))
  }
  100% {  filter: drop-shadow(1px 10px 30px rgba(0,0,0,0.5));

  }
  
  

}

.intro-content h1 {
  display: flex;
  font-family: 'Jost', sans-serif;
  align-items: center;
  line-height: 1.1em;
  font-size: 1.2em;
  font-weight: 300;
  margin: 0 0 0.7em 0;

}

.intro-content h1 svg {
  margin-right: 0.5em;
}

.intro-content h2 {
  font-size: 2.2em;
  line-height: 1.3em;
  margin: 0 0 0.7em 0;
}

.store-links {
  margin-top: 1em;
  display: flex;
  justify-items: start;
}

.store-links a {
  margin: 0;
  opacity: 0.9;
  transition: all 300ms;

}

.store-links a:hover {
  opacity: 1;
}


#footer {
  padding: 2em 0;
  background-color: #fff;
  color: #172640;
  font-size: 0.9em;
}

#footer p:first-child {
  margin-top: 0;
}

.support-logos {
  border-top: 1px solid #ECF1F8;
  border-bottom: 1px solid #ECF1F8;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  margin: 1em 0;
  padding: 1em 0;
}

.support-logos > div{
  flex: auto;
  align-self: flex-start;
  padding-right: 1.3em;
}

.support-logos img {
  width: 100%;
}

  .support-logos > div:last-child{
  padding-right: 0;
  max-width: 500px;
}

.footer-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.footer-menu a{
  text-decoration: none;
  color: inherit;
  margin-right: 0.7em;
  

}

.footer-menu a:hover {
  color: #5e718d;
}

.footer-menu-icon {
  display: block;
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .intro-content, .flex-container {
    flex-direction: column;
  }
  .intro-content > img {
    margin-right: 0em;
    margin-bottom: 2em;
    height: 45vh;
    width: auto;
  }
  .intro-content h2 {
    font-size: 1.5em;
  }
  .intro-content h2 svg {
    width: 35px;
  }
  .support-logos > div{
    width: 100%;
    margin: 0.5em 0;
  }
  .support-logos > div:first-child{
    max-width: 200px;
  }
  .support-logos > div:nth-child(even){
    padding-right: 0;
  }





}