@import url('https://fonts.googleapis.com/css?family=Montserrat');

:root {
   /* --deep-purple: #2b0063; */
   --deep-purple: #3e008f;
   --light-purple: #6f00ff;
   --mid-purple: #5402bf;
   --purple-gradient: linear-gradient(to right, var(--deep-purple) , var(--light-purple));

   --deep-grey: #595959;
   --mid-deep-grey: #7c7c7c;
   --light-grey: #a6a6a6;
   --mid-grey: #8c8c8c;
   --grey-gradient: linear-gradient(to right, var(--deep-purple) , var(--light-purple));

   --deep-yellow: #ff9f00;
   --mid-yellow: #ffbf00;
   --light-yellow: #ffd500;
   --yellow-gradient: linear-gradient(to right, var(--deep-yellow) , var(--light-yellow));

   --deep-orange: #ff5f00;
   --mid-orange: #ff7f00;
   --light-orange: #ff9f00;
   --orange-gradient: linear-gradient(to right, var(--deep-orange) , var(--light-orange));

   --deep-red: #ff0000;
   --mid-red: #ff2f2f;
   --light-red: #ff5f5f;
   --red-gradient: linear-gradient(to right, var(--deep-red) , var(--light-red));

   --deep-green: #00a600;
   --mid-green: #00c600;
   --light-green: #00e600;
   --green-gradient: linear-gradient(to right, var(--deep-green) , var(--light-green));

   --deep-blue: #1a184f;
   --mid-blue: #00235c;
   
   --red-team: #ff5454;
   --blue-team: #758efa;
 }


