*, *:after, *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a:-webkit-any-link{
  text-decoration: none;
  color: #FFF;
}

:root {
  --main-bg-color: #fefefe;
  --hero-color: rgb(52, 68, 88);
  --hero-highlight: #F18B05;
  --hero-orange: #fd974f;
  --hero-orange-light: rgba(255, 255, 255, 0.25);
  --active-color: #2f9aef;
  --piano-color: #2f9aef;
  --guitar-color: #f0c229;
  --marimba-color: #f6843f;
  --sequencer-color: #f6843f;
  --bass-color: #ec5eb2;
  --drum-color: #86c44e;
  --sound-color: lightseagreen;
  --text-color: #30acac;
  --definitions-color: #996dd9;
  --header-bg-color: #2e303f;
  --mixer-track-pad: 10px;
  --error-color: #da575d;
  --main-font: 'Nunito', sans-serif;
  --title-font: 'Nunito Sans', sans-serif;
  --impact-font: 'Alegreya Sans', sans-serif;
  --impact-font-alt: 'Oleo Script', cursive;
  --nav-color: #414251;
  --main-border-radius-5: 5px;
  --main-border-radius-7: 7px;
  --gradient-315: linear-gradient(315deg, rgb(77,126,126),rgb(70,85,114));
  --main-box-shadow: 0px 15px 5px -10px rgb(50 50 93 / 25%), 0 30px 65px -30px rgb(0 0 0 / 0%);
  --project-box-shadow: 0px 15px 5px -10px rgb(50 50 93 / 25%), 0 30px 65px -30px rgb(0 0 0 / 0%);
  --background-pattern:radial-gradient(circle at top left, rgb(235,235,235) 0%, rgb(235,235,235) 10%, rgb(229, 229, 229) 10%, rgb(229, 229, 229) 18%, rgb(222, 222, 222) 19%, rgb(222, 222, 222) 21%, rgb(216, 216, 216) 22%, rgb(216, 216, 216) 23%, transparent 23%), radial-gradient(circle at top left,rgb(209, 209, 209) 24%, rgb(209, 209, 209) 66%,rgb(205, 205, 205) 67%, rgb(205, 205, 205) 75%,rgb(200, 200, 200) 74%, rgb(200, 200, 200) 75%,transparent 75%), radial-gradient(circle at top left,rgb(195, 195, 195) 74%, rgb(195, 195, 195) 84%,rgb(190, 190, 190) 85%, rgb(190,190,190) 85%,rgb(77,126,126) 85%,rgb(77,126,126) 86%,rgb(70,85,114) 93%, rgb(70,85,114) 100%);
  --alt-background-pattern: radial-gradient(circle at bottom right, rgb(235,235,235) 0%, rgb(235,235,235) 10%, rgb(229, 229, 229) 10%, rgb(229, 229, 229) 18%, rgb(222, 222, 222) 19%, rgb(222, 222, 222) 21%, rgb(216, 216, 216) 22%, rgb(216, 216, 216) 23%, transparent 23%), radial-gradient(circle at bottom right,rgb(209, 209, 209) 24%, rgb(209, 209, 209) 66%,rgb(205, 205, 205) 67%, rgb(205, 205, 205) 75%,rgb(200, 200, 200) 74%, rgb(200, 200, 200) 75%,transparent 75%), radial-gradient(circle at bottom right,rgb(195, 195, 195) 74%, rgb(195, 195, 195) 84%,rgb(190, 190, 190) 85%, rgb(190,190,190) 85%,rgb(77,126,126) 85%,rgb(77,126,126) 86%,rgb(70,85,114) 93%, rgb(70,85,114) 100%);
  --gray-background-pattern: radial-gradient(circle at 60% 60%, rgb(250, 250, 250) 0%, rgb(247, 247, 247) 6%,rgb(242, 242, 242) 6%, rgb(242, 242, 242) 15%,rgb(240, 240, 240) 15%, rgb(240, 240, 240) 47%,rgb(235, 235, 235) 47%, rgb(235, 235, 235) 54%,rgb(232, 232, 232) 54%, rgb(232, 232, 232) 56%,rgb(229, 229, 229) 56%, rgb(229, 229, 229) 90%,rgb(223, 223, 223) 90%, rgb(223, 223, 223) 100%);
  --background-admin-pattern:  linear-gradient(67.5deg, rgb(215, 215, 215) 0%, rgb(215, 215, 215) 46%,rgb(189,186,186) 46%, rgb(189,186,186) 49%,rgb(181, 181, 181) 49%, rgb(181, 181, 181) 56%,rgb(164, 164, 164) 56%, rgb(164, 164, 164) 61%,rgb(146, 146, 146) 61%, rgb(146, 146, 146) 75%,rgb(129, 129, 129) 75%, rgb(129, 129, 129) 84%,rgb(112, 112, 112) 84%, rgb(112, 112, 112) 100%),linear-gradient(22.5deg, rgb(215, 215, 215) 0%, rgb(215, 215, 215) 46%,rgb(189,186,186) 46%, rgb(189,186,186) 49%,rgb(181, 181, 181) 49%, rgb(181, 181, 181) 56%,rgb(164, 164, 164) 56%, rgb(164, 164, 164) 61%,rgb(146, 146, 146) 61%, rgb(146, 146, 146) 75%,rgb(129, 129, 129) 75%, rgb(129, 129, 129) 84%,rgb(112, 112, 112) 84%, rgb(112, 112, 112) 100%),linear-gradient(112.5deg, rgb(215, 215, 215) 0%, rgb(215, 215, 215) 46%,rgb(189,186,186) 46%, rgb(189,186,186) 49%,rgb(181, 181, 181) 49%, rgb(181, 181, 181) 56%,rgb(164, 164, 164) 56%, rgb(164, 164, 164) 61%,rgb(146, 146, 146) 61%, rgb(146, 146, 146) 75%,rgb(129, 129, 129) 75%, rgb(129, 129, 129) 84%,rgb(112, 112, 112) 84%, rgb(112, 112, 112) 100%),linear-gradient(90deg, rgb(231, 231, 231),rgb(195, 195, 195));
}

