.app-bar-logo{
    height: 2rem;
    width: auto;
}
.app-bar-logo path{
    fill:white;
}
.app-bar-logo--text{
    height: auto;
    width: 100%;
    max-width:200px;
}
svg:not(.list-svg) path{
    fill:white;
}
.image-columns{
  grid-template-columns: repeat(3, 1fr);
  display:grid;
  gap:10px;
}
html{
  overflow-x: hidden;
  scroll-behavior: smooth;
}
main{
  padding-bottom: 20px;
}
*:focus{
  border:none;
  border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
.hero{
    background-image: url("assets/images/hero/hero.png");
    background-position: top; 
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
    height: calc(80vh + 120px);
    padding-bottom: 50px;
    border-radius: 0 0 20% 20%;
    color:white;
    display:flex;
    text-align: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    z-index:2;
    padding-right: 20px;
    padding-left: 20px;
    margin-bottom: 80px;
    max-height: 450px;
}
.hero section{
    display:flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    text-align:center;
    align-self: center;
    width: 100%;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 70vh;
  height: calc(80vh + 20px);
  max-height: 470px;
  background: var(--mdc-theme-primary);
  filter: opacity(0.5);
  z-index: -1;
  overflow: hidden;
  border-radius: 0 0 45% 20%;
  transform: translateX(0) ;
}
.hero svg{
    height: 5rem;
    width: auto;
    margin: 0.5rem;
}
.hero-main {
  opacity: 90%;
}

.mdc-top-app-bar{
 background: none !important;
}
.mdc-top-app-bar__title{
    animation-name: logo-slide-in;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    padding-left: 0 !important;
}
@keyframes logo-slide-in{
    0%{transform: translateX(-100%); margin:-35px;}
    100%{transform: none; margin:0;}
}
.card-group{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    justify-content: center;
}

@media only screen and (max-width: 712px) {
  .card-group{
    grid-template-columns: 100%;
    gap:2px;
  }
  .card-group .mdc-card__primary-action{
    flex-direction: row;
    padding:0;
    gap:10px;
  }
  .card-group .card-icon{
    min-width: 50px;
    height: 50px;
    font-size: 30px;
  }
  .card-group .mdc-card, .card-group .mdc-card:active, .card-group .mdc-card:hover{
    margin:0 !important;
    box-shadow: none;
    animation: none !important;
    transform: none !important;
    background: none !important;
  }
  .mdc-top-app-bar__title{
    display:none;
    animation: none !important;
  }
  .about p{
    font-size:14px;
  }
}
.card-group>*{
  width: 100%;
}
main{
  overflow:hidden;
  width: 100vw;
}
.mdc-drawer path{
  fill: rgba(0,0,0,.6) !important;
}
.mdc-drawer__header{
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
.home-card{
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: flex-start;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 16px;
}
.home-card h4{font-weight: bold;}
.mdc-card:hover:not(:active):not(.no-animation){
  transform:translateY(-10px);
  animation-name: card-up;
  animation-duration: 0.25s;
}
.mdc-card:not(:hover):not(.no-animation), .mdc-card:active:not(.no-animation){
  animation-name: card-down;
  animation-duration: 0.25s;
}
@keyframes card-up{
  from{transform:none;}
  to{transform:translateY(-10px);}
}
@keyframes card-down{
  from{transform:translateY(-10px)}
  to{transform:none;}
}
.about{
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('assets/images/slideshow/2020-team.JPG');
  text-align:center;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color:white;
  border-radius: 30px;
  padding: 30px;
  margin-bottom: 20px;
  font-weight: 550;
  text-shadow: 0 0 5px black;
}
.collapsible{
  display:none;
  scroll-margin-top: 100px;
}
h1, h2, h3, h4, h5{
  font-weight: 400 !important;
  font-family: sans-serif;
}
.mdc-card{
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.28), 0px 1px 3px 0px rgba(0,0,0,.24) !important;
}
.sub-card{
display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
  flex-wrap:wrap;
  padding: 10px;
}
.sub-card .material-icons{
padding: 10px;
vertical-align: top;
}
.sponsor-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, 75px);
  grid-auto-rows: 40px;
  justify-content: left;
  align-items: stretch;
  grid-auto-flow: row dense;
  gap:10px;
  margin-bottom: 30px;
}
.sponsor{
  width:100%;
  border-radius: 10px;
  display:flex;
  flex-direction: column;
  text-align: center;
  color:white;
  height: 100%;
  justify-content: center;
  padding:15px;
  user-select:none;
  cursor: pointer;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.3), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 1px 3px 0px rgba(0,0,0,.22) !important;
}