*
{
   margin: 0;
   padding: 0;
   font-family: "Montserrat", sans-serif;
   box-sizing: border-box;
   scroll-behavior: smooth;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

.landing
{
   background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
   height: 100vh;
   width: 100vw;
   background-size: cover;
   background-position: center;
   overflow: hidden;
}

.menuwrap{
   background-color: black;
   background-size: cover;
   background-position: center;
   display: block;
   height: auto;
   min-height: 100% !important;
}

.subpage
{
   clear: both;
   background-color: black;
   height: 25vw;
   background-size: cover;
   background-position: center;
}

.main-nav
{
   /*overflow: hidden;*/
   padding: 20px 10px;
   width: 100%;
   top: 0;
   background-color: rgba(0,0,0,0.2);
   transition: background-color 300ms linear, padding 300ms;
   z-index: 5;
   position: fixed;
   display: block;
}

.main-nav-right
{
   float: right;
   z-index: 10;
}

.main-nav-left{
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
}

.main-nav-left img {
   position:absolute;
   top:0;
   bottom:0;
   margin:auto;
   vertical-align:middle;
   height: 30px;
   display: inline-block;
}

.main-nav.scrolled
{
   background-color: rgba(0, 0, 0, 0.845) !important;
   transition: background-color 500ms linear;
}

/*.main-nav .dropdown
{
   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   text-decoration: none;
   font-size: 13px;
   border-radius: 9px;
   margin-right: 3px;
   margin-left: 3px;
   transition: color 1000ms ease, border-color 400ms ease;
   z-index: 1000;
}*/

.main-nav a
{
   float: left;
   display: inline-block;
   color: #f2f2f2;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
   font-size: 13px;
   border: 2px solid transparent;
   border-radius: 9px;
   margin-right: 3px;
   margin-left: 3px;
   transition: color 1000ms ease, border-color 400ms ease;
   z-index: 1000;
}

.main-nav a.active
{
   border-radius: 9px;
   border: 2px solid white;
   z-index: 1000;
}

.main-nav a:hover
{
   border-radius: 9px;
   border: 2px solid #1bb6c7;
   color: #1bb6c7;
   transition: ease;
   transition-duration: 400ms;
   z-index: 1000;
}

/*.dropdown-list {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1000;
}

.dropdown .dropdown-list {
   display: block;
}*/

button {
   all: unset;
}

.dropdown {
   float: left;
   overflow: visible;
   z-index: 10000;
   position: relative;
}

.dropdown .dropbtn {
   float: left;
   display: inline-block;
   color: #f2f2f2;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
   font-size: 13px;
   border: 2px solid transparent;
   border-radius: 9px;
   margin-right: 3px;
   margin-left: 3px;
   transition: color 1000ms ease, border-color 400ms ease;
   z-index: 1000;
}

 .navbar a:hover, .dropdown:hover .dropbtn {
   background-color: transparent;
 }

 .dropdown-list {
   display: block;
   position: absolute;
   margin: auto;
   background-color: rgba(0,0,0,0.5);;
   z-index: 15;
   visibility: hidden;
   opacity: 0;
   transition: visibility 0.3s, opacity 0.3s linear;
   z-index: 100000;
   border-radius: 9px;
   left: 50%;
   transform: translateX(-50%);
   width: 105%;
 }

 .dropdown-list a {
   float: none;
   color: white;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: center;
 }


.dropdown-list a:hover {
   background-color: transparent;
 }

 .dropdown:hover .dropdown-list {
   display: block;
   visibility: visible;
   opacity: 1;
 }


.icon {
  display: none;
  border: 2px solid transparent;
  z-index: 6;
}

.icon:hover {
  border: 2px solid transparent;
}

@media screen and (max-width: 619px) {
  .main-nav a {
    display: none;
  }
  .main-nav .dropdown {
   display: none;
 }
  a.icon {
      float: left;
      display: inline-block;
      color: #f2f2f2;
      text-align: center;
      padding: 10px 10px;
      text-decoration: none;
      font-size: 13px;
      border: 2px solid transparent;
      margin-right: 3px;
      margin-left: 3px;

      float: right;
      display: block !important;
      position: fixed;
      margin-top: 0px;
      right: 5px;
      top: 15px;
      margin-right: 0px;
      margin-left: 0px;
  }
  .main-nav{
     transition: none;
     background-color: transparent;
     position: fixed;
  }
}

@media screen and (min-width: 620px){
   .main-nav {
      display: block !important;
   }
   .main-nav a {
      display: block;
   }
}

@media screen and (max-width: 620px) {
  .main-nav.responsive {
     position: relative;
   }
  .main-nav-right.responsive {
     float: none;
     margin: auto;
   }
  a.icon {
     float: right;
     display: block;
     position: fixed;
     margin-top: 0px;
     right: 5px;
     top: 15px;
  }
  .main-nav.responsive a {
      float: none;
      margin: auto;
      display: inline-block;
      text-align: center;
      display: table;
  }
  .main-nav.responsive .dropdown {
   float: none;
   margin: auto;
   display: inline-block;
   text-align: center;
   display: table;
}
}

p{
   font-family: "Montserrat", sans-serif;
   font-size: 15px;
   color: black;
}

a{
   font-family: "Montserrat", sans-serif;
   font-size: 15px;
   color: black;
}

.landing .hero{
   position: relative;
   width: 100vw;
   top: -65%;
}

video {
   clear: both;
   background-color: black;
   background-size: cover;
   background-position: center;
   height: 0vw;
   min-width: 100vw;
   min-height: 100%;
   transform: translateX(calc((-100% + 100vw) / 2)) scale(1.4);
   filter: brightness(78%) blur(7px);
}

.subpage .hero{
   position: relative;
   width: 100vw;
   top: 45%;
}


body {
   background-color: black;
}

h1{
   color: white;
   font-size: 8vw;
   text-align: center;
}

h2{
   color: white;
   text-align: center;
}

h3{
   color: white;
   text-align: center;
}

.time {
   background-color: #0366fc;
   border-radius: 1000px;
   font-size: 0.9vh;
   padding: 2px;
   vertical-align:middle;
   margin-bottom: 0.3vh;
   padding-left: 5px;
   padding-right: 5px;
   display: inline-block;
}

.span-red {
   background-color: #ff0000 !important;
}

.span-bubble {
   background-color: #0366fc;
   border-radius: 1000px;
   font-size: 0.9vh;
   padding: 2px;
   vertical-align:middle;
   margin-bottom: 0.2vh;
   padding-left: 5px;
   padding-right: 5px;
   display: inline-block;
   float: right;
   color: white;
}

#announcement_title {
   background-image: var(--purple-gradient);
   border-radius: 1000px;
   border: var(--light-purple) solid 0.2vw;
   padding: 1vw 2vw 1vw 2vw;
}

.invisible {
   visibility: hidden;
   opacity: 0;
   transition: all 200ms;
}

.visible {
   visibility: visible;
   opacity: 1;
   transition: all 200ms;
}

.bigTextContainer h2 {
   position: relative;
   margin-top: 5%;
   margin-bottom: 5px;
   z-index:1;
   color:#fff;
   text-align:center;
   width:100%;
   font-size: 2vw;
}

.bigTextContainer h3 {
   position: relative;
   z-index:1;
   color: #1bb6c7;
   font-size: 8vw;
   text-align:center;
   width:100%;
}

.bigTextContainer{
   width: 90%;
   background-color: transparent;
   border-radius: 30px;
   margin: auto;
   padding-top: 5%;
}

.textWithBlurredBg{
   width:100%;
   height:100%;
   display:inline-block;
   margin: auto;
   position:relative;
   display:block;
   text-align: center;
   transition: all 300ms;
}

.textWithBlurredBg img{
   width: 100%;
   height: 100%;
   border-radius:10px;
   opacity: 0.45;
}

.textWithBlurredBg:hover img{
   filter: blur(4px) brightness(70%);
   transition: all 0.5s ease;
}

.textWithBlurredBg :not(img){
   position: absolute;
   top: 30%;
   z-index:1;
   color:#fff;
   text-align:center;
   width:100%;
   font-size: 2vw;
}

.textWithBlurredBg h3{
   top: 50%;
}

.column {
  background-color: black;
  float: left;
  width: 33.33%;
  transition: 0.3s;
  padding: 5px;
}

.halfcol {
  background-color: black;
  float: left;
  width: 50%;
  transition: 0.3s;
  padding: 5px;
  margin-bottom: 2%;
}

#halfcolcontainer {
   width: 77vw; 
   display: inline-block;
   background-color: var(--mid-blue);
   border-radius: 2vh;
   border-style: solid;
   border-width: 0.3vw;
   border-color: var(--mid-blue);
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   overflow: hidden;
   margin-left: 1%;
   margin-top: 0.2vh;
   display: none;
}

.smolcol {
   background-color: black;
   float: left;
   width: 50%;
   transition: 0.3s;
   padding: 5px;
   margin-bottom: 2%;
}

@media screen and (max-width: 992px) {
  .column {
    width: 50%;
    transition: 0.3s;
  }
  .halfcol{
     width: 100%;
     transition: 0.3s;
  }
  .bigTextContainer h2{
     font-size: 4vw;
  }
  .bigTextContainer h3{
     font-size: 16vw;
  }
  .textWithBlurredBg h2{
     font-size: 3vw;
  }
  .main-nav-left img {
     display: none;
  }
}

.subheader h1{
   font-size: 4vw;
}
.subheader h2{
   font-size: 2vw;
}

.subheader p {
   text-align: center;
   color: white;
   font-size: 20px;
   margin-left: 5%;
   margin-right: 5%;
}

.imgcenter{
   text-align: center;
}

.buttons {
   display: flex;
   justify-content: center;
   align-items: center;
   transition: ease 0.3s;
   height: fit-content;
}

.buttonw {
   margin: auto;
   /*margin-top: calc(20px + 0.5%);*/
   margin-top: calc(30px);
   text-align: center;
   cursor: pointer;
}

.button_absolute {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100vw;
   margin-left: calc(50vw);
   height: 3px;
   background-color: rgb(130, 130, 130);
}

.buttonw.left{
   margin-right: 5px;
}

.buttonw.right{
   margin-left: 5px;
}

.buttonw.center{
   margin-left: 5px;
   margin-right: 5px;
}

.buttonw a {
   position: relative;
   border-radius: 9px;
   background-color: transparent;
   border: 2px solid white;
   color: white;
   font-size: 20px;
   transition: 400ms;
   padding: 10px 10px;
   text-decoration: none;
}

.subheader a {
   text-align: center;
   color: white;
   font-size: 20px;
}

.buttonw a:hover {
   border: 2px solid #1bb6c7;
   color: #1bb6c7;
   font-size: 20px;
   transition: 400ms;
}

@media screen and (max-width: 750px) {
   .subheader h1{
      font-size: 37.5px;
   }
   .subheader h2{
      font-size: 15px;
   }
}

@media screen and (min-width: 750px) {
   .subheader p{
      /*font-size: 2.666667vw;*/
   }
   .buttonw a {
      /*padding: 1.3333%;
      font-size: 2.666667vw;*/
   }
   .buttonw a:hover {
      /*font-size: 2.666667vw;*/
   }
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    transition: 0.3s;
  }
  .textWithBlurredBg h2{
     font-size: 6vw;
  }
  .buttonw.left {
     margin-right: 0;
  }
  .buttonw.right {
      margin-left: 0;
  }
  .buttons {
      display: table;
      margin: auto;
      transition: ease 0.3s;
   }
}


@media screen and (min-width: 1800px) {
  .subpage {
     height: 540px;
  }
  .subpage .hero h1{
     font-size: 150px;
  }
  .subheader h1 {
     font-size: 75px;
  }
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.vidcontainer{
   position: relative;
   width: 85vw;
   height: calc(85vw * 680.4/1200);
   margin: auto;
   padding-bottom: 28.35%;
}

.vidcontainer iframe{
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 20px;
   z-index: 1;
   padding: 1px;
}

iframe {
  margin: auto;
  width: 60%;
  height: 100vh;
  border: 3px solid #1bb6c7;
  padding: 10px;
  display: block;
}

.iframe-simple {
   margin: auto;
   border: none;
   padding: 0;
   transition: opacity 0.3s ease-in-out;
 }

.iframe-transparent {
   /* smooth transition */
   transition: opacity 0.3s ease-in-out;
   /* make iframe transparent */
   opacity: 0;
}

.halfteams {
   vertical-align: top;
   width: 39.5%;
   display: inline-block;
   /* height: 96.4vh; */
}

.bracket {
   vertical-align: top;
   width: 79.5%;
   display: inline-block;
   height: 96.4vh;
   z-index: 9999;
}

.round {
   vertical-align: top;
   display: inline-block;
   width: 24.5%;
}

.smolmatches {
   vertical-align: top;
   width: 20%;
   display: inline-block;
   height: 96.4vh;
}

.teamslot {
   padding-left: 2%;
   width: 100%;
   color: white;
   font-size: 2.5vh;
   display: flex;
   align-items: center;
}

.rank {
   width: 14%;
   display: inline-block;
   transition: all 300ms;
}

.team {
   margin-left: 0;
   width: 24%;
   display: inline-block;
   transition: all 300ms;
}

.w-l-t {
   width: 19%;
   display: inline-block;
   transition: all 300ms;
}

.WP {
   width: 11%;
   display: inline-block;
   transition: all 300ms;
}

.AP {
   width: 11%;
   display: inline-block;
   transition: all 300ms;
}

.SP {
   width: 14%;
   display: inline-block;
   transition: all 300ms;
}

.avgscore {
   width: 18%;
   display: inline-block;
   transition: all 300ms;
}

.totalscore {
   width: 18%;
   display: inline-block;
   transition: all 300ms;
}

.highscore {
   width: 18%;
   display: inline-block;
   transition: all 300ms;
}

.wideskills {
   width: 18%;
   display: inline-block;
   transition: all 300ms;
}

.skills {
   width: 12%;
   display: inline-block;
   transition: all 300ms;
}

.divider {
   position: absolute;
   top: 3.5vh;
   left: 0 ; /*calc(39.6vw - 2.5px);*/
   width: 5px;
   height: 96.4vh;
   background-color: rgb(0, 35, 92);;
}

@media screen and (min-width: 600px) {
  .vidcontainer{
     width: 1200px;
     height: 680.4px;
     padding-bottom: 0;
  }
}

.horiz-div {
   height: 4px;
   width: 50vw;
   margin: auto;
   background-color:  #1bb6c7;
   transition: all 300ms;
}

.inputform{
   margin-top: 30px;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
   transition: all 300ms;
}

.inputform input{
   display: block;
   margin: auto;
   width: 100%;
   border: none;
   background-color: black;
   border-bottom: 2px solid gray;
   outline: none;
   color: grey;
   font-size: larger;
   transition: all 300ms;
}

.inputform input:focus{
   border-bottom: 2px solid #1bb6c7;
   color: #1bb6c7;
   transition: all 300ms;
}

.inputform input:focus::placeholder{
   color: #65bfc98a;
   transition: all 300ms;
}

.center_button {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 50%;
   z-index: 99;
   transition: all 300ms;
}

.match_title_card {
   margin-top: 5px;
   /* background-color: #242424; */
   border-radius: 5px;
   margin-left: 1vw;
   margin-right: 1vw;
   padding-left: 2%;
   /* width: 100%; */
   color: white;
   font-size: 2.5vh;
   display: flex;
   align-items: center;
   transition: all 300ms;
}

.match_card {
   margin-top: 1vh;
   padding-top: 0.1vh;
   background-color: #242424;
   border-radius: 1vh;
   height: 8.3vh;
   margin-left: 1vw;
   margin-right: 0vw;
   padding-left: 2%;
   /* width: 100%; */
   color: white;
   font-size: 2.0vh;
   /* display: flex; */
   align-items: center;
   
   border: 0.2vh solid grey;
   /* add shadow */
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
   transition: all 300ms;
}

.match_card p {
   transition: all 300ms;
}

.match_card p span {
   font-size: 2.0vh;
   float:right;
   transition: all 300ms;
}

.bracket_match_card {
   margin-top: 4vh;
   width: 15vw;
   height: 8vh;
   transition: all 300ms;
}

.qf {
   margin-top: 16vh;
   transition: all 300ms;
}

.sf {
   margin-top: 40vh;
   transition: all 300ms;
}

.loss {
   opacity: 65%;
   transition: all 300ms;
}

.bracket_entry {
   border-radius: 8px;
   margin-left: 1vw;
   margin-right: 1vw;
   padding-left: 2%;
   padding-top: 0;
   color: white;
   font-size: 1.6vh;
   align-items: center;
   border-width: 2px;
   border-color: white;
   height: 3vh;
   vertical-align: middle;
   line-height: 3vh;
   transition: all 300ms;
}

.bracket_red {
   background-color: #cc3333;
   transition: all 300ms;
}

.bracket_blue {
   background-color: #3333cc;
   transition: all 300ms;
}

.bracket_entry p {
   font-size: 1.5vh;
   color: white;
   margin-top: auto;
   margin-bottom: auto;
   transition: all 300ms;
}

.bracket_entry p span {
   float:right;
   transition: all 300ms;
}

.bracket_match_title {
   height: 2vh;
   color: white;
   margin-left: 1vw;
   font-size: 1.5vh;
   transition: all 300ms;
}

/* Customize the label (the container) */
.container {
   font-size: larger;
   color: grey;
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
 /* Hide the browser's default checkbox */
 .container input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
 }

 /* Create a custom checkbox */
.checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 25px;
   width: 25px;
   background-color: #eee;
   transition: all 300ms;
   border-radius: 100px;

 }
 
 /* On mouse-over, add a grey background color */
 .container:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
 /* When the checkbox is checked, add a blue background */
 .container input:checked ~ .checkmark {
   background-color: #2196F3;
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
 /* Show the checkmark when checked */
 .container input:checked ~ .checkmark:after {
   display: block;
 }
 
 /* Style the checkmark/indicator */
 .container .checkmark:after {
   left: 9px;
   top: 5px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }

.announcement {
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   backdrop-filter: blur(10px);
   background-color: rgba(0,0,0,0.5);
   color: white;
   font-size: 2.5vh;
   /* center text */
   text-align: center;
   /* vertical align */
   vertical-align: middle;
   z-index: 1000;
}

.smallannouncement {
   padding-left: 0.7vw;
   vertical-align: top;
   width: 100%;
   /* display: inline-block; */
   height: 3.5vh;
   font-size: 1.4vh;
   z-index: 9999;
   /* make all animations slide in from the left */
   animation: slidein 0.5s;
   overflow:hidden;
   white-space:nowrap
}

.smallannouncementitem {
   margin-top: 0.3vh;
   background-color: var(--deep-purple);
   /* make pill shape */
   border-radius: 100px;
   width: max-content;
   height: max-content;
   padding: 0.4vh;
   padding-left: 10px;
   padding-right: 10px;
   margin-left: 5px;
   border: 0.2vh solid var(--light-purple);
   /* make inline block */
   /* display: inline-block; */
   animation: slidein 0.5s;
   display: inline-block;
}

.special_smallannouncement_color {
   background-color: var(--deep-grey);
   border: 0.2vh solid var(--light-grey);
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
   visibility: hidden; /* Hidden by default. Visible on click */
   min-width: 250px; /* Set a default minimum width */
   /* margin-left: -125px; Divide value of min-width by 2 */
   background-color: #333; /* Black background color */
   color: #fff; /* White text color */
   text-align: center; /* Centered text */
   border-radius: 2px; /* Rounded borders */
   padding: 16px; /* Padding */
   position: fixed; /* Sit on top of the screen */
   z-index: 1; /* Add a z-index if needed */
   /* left: 50%; Center the snackbar */
   top: 30px; /* 30px from the bottom */
   left: 50%;
   transform: translateX(-50%);
 }
 
 /* Show the snackbar when clicking on a button (class added with JavaScript) */
 #snackbar.show {
   visibility: visible; /* Show the snackbar */
   /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
   However, delay the fade out process for 2.5 seconds */
   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }
 
 /* Animations to fade the snackbar in and out */
 @-webkit-keyframes fadein {
   from {top: 0; opacity: 0;}
   to {top: 30px; opacity: 1;}
 }
 
 @keyframes fadein {
   from {top: 0; opacity: 0;}
   to {top: 30px; opacity: 1;}
 }
 
 @-webkit-keyframes fadeout {
   from {top: 30px; opacity: 1;}
   to {top: 0; opacity: 0;}
 }
 
 @keyframes fadeout {
   from {top: 30px; opacity: 1;}
   to {top: 0; opacity: 0;}
 }
 
 .text-danger-glow {
   color: #ff4141;
   /* text-shadow: 0 0 20px #f00, 0 0 30px #f00, 0 0 40px;  #f00, 0 0 50px #f00, 0 0 60px#f00, 0 0 70px #f00, 0 0 80px #f00; */
 }
 
 .blink {
   animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
 }
 @keyframes blinker {  
   from { opacity: 1; }
   to { opacity: 0; }
 }

 .sent-message {
   width: 40vw;
   /*center div in parent*/
   margin: 0 auto;
   margin-top: 2vh;
   border: grey 1px solid;
   border-radius: 0.5vw;
   text-align: center;
 }

 .past-message-container {
   height: 100vh;
   width: 50vw;
   overflow: scroll;
   margin: 0 auto;
   border: 0.5vh solid grey;
   border-radius: 2vh;
   padding: 1vh;
}

.match-col-container {
   display: inline-block;
   /* margin: auto; */
   width: 100vw;
}

.match-col {
   margin-top: 2vh;
   display: inline-block;
   width: 48vw;
   height: 60vh;
   vertical-align: top;
   border-radius: 2vh;
   overflow: hidden;
   margin-left: 0.5vw;
   margin-right: 0.5vw;
}

.match-info h1 {
   font-size: 8vh;
}

.match-info h2 {
   font-size: 4vh;
}

.match-info {
   width: 100%;
   height: 100%;
   /* background-image: var(--yellow-gradient); */
   /* border: 0.5vh solid var(--light-orange); */
   overflow: hidden;
   border-radius: inherit;
   background-color: #222222;
   /* text-align: center; */
}

.move-info {
   display: block;
   width: 100%;
   /* height: 100%; */
   background-image: var(--orange-gradient);
   transform: translate(0, -150vh);
}

.move-info h1 {
   font-size: 8vh;
}

.small-move-info {
   display: inline-block;
   width: 45vh;
   /* height: 10vh; */
   /* padding-left: 1vw;
   padding-right: 1vw; */
   border-radius: 5vh;
   background-color: var(--mid-orange);
   height: 5vh;
   overflow: hidden;
   z-index: 1000 !important;

   /* left: 50%;
   transform: translateX(-50%); */

   /* text-align: center; */

   /* margin: 0 auto; */
   margin-left: -30vw;
   margin-right: -30vw;
}

.ahead-in-queue {
   /* border: 0.5vh solid var(--light-orange);
   border-radius: 10vh; */
   /* color: var(--light-orange); */
   /* background-color: var(--deep-orange); */
   border-radius: 10vh;
   padding: 0.8vh;
   width: "fit-content";
   margin: 0 auto;
   margin-bottom: 0.5vh;
}


#remind {
   margin: 1px auto;
   margin-top: 1vh;
   width: 97vw;
   height: 35vh;
   backdrop-filter: blur(2px);
   color: white;
   /* center text */
   text-align: center;
   /* vertical align */
   vertical-align: middle;
   z-index: 1000;
   display: inline-block;
   background-image: var(--green-gradient);
   border-radius: 2vh;
}

#remind h1 {
   font-size: 8vh;
}

#remind h2 {
   font-size: 4vh;
}

#announcements-drawer {
   margin: 1px auto;
   margin-top: 1vh;
   width: 97vw;
   height: 35vh;
   backdrop-filter: blur(2px);
   color: white;
   /* center text */
   text-align: center;
   /* vertical align */
   vertical-align: middle;
   z-index: 1000;
   display: inline-block;
   background-image: var(--purple-gradient);
   border-radius: 2vh;
}

#announcements-drawer h1 {
   font-size: 8vh;
}

#announcements-drawer h2 {
   font-size: 4vh;
}

#announcements-drawer h3 {
   font-size: 2.5vh;
}

.announcement-in-drawer {
   width: 30vw;
   height: 24vh;
   margin-left: 1vw;
   margin-right: 1vw;
   display: inline-block;
   border-radius: 2vh;
   border: 0.5vh white solid;
   vertical-align: top;
   text-overflow: ellipsis;
   overflow: hidden;
   text-align: left;
   padding: 1vh;
}

#particles-js {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 99vh;
   z-index: -1;
}

.big-team {
   font-size: 8vh;
   transform-origin: 50% 100%;
   display: inline-block;
   /* line-height: 1em; */
   height: 10vh;
}

.small-match {
   display: inline-block;
   white-space:nowrap;
   width: 30%;
   text-align: center;
}

.larger-match {
   display: inline-block;
   white-space:nowrap;
   width: 50%;
   text-align: left;
}

.small-team {
   font-size: 3vh;
   transform-origin: 50% 100%;
   display: inline-block;
   line-height: 1em;
   height: 2.5vh;
}

.blue {
   color: var(--blue-team);
}

.red {
   color: var(--red-team);
}

/* .letter {
   transform-origin: 50% 100%;
   display: inline-block;
   line-height: 1em;
} */