.hidden{
  display: none;
}

html, body { height: 100%; max-width: 100vw; box-sizing: border-box; overflow-x:hidden;}

body {
  background-color: var(--main-bg-color);
  font-family: var(--main-font);
  font-weight: 200;
  margin: 0;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  padding: 0;
}

main {
  padding-top: 80px;
  min-height: 100%;
}

nav .top-nav-wrapper{
  display: flex;
  width: 100%;
  max-width: 1920px;
  position: relative;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}
nav #burger {
  display: none;
}

nav .top-nav-logo-wrapper{
  display: flex;
  /* margin-left: 20px; */
  align-items: center;
}

nav.top-nav {
  background-color: #FFF;
  position: fixed;
  width: 100%;
  height: 55px;
  color: #2b344f;
  z-index: 900;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  opacity: 0.95;
  padding: 0px 60px 0px 60px;
}
nav.top-nav a.home-logo {
  background-image: url('../images/landing/logo-blue.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
  width: 50px;
  height: 50px;
}
nav.top-nav a.home-logo:hover {
  background-size: 70%;
  background-image: url('../images/landing/logo-blue.svg');
  background-position: center;
}
nav.top-nav a {
  min-width: 60px;
  min-height: 36px;
  text-decoration: none;
  font-weight: 700;
  color: #2B344F;
  font-size: 17px;
  line-height: 36px;
  margin: 0 15px;
  border-radius: 6px;
  user-select: none;
  text-align: center;
  --webkit-user-select: none;
  background-size: 100% 0px;
  transition: background-size 0.125s ease-in-out;
}
nav.top-nav a:hover {
  background-image: linear-gradient(120deg, rgba(58, 85, 140,0.75) 0%, rgba(121, 153, 217, 0.85) 100%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 90%;
  cursor: pointer;
}
nav.top-nav a.home-link {
  font-size: 20px;
  font-weight: 700;
  margin-left: 0px;
}
nav.top-nav .expander {
  flex: 1;
}

.btn.login-link, .btn.logout-link{
  border-radius: 18px;
  background-color: #465572;
  color: #FFF;
  padding: 0px 16px;
  width: 120px;
  background-image: none !important;
  transition: background-color 0.175s ease-in-out;
}
.btn.login-link:hover, .btn.logout-link:hover{
  background-color: rgb(43, 52, 79, 0.9);
}
.btn.login-link.hidden, .btn.logout-link.hidden, .btn.join-link.hidden{
  display: none;
}

h1{
  font-family: var(--impact-font);
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 1px;
}

h2{
  font-family: var(--main-font);
  font-size: 30px;
  font-weight: 600;
}

ul.big-list { list-style: none; } /* Remove default bullets */

ul.big-list li::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f35a";
    color: rgb(58, 85, 140);
    font-weight: 800; /* Optional tweak */
    margin-right: 10px;
    font-size: 20px;
}

main.content section {
  display: block;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0px auto;
  color: rgb(70, 85, 114);
  height: auto;
  max-width: 1920px;
  box-shadow: var(--main-box-shadow);
  margin-bottom: 25px;
}

main.content section.no-border{
  border-bottom: 0px;
}
main.content section.page {
  display: block;
  background-color: white;
  margin: 2rem auto;
  padding: 2rem 5rem 5rem 5rem;
  /*max-width: 95vw;*/
  max-width: min(1070px, 90vw);
  box-shadow: var(--main-box-shadow);
}
main.content section.page .content-wrapper{
  background-color: white;
}
main.content section.page a {
  color: var(--hero-orange);
  text-decoration: none;
  font-weight: 600;
}
main.content section.page a:hover { text-decoration: underline; }
main.content .column-wrapper{
  display: flex;
  width: 90vw;
  max-width: 1920px;
  min-height: 500px;
  margin: 0px auto;
  justify-content: center;
  align-items: center;
}
main.content .column-wrapper.slim{min-height: 300px;padding-left: 45px;padding-right: 35px;}
main.content section .column {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 20px;
  z-index: 1;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  flex-wrap: wrap;
}

main.content section .column h1, h2 {
  color: #3a558c;
   /* Will override color (regardless of order) */
  -webkit-text-fill-color: #FFF;
  margin: 0;
  line-height: 100%;
  font-weight: 600;
  font-family: var(--impact-font);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
main.content section .column h1.secondary, h2.secondary {
  margin-left: 0.5em;
  color: rgb(215 217 223);
}
main.content section .column h1.secondary.dark, h2.secondary.dark {
  color: var(--hero-color);
}
main.content section .column h1.tertiary, h2.tertiary {
  margin-left: 1.0em;
}
main.content section .two-columns {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 40px 0px;
  z-index: 1;
  justify-content: center;
}
main.content section .column p, ul.big-list {
  font-size: 16px;
  font-weight: 700;
}

ul.big-list li {
  line-height: 1.20em;
  margin-bottom: 25px;
}
main.content section .column p.slim{
  max-width: 350px;
  text-align: left;
}
main.content section .column ul.big-list {
 padding-inline-start: 48px;
 min-width: 430px;
}
main.content section .section-header {
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  position: relative;
  margin: 1em 0 1.5em 0;
}

main.content section .section-header.light{
  color: var(--main-bg-color);
}

@media only screen and (max-width: 800px) {
  main.content.about section.page{
    padding: 15px;
  }

  main.content.about section.page p{
    text-align: justify;
  }
  main.content.about section.page table{
    max-width: 95vw;
  }
  main.content.about section.page tr{
    max-width: 95vw;
  }
  main.content.about section.page td{
    max-width: 50vw;
    word-wrap: break-word;
  }

  nav.top-nav{
    width: 100vw;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  nav .top-nav-wrapper{
    width: 100vw;
    max-width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  nav #burger {
    display: block;
    font-size: 18pt;
    margin: 0 15px;
  }
  nav #burger:hover {
    opacity: 0.8;
    cursor: pointer;
  }
  /*nav .top-nav-logo-wrapper a.home-link, nav .top-nav-logo-wrapper .btn {
    display: none;
  }*/
  nav  #page-nav.top-nav-logo-wrapper {
    /*display: none;*/
    display: flex;
    position: absolute;
    right: -180px;
    top: 437px;
    flex-direction: column;
    align-items: center;
    align-content: center;
    background-color: #fdfdfd;
    box-shadow: 0px 15px 5px -10px rgb(50 50 93 / 25%), 0 30px 65px -30px rgb(0 0 0 / 0%);
    padding: 15px;
    border-radius: 5px;
    transform: translateY(-155%);
    transition: all 0.25s ease-in-out;
    opacity: 0;
  }
  nav #page-nav.show {

    right: 0;
    
    opacity: 1;
  }
  nav.top-nav .expander{
    display: none;
  }
  .btn.hidden {
    display: none !important;
  }
}

@media only screen and (max-width: 320px) {

}