/* Open Sans font: https://fonts.google.com/selection/embed */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');

/* body font */
.open-sans-normal {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* header font */
.domine-normal {
  font-family: "Domine", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

:root {
    --text-color: #070707;
    --header-color: #334DFF;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: calc(15px + 0.390625rem);
  color: var(--text-color);
  /*background-color: #32054eec; */
  background-color: #ecdbf7ec;
}

.main-container {
  /*
  background:repeating-conic-gradient(
    from 0deg at 80% 50%,
    #5691f580 0% 8.25%,
    #b338ff80 8.25% 16.5%,
    #f8305880 16.5% 25%
  ),
  repeating-conic-gradient(
    from 15deg at 50% 50%,
    #e856f580 0% 8.25%,
    #ff384c80 8.25% 16.5%,
    #e7f83080 16.5% 25%
  ),
  repeating-conic-gradient(
    from 0deg at 20% 50%,
    #f58356ff 0% 8.25%,
    #caff38ff 8.25% 16.5%,
    #30f88aff 16.5% 25%
  );
  */
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 1200px;  /* max webpage width in browser */
  width: 100%;
  margin: auto;       /* center webpage within browser */
  /* overflow-y: auto ;
   background-color: #dbbde5ec;
   */
}

/* if used locally, change class name */
.content-container {
    display: flex;
    justify-content: space-evenly;
    background-color: rgb(28, 81, 228);
}

/* if used locally, change class name */
.content-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 35vw;
    height: auto;         /* sets height to content height */
    background-color: rgb(5, 88, 12);    
}

.shadow {
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

 /* ======= HEADER STYLYES ======= */
.header-container {
    background-color: var(--header-color);
    position: relative;
    max-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem 0.5rem;
    z-index: 2;
    height: auto;
}

.logo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  text-align: center;
  align-items: center;
  color: var(--logo-color);
  height: auto;
}

.logo-img {
  padding: 2px;
}

.logo-title {
  font-family: "Domine", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 3rem;
  margin-left: 10px;
}

.mobile-title {
  display: none;
}

.align-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.footer-container {
  background-color: #9d05fcbb;
  margin-top: auto;   /* float footer to bottom */;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* mobile screens */
@media screen and (max-width: 480px) {
  .logo-title {
      display: none;
    }

  .mobile-title {
    display: block;
    font-family: "Domine", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    margin-left: 5px;
  }
}