/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@font-face {
  font-family: "Berlin Sans FB";
  src: url("/BRLNSR.woff");
  src: url("/BRLNSR.TTF");
}

@font-face {
  font-family: "Berlin Sans FB Demi Bold";
  src: url("/BRLNSDB.woff");
  src: url("/BRLNSDB.TTF");
}

@font-face {
  font-family: "Berlin Sans FB Bold";
  src: url("/BRLNSB.woff");
  src: url("/BRLNSB.TTF");
}

.overlay {
  mix-blend-mode: overlay;
}

.dropshadow {
   filter: drop-shadow(-3px 3px 0px black);
}

.drop-blurry {
   filter: drop-shadow(0px 0px 25px rgba(0,37,71,0.3));
}

h1 {
  background: -webkit-linear-gradient(black, #041f33, #96d1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px white;
  font-family: "Berlin Sans FB Bold";
}

h2 {
  background: -webkit-linear-gradient(black, #041f33, #96d1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px white;
  font-family: "Berlin Sans FB";
}

body {
  color: #002547;
  font-family: "Berlin Sans FB";
  font-size: 28pt;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

.bottomleft {
  position: fixed;
  bottom: 0px;
  left: 0px;
}

.bottomright {
  position: fixed;
  bottom: 0px;
  right: 0px;
}

.energy {
  background-image: linear-gradient(to bottom, #C0E8F7, 10%, #6DC4F9, #758CF9, 90%, #9DB3FA);
  border: 3px solid #002648;
  border-radius: 75px;
  padding-left: 1ch;
  padding-right: 1ch;
  filter: drop-shadow(-9px 9px 0px #284F7C);
}

.banner {
  mix-blend-mode: normal;
  background-image: linear-gradient(to bottom, black, #041f33, 80%, #96d1ff);
  border: 5px solid #002648;
  border-radius: 25px;
  filter: drop-shadow(0px 0px 18px rgba(0,37,71,0.4));
}


.background {
    background-image: url("/Square with dots.png");
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.background2 {
    background: linear-gradient(to right, #bfe3ff, 5%, transparent, 95%, #bfe3ff),
                linear-gradient(to bottom, #bfe3ff, 5%, rgba(103, 180, 239, 1), 95%, #bfe3ff);
    width: 100% - 1ch;
    height: 100% - 1ch;
    border: 3px solid #002648;
    border-radius: 25px;
    padding-left: 2ch;
    padding-right: 2ch;
    filter: drop-shadow(0px 0px 18px rgba(0,37,71,0.4));
    
}

.backgroundz {
    background:
                linear-gradient(to right, #bfe3ff, 5%, transparent, 95%, #bfe3ff),
                linear-gradient(to bottom, #bfe3ff, 5%, rgba(103, 180, 239, 1), 95%, #bfe3ff);
    width: 50%;
    height: 50%;
    border: 3px solid #002648;
    border-radius: 25px;
    padding-left: 2ch;
    padding-right: 2ch;
    filter: drop-shadow(0px 0px 18px rgba(0,37,71,0.4));
    
}


.icon {
  filter: drop-shadow(0px 0px 8px rgba(255,255,255,0.2));
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 10fr 1fr;
  justify-content: center;
  align-content: center;
  text-align: start;
  grid-auto-rows: minmax(auto, auto);
  grid-auto-columns: minmax(auto, auto);
}

.sub-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 1ch
}

@media (min-width: 1000px) {
  .sub-grid {grid-template-columns: 3fr 6fr;
             gap: 2ch;}
  
  }
  
  .art-grid {
  display: grid;
  gap: 1ch
}

@media (min-width: 1000px) {
  .art-grid {grid-template-columns: 1fr 1fr 1fr;
             gap: 1ch;}
  
  }
  
  


.flexbox-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex: 1 1 auto;
}

.flexbox-container img {
  max-width: 90%;
    height: auto;
    flex-wrap: nowrap;
    /* Maintain aspect ratio */
    flex: 1 1 auto;
    /* Allow images to grow and shrink */
    object-fit: cover;
}

.flexbox-container a {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  height: auto;
  /* Maintain aspect ratio */
  flex: 1 1 auto;
  /* Allow images to grow and shrink */
  object-fit: cover;
}

.flexbox-container h1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: auto;
  /* Maintain aspect ratio */
  flex: 1 1 auto;
  /* Allow images to grow and shrink */
  object-fit: cover;
}

.flex-item {
display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: auto;
  /* Maintain aspect ratio */
  flex: 1 1 auto;
  /* Allow images to grow and shrink */
  object-fit: cover;

}