.sponsor img {
  object-fit: contain;
}

.sponsor span{
  margin-top:10px;
}
.sponsor p{
  font-size: 0.75rem;
}
.sponsor.sponsor--highest-tiers{
  grid-row: span 4;
  grid-column: span 4;
}
.sponsor.sponsor--high-tiers{
  grid-row: span 3;
  grid-column: span 3;
}
@media only screen and (max-width:512px){
  .sponsor.sponsor--high-tiers, .sponsor.sponsor--highest-tiers{
    grid-column: 1/-1 !important;
  }
  .image-columns{
    grid-template-columns: 1fr;
  }
}
.sponsor.sponsor--mid-tiers{
  grid-area: span 2 / span 2;
}
.sponsor.sponsor--low-tiers{
  grid-area: span 2 / span 1;
}
.sponsor img{
  max-width: 100%;
  max-height: 100%;
}
.image-columns img{
border-radius: 4px;
}
.robotimg{
position: relative;
margin-bottom: 20px;
cursor:pointer;
}
.robotimg.onloaded{
animation-name: imgload;
animation-duration: 0.5s;
}
@keyframes imgload{
from{transform:translateY(-100px); filter:opacity(0%)}
to{transform:none; filter:opacity(100%)}
}

.robotimg span{
position: absolute;
  left: 10px;
  bottom: 10px;
  font-size:1.5rem;
  font-weight: bold;
  color:white;
  text-shadow: 0 0 10px black;
}
#scheduleWrapper iframe{
width: 100%;
height: 70vh;
border:none;
}
#scheduleWrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#contact{
  width: 100%;
}
.contact-list .mdc-list-item__graphic.material-icons{
font-size: 40px;
}
*:not(.contact-list) .mdc-list-item__graphic{
margin-right: 10px;
}
.mdc-circular-progress__circle-clipper {
  display: inline-flex !important;
}
hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(0,0,0,.1);
}
.row>div{
padding: 20px;
}

.icon-group{
display:flex;
flex-wrap:wrap;
justify-items: center;
justify-content: center;
gap:20px;
align-items:center;
text-align: center;
}
.icon-group .card-icon{
width: 50px;
height: 50px;
font-size:30px !important;
margin:5px;
}
.icon-group h4{
font-size:20px;
  }
/* Material Icons*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(assets/fonts/icons.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
.card-icon{
  font-size: 2.5rem;
  background-color: var(--mdc-theme-primary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: white;
  margin-bottom: 20px;
  vertical-align: sub;
  width: 75px;
  height: 75px;
  user-select: none;
}
.mdc-drawer{
  background-color: var(--mdc-theme-surface, white);
}
.mdc-top-app-bar:not(.top){
  background-color: var(--mdc-theme-primary, #7DC834) !important;
}
@media (prefers-color-scheme: dark) {
  html{
    --mdc-theme-surface:#212121 !important;
    color:white;
  }
  .mdc-drawer .mdc-list-group__subheader{
    color:white !important;
  }
  .app-bar-logo--text path{
    fill:white !important;
  }
  body{background-color: black; color:white;}
  .mdc-list-item, .mdc-list-item__graphic, .mdc-list-item__secondary-text, .mdc-list-item__text, .mdc-dialog__content, .mdc-dialog__title{
    color:white !important;
  }
  .mdc-top-app-bar:not(.top){
    background-color: #313131 !important;
  }
  .mdc-tab:not(.mdc-tab--active) .mdc-tab__icon, .mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{
    color:white !important;
  }
  .mdc-drawer{
    background-color: var(--mdc-theme-surface) !important;
  }
  .sponsor-group{
    color:black;
    background-color: #b9b9b9 !important;
  }
  .mdc-chip{
    background-color: #414141 !important;
    color:white !important;
  }
}
.killed{
  animation-name: inconceivable !important;
  visibility: hidden;
}
@keyframes inconceivable{
  from{transform: none; filter: opacity(1); visibility: visible;}
  to{transform: scale(200%); filter: opacity(0);visibility: visible;}
}
.resources-card{
  margin-top: 15px;
}
.resources-card .mdc-card__primary-action {
	display: flex;
	flex-direction: row;
  justify-content: center;
	box-sizing: border-box;
  align-items: center;
	position: relative;
	outline: none;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
  background:var(--mdc-theme-primary);
  color:white;
	overflow: hidden;
  padding:10px;
}
.resources-card .card-icon{
  width:75px;
  height: 75px;
  margin:0;
}
.resources-text{
  max-width: 75%;
}
#signup p{
  text-align:left;
}
.first-logo{
  height:30px;
  margin-right:5px;
  vertical-align: sub;
}
.link-bar{
  display:flex;
  flex-direction: row;
  overflow-x: scroll;
  list-style-type: none;
  padding-bottom:10px;
  margin:0;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  scroll-behavior: smooth;
}
.link-bar>*{
  margin-left:5px;
  margin-right:5px;
}
.nav-chip{
  border-radius: 30px;
  padding:7px;
  font-weight: 400;
  white-space:nowrap;
}
.resources-chip{
  background-color: white;
  text-decoration: none;
  color:var(--mdc-theme-primary) !important;
}
.resources-chip a{
  text-decoration: none;
  color:var(--mdc-theme-primary) !important;
}
.nav-chip.active{
  background-color: rgba(255, 255, 255, 0.3);
}
.nav-chip:not(.resources-chip) a{
  text-decoration: none;
  color:white;
}
.section{
  scroll-margin-top: 100px;
}
.mdc-top-app-bar{
  overflow: hidden;
}
.link-bar::-webkit-scrollbar {
  display: none;
}
.mdc-list{
  text-align: start;
}
.go-card>.mdc-card__primary-action{
  text-align: start;
  padding:10px;
  display:flex;
  justify-content: center;
  padding-right:40px;
}
.go-card .icon{
  font-family: "Material Icons";
  position: absolute;
  right:20px;
  font-size: 20px;
}
.sponsor-preview{
  display:flex;
  margin:10px;
  flex-flow: row wrap;
  overflow: hidden;
  height: 40px;
  text-overflow: ellipsis;
}
.sponsor-preview img{
  margin:5px;
  height:30px;
}
.segment-control{
  border-radius: 50px;
  border: 5px solid white;
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.head.top .segment-control{
  border-radius: 50px;
  border: 5px solid var(--mdc-theme-primary);
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.segment-control--button{
  border-radius: 20px;
  width: 100%;
  padding:5px;
  text-align: center;
  text-decoration: none;
  color:white;
  padding-right:7px;
}
.head.top .segment-control--button, .head:not(.top) .segment-control--button.active{
  color:var(--mdc-theme-primary);
}
.head.top .segment-control--button.active{
  background-color: var(--mdc-theme-primary);
  color:white;
}
.segment-control--button.active{
  background-color: white;
}
.list-item-segment-control{
  width:unset !important;
}

.inconceivabow {
  margin: 5px;
}

.arvo {
  font-family: 'Arvo';
}

.floating-spinner{
  z-index: 4;
  transform: translateY(-35vh);
}

.inconceivaborder {
  border-style:solid; 
  border-color:rgb(125,200,52); 
  border-width: 5px; 
  border-radius: 10px; 
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12) !important;
}

#worlds-banner {
  padding: 16px 10%;
}
#worlds-banner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-image: url("assets/images/misc/circuit_board.png");
  background-size: 100% auto;
  opacity: 20%;
}
#worlds-banner > * {
  z-index: 2;
}
#worlds-banner > h3 {
  font-weight: 600 !important;
}
#revTeam {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 1rem;
  margin-bottom: 2rem;
}
#revTeam > img {
  height: 250px;
}