* {
   box-sizing: border-box;
   font-family: 'Raleway', sans-serif;
}

.content {
   width: 100%;
   max-width: unset;
   margin: 0 auto;
}

.rc-nav__rightside {
   display: flex;
   flex-direction: revert;
   gap: 90px;
   align-items: center;
   justify-content: center;
}

.rc-nav__mygroups--icon {
   color: white;
   font-size: 22px;
   transition: .2s all ease-in-out;
   cursor: pointer;
}

.rc-nav__mygroups--title {
   font-size: 15px;
   color: #fde0fa;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-right: 12px;
   transition: .2s all ease-in-out;
   opacity: 0;
   visibility: hidden;
   animation: none !important;
   filter: none ! important;
}

.rc-nav__mygroups--title.visible {
   opacity: 1;
   visibility: visible;
}

.rc-nav__mygroups--icon:hover {
   color: rgb(247 202 255);
}

.rc-game__logo-container {
   width: 100%;
   margin-bottom: 20px;
}

.rc-onboard--initial .rc-game__logo-container {
   text-align: center;
}

.rc-challenge-logo {
   width: 250px;
}

.jeopardyboard-header {
   display: none;
}

.rc-wrapper {
   height: 100%;
   min-height: 100vh;
   max-height: 100vh;
   overflow-y: scroll;
   background-image: linear-gradient(90deg, #8E2DE2, #4A00E0);
   background-size: cover;
   background-position: top right;
   background-repeat: no-repeat;
   color: white;
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 1rem;
   padding: 7.5rem;
   justify-content: center;
   align-items: center;
   font-family: 'Raleway', sans-serif;
   padding-top: 100px;
   width: 100%;
}

.rc-wrapper h1 {
   font-size: 3rem;
   font-weight: 600;
   color: white;
}

.rc-wrapper h2 {
   text-transform: none;
   font-size: 1.35rem;
   font-weight: 600;
   max-width: 700px;
   color: white;
}

.rc-wrapper h2 span {
   display: inline-block;
   margin-right: .5rem;
   color: white;
}

.rc-wrapper h3 {
   font-size: 1rem;
   font-weight: 400;
   color: white;
}

.rc-wrapper h4 {
   font-size: 1rem;
   font-weight: 200;
   color: white;
}

.rc-wrapper h4 strong {
   font-size: 1rem;
   font-weight: 500;
   color: white;
}

.rc-wrapper h1,
.rc-wrapper h2,
.rc-wrapper h3,
.rc-wrapper h4 {
   margin: 0 0 1rem 0;
   line-height: 1.3;
   font-family: 'Raleway', sans-serif;
}


/* BUTTONS */
.rc-btn {
   width: 17rem;
   cursor: pointer;
}

.rc-btn--input {
   display: inline-block;
   margin-right: 1rem;
   text-align: center;
   padding: 1rem 2rem;
   height: auto;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
   cursor: pointer;
   line-height: .9;
   height: auto ! important;
}


.rc-btn,
.rc-btn--input {
   border-radius: 2.2rem;
   color: #333;
   background: rgba(255, 255, 255, .9);
   outline: none;
   border: 2px solid white;
   font-family: 'Raleway', sans-serif;
   transition: .2s all ease-in-out;
}

.rc-btn {
   width: 300px;
   font-size: 1.25rem;
   height: 3.5rem;
   font-weight: 600;
}

a.rc-btn {
   width: 300px;
   font-size: 1.25rem;
   height: 3.5rem;
   font-weight: 600;
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;
}

.rc-btn--short {
   width: 200px;
   font-size: 1.25rem;
   font-weight: 600;
}

.rc-btn--med {
   width: 300px;
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.2;
}

.rc-btn--long {
   width: 400px;
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.2;
}

.rc-btn--outline,
.rc-btn--outline {
   background: transparent;
   color: white;
   border: 2px solid white;
}

.rc-btn--outline:hover,
.rc-btn--outline:hover {
   background: rgba(255, 255, 255, .9);
   color: #333;
   border: 2px solid white;
}

.rc-btn:hover,
.rc-btn:hover {
   background: rgba(255, 255, 255, 1);
   transform: translate(-1px, -1px);
   box-shadow: rgba(51, 51, 51, 0.5) 0.5rem 0.5rem 0.8rem 0.2rem;
}

.rc-btn--plus {
   font-size: 45px ! important;
   height: auto ! important;
   width: auto ! important;
   padding: 0 22px;
   border-radius: 17px ! important;
   display: inline-block;
}

.rc-input {
   width: 100%;
   padding: 1rem;
   border: 3px solid white;
   border-radius: .5rem;
   background: rgba(255, 255, 255, .5);
   font-size: 1.65rem;
   color: white;
   max-width: 650px;
   display: block;
   margin-bottom: 20px;
}

span.gold {
   color: #ffe87c ! important;
}


/* TABS */
.tabcontent {
   display: none;
}

.tabcontent.active {
   display: block;
}

/* SUCCESS NOTE */
.success-note {
    font-size: 18px;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #585858;
	padding: 10px 20px 10px 0;
    color: #ffd290;
}
.success-note a {
	font-size: 18px;
	color: #ffd290 !important;
	text-decoration: none;
	font-weight: bold;
}

/* ERROR MSG */
.error-msg__container {
   opacity: 0;
   visibility: hidden;
   z-index: -1;

   position: absolute;
   width: 100vw;
   height: 100vh;
   display: flex;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background: #333333aa;
   color: white;
   justify-content: center;
   align-items: center;
   transition: .2s all ease-in-out;
}

.error-msg__container.visible {
   opacity: 1;
   visibility: visible;
   z-index: 2;
}

.error-msg__close {
   color: white;
   font-weight: 800;
   right: 25px;
   top: 20px;
   position: absolute;
   font-size: 20px;
   cursor: pointer;
   transition: .2s all ease-in-out;
}

.error-msg__close:hover {
   color: #dccdfb;
}

.error-msg__inner {
   padding: 50px;
   background: black;
   border-radius: 5px;
   height: 250px;
   width: 400px;
   position: relative;
}

.rc-topnav .rc-logo .tp-logo {
   display: block;
}

.rc-topnav .rc-logo .rc-challenge-logo {
   display: none;
}

.pink {
   color: #f7caff ! important;
}

.rc-accept-invite h2 {
   font-weight: 400;
}


/* RESPONSIVENESS */
@media (max-width: 500px) {
   .rc-nav__rightside {
      gap: 20px;
   }

   .rc-topnav {
      justify-content: space-around ! important;
   }

   .rc-topnav .rc-logo {
      width: 75%;
      max-width: 200px;
   }

   .rc-wrapper {
      padding: 8rem 1.5rem 2.5rem 1.5rem;
      grid-template-rows: auto auto auto auto;
      /* max-height: 85vh; */
   }

   .rc-wrapper h1 {
      line-height: 0.8;
      margin-bottom: 2rem;
   }

   .rc-wrapper h2 {
      line-height: 1.1;
   }

   .rc-topnav .rc-logo .tp-logo {
      display: none;
   }

   .rc-topnav .rc-logo .rc-challenge-logo {
      display: block;
      width: 100%;
      max-width: 105px;
      top: 15px;
      left: 15px;
      position: absolute;
   }

   .rc-onboarding .rc-challenge-logo {
      display: none;
   }
}

@media (max-width: 750px) {
   .rc-wrapper {
      align-items: start ! important;
      justify-content: start ! important;
   }
}