@font-face {
    font-family: "Montserrat Black";
    src:url("./fonts/Montserrat-Black.ttf");
}
@font-face {
    font-family: "Montserrat Regular";
    src:url("./fonts/Montserrat-Regular.ttf");
}
@font-face {
    font-family: "Montserrat Medium";
    src:url("./fonts/Montserrat-Medium.ttf");
}

:root {
  --accent-yellow: #fedd12;
}

/** desktop **/
@media only screen and (min-width: 650px) {

  .leftTab_mobile, #scrolldown {
    display: none;
  }

  body {
    background-color:white;
    cursor: none;
    font-family: 'Montserrat Regular';
    font-size: 2.5em;
    letter-spacing: 1;
    margin: 0;
  }


  a {
    cursor: none;
  }

  .popup {
    /* hide popup */
    display: none;
    
    border: 0.8vw dashed red;
    margin: 10px;
    padding: 1.5vw;
    position: fixed;
    right: 0;
    z-index: 11;
  }
  .popupMobile {
    display: none;
  }
  .popup a {
    width: 100%;
    height: 100%;
  }
  .popup:hover {
    border: 10px dashed blue;
    color: blue;
  }
  .popup span {
    font-family: 'Montserrat Black';
    font-size: 1.3vw;
  }
  .popup:hover span {
    color: blue;
  }

  .hoverer {
    align-items: center;
    background-color: white;
    border: 0.5vw solid #ec2029;
    color: #ec2029;
    display: flex;
    height: 5vw;
    justify-content: center;
    position: fixed;

    /* no highlight */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 10;
  }

  .hoverer > h1 {
    font-family: 'Montserrat Black';
    font-size: 2.3vw;
    margin: 0 2vw;
  }

  .hoverer.pressed {
    background-color: #ec2029;
    border: 0.5vw solid white;
    color:white;
  }

  .cursed {
      position: fixed;
    /* no highlight */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 10;
  }

  #cursorNah {
    z-index: 20;
  }

  #cursorPop {
    display: none;
    position: relative;
    left: -30px;
  }

  #bullshit_wrapper {
    display: none;
  }

  .twoTabs {
    display: flex;
  }

  #leftTab {
    display: flex;
    flex: 7;
    height:100vh;
    left:-17%;
    position: relative;
    top:0px;

    -webkit-transition: left 0.50s; /* Safari */
    transition: left 0.50s;
    transition-timing-function: ease;
  }

  #leftTab.reg {
    left: 0;
    -webkit-transition: left 0.50s; /* Safari */
    transition: left 0.50s;
    transition-timing-function: ease;
  }

  .svgs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  #leftTab svg {
    position: fixed;
    width: 50%;
  }

  #spotify {
    /* pointer-events: none; */
  }

  #rightTab  {
    background-color: #ec2029;
    color:white;
    flex: 3;
    /* height: 100%; */
    padding: 1.5vw;
    position: relative;
    min-height: 100%;
    left: -34%;
    -webkit-transition: left 0.50s; /* Safari */
    transition: left 0.50s;
    transition-timing-function: ease;

    /* no highlight */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;
    /* pointer-events: none; */
  }

  #rightTab.reg {
    left: 0;
    -webkit-transition: left 0.50s; /* Safari */
    transition: left 0.50s;
    transition-timing-function: ease;
  }

  #rightTab.peek {
    left: -31%;
    -webkit-transition: left 0.125s; /* Safari */
    transition: left 0.125s;
    transition-timing-function: ease;
  }

  #rightTab.shifted {
    left: 5px;
    -webkit-transition: left 0.125s; /* Safari */
    transition: left 0.125s;
    transition-timing-function: ease;
  }


  #rightTab h1 {
    font-family: 'Montserrat Black';
    font-size: 3.2vw;
    margin: 0px 0px 1.5vw 0px;
  }

  .rightTab > div {
    width: 100%;
  }

  #usBop, #busBop, #ontheBop, #grillBop, #contestBop, #drinkBop {
    display: none;
  }

  #busBop img {
    pointer-events: all;
  }

  #busBop img:hover {
    /* padding: 5px; */
  }

  .seeMore {
    color:red;
    text-align: center;
    text-decoration: none;

    background-color: white;
    border: 0;
    border-radius: 0;
    font-family: 'Montserrat Black';
    font-size: 1.92vw;
    font-weight: bold;
    outline: none;
    padding: 1vw 1vw;
  }

  .seeMore a {
    color: red;
    text-decoration: none;
  }

  #usBop a {
    color: #fedd12;
    cursor: none;
    text-decoration: none;
    word-break: break-all;

    /* no highlight */
    -webkit-user-select: all; /* Chrome/Safari */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* IE10+ */
    /* Not implemented yet */
    -o-user-select: all;
    user-select: all;
    pointer-events: all;
  }

  #ontheBop {
    white-space: normal;
  }

  #ontheBop h2 {
    font-family: 'Montserrat Regular';
    font-size: 1.92vw;
  }

  #ontheBop h2.break {
    word-break: break-all;
  }

  #ontheBop a {
    color: #fedd12;
    text-decoration: none;
    /* no highlight */
    -webkit-user-select: all; /* Chrome/Safari */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* IE10+ */
    /* Not implemented yet */
    -o-user-select: all;
    user-select: all;
    pointer-events: all;
  }

  #ontheBop #mc_embed_signup {
    clear:left;
    font-family: 'Montserrat Regular';
    width:100%;
  }

  #mc_embed_signup label {
    font-family: 'Montserrat Regular';
    font-size: 1.92vw;
    font-weight: bold;
    text-align: left;
  }

  #mc_embed_signup .email {
    border: 0;
    color:red;
    font-family: 'Montserrat Regular';
    font-size: 1.92vw;
    font-weight: bold;
    margin: 1vw 0;
    padding-left: 20px;
    width: 100%;
  }

  #mc_embed_signup .email:focus {
    outline-width: 0;
  }

  #mc_embed_signup .email:hover {
    cursor: none;
  }

  #ontheBop #mc_embed_signup .button {
    background-color: white;
    border: 0;
    border-radius: 0;
    color: red;
    font-family: 'Montserrat Black';
    font-size: 1.92vw;
    font-weight: bold;
    outline: none;
    padding: 1vw 1vw;
    width: 100%;
  }

  #ontheBop #mc_embed_signup .button:hover {
    background-color: var(--accent-yellow);
    color: white;
    cursor: none;
  }

  .imageBox img {
    margin-bottom: 1.5vw;
    width: 100%;
  }

  /* #usBop {
    background-color: green;
    height: 100%;
    width: 100%;
  } */

  #usBop .peopleBox {
    text-align: left;
    font-family: 'Montserrat Medium';
    font-size: 1.5vw;
    width: 100%;
  }

  .peopleBox h2 {
    font-family: 'Montserrat Medium';
    font-size: 1.3vw;
    margin: 0;
  }

  .peopleBox h3 {
    font-family: 'Montserrat Regular';
    font-size: 1.3vw;
    margin: .2vw 0 0 0;
  }

  .peopleBox a {
    color: #fedd12;
    font-family: 'Montserrat Regular';
    font-size: 1.3vw;
    margin: 2.0vw 0 0 0;
  }

  .peopleBox .peopleFrame {
    display: flex;
    margin-bottom: 1.5vw;
    width: 100%;
  }

  .peopleFrame img {
    margin: 0px;
    width: 100%;
  }

  #usBop .peopleFrame > div {
    flex: 1;
    width: 100%;
  }

  .peopleFrame > .left {
    padding-right: .75vw;
  }

  .peopleFrame > .right {
    padding-left: .75vw;
  }

  #busAlert {
    background-color: purple;
    font-size: 30px;
    min-height: 50%;
    max-width: 700px;
    opacity: 0.9;
    pointer-events:none;
    position:fixed;
    visibility: hidden;
    width:70%;
  }

  #busAlert button {
    cursor: none;
    margin:10px;
  }

  .bus {
    /*background: url('./comp.jpg');*/
    background-color: rgb(255, 222, 15);
    fill:rgb(236, 33,41);
    height:100%;
  }
  .busContainer {
    height:100%;
  }

  #try {
    fill:rgb(236, 33,41);
  }


  g a {
    fill: rgb(236, 33,41);
  }
  span {
    display: none;
    display:block;
    line-height:10px;
    font-size: 10px;
    font-weight:bold;
    white-space:pre;
    font-family: monospace;
    color: rgb(236, 32, 41);
  }


  .about.hover {
    background-color: red;
    border-radius: 0.2em 0em 0em 0em ;
    font-size: 0.6em;
  }

  .eyeHover {
    color: white;
    font-size: 5vw;
  }

  .busClick {
    border: 10px dashed white;
  }

  .busClick img {
    width:50vw;
  }

  .peopleClick img {
    width:25vw;
  }

  .usHover, .socialNetworkPic {
    width:200px;
  }


  .onthehover {
    height:200px;
  }

}

@media
only screen and (max-width: 650px) {
/* only screen
  and (max-device-width : 650px)
  and (-webkit-device-pixel-ratio : 3)
  and (orientation : portrait) { */

  body {
    background-color: white;
    margin: 0;
  }

  .twoTabs {
    display: inherit;
  }

  .mobileFrame {
    text-align: center;
    width: 100%;
  }

  .mobileFrame#scrolldown {
    /* margin-bottom: 8vh; */
    /* padding: 43vh 0; */
    padding: 43vh 0;
    /* position: relative;
    top: 0; */
  }

  .mobileFrame h1 {
    color: #ec2029;
    font-family: 'Montserrat Black';
    font-size: 5vh;
    position: relative;
    left:0;
  }

  .popup {
    display: none;
  }

  .popupMobile {
    /* disable popup */
    display: none;

    border: 5px dashed red;
    margin: 10px;
    padding: 20px;
    position: fixed;
    right: 0;
  }
  .popupMobile a {
    width: 100%;
    height: 100%;
  }
  .popupMobile:hover {
    border: 5px dashed blue;
    color: blue;
  }
  .popupMobile span {
    color:red;
    font-family: 'Montserrat Black';
    font-size: 3vw;
  }
  .popupMobile:hover span {
    color: blue;
  }

  .leftTab_mobile {
    position: relative;
    left: 0;
  }

  .leftTab_mobile img {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .leftTab_mobile img#back {
    z-index: 0;
  }

  .seeMore {
    color:red;
    margin: 10px;
    text-align: center;
    width: 100%;

    background-color: red;
    border: 0;
    border-radius: 0;
    font-family: 'Montserrat Black';
    font-size: 1.92vw;
    font-weight: bold;
    outline: none;
    padding: 1vw 1vw;
  }

  .seeMore a {
    color:white;
    pointer-events: all;
    text-decoration: none;
  }

  .seeMore span {
    border: 5px solid white;
    font-family: 'Montserrat Regular';
    padding: 5px;
  }

  #rightTab  {
    color:white;
    flex: 3;
    /* padding: 3.0vw; */
    position: relative;
    left: 0;
    -webkit-transition: left 0.50s; /* Safari */
    transition: left 0.50s;
    transition-timing-function: ease;

    /* no highlight */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;
    /* pointer-events: none; */
  }

  #rightTab h1 {
    font-family: 'Montserrat Black';
    font-size: 11vw;
    margin: 0px 0px 7.0vw 0px;
  }

  .rightTab > div {
    width: 100%;
  }

  #usBop, #busBop, #ontheBop, #grillBop, #contestBop, #drinkBop {
    background-color: white;
    display: 'inherit';
    padding: 5.0vw;
  }

  #contestBop {
    background-color:#ec2029;
    font-family: 'Montserrat Regular';
  }

  #contestBop a {
    color: #fedd12;
  }

  #contestBop img {
    width: 100%;
  }

  #drinkBop {
    background-color:white;
    color: #ec2029;
    font-family: 'Montserrat Regular';
  }

  #ontheBop {
    background-color: #ec2029;
  }

  #ontheBop #mc_embed_signup {
    clear:left;
    font-family: 'Montserrat Regular';
    width:100%;
  }

  #mc_embed_signup label {
    font-family: 'Montserrat Regular';
    font-size: 6.1vw;
    font-weight: bold;
    text-align: left;
  }

  #mc_embed_signup .email {
    border: 0;
    color:red;
    font-family: 'Montserrat Regular';
    font-size: 6.1vw;
    font-weight: bold;
    margin: 6vw 0;
    padding: 5vw 0 5vw 5vw;
    width: 100%;
  }

  #mc_embed_signup .email:focus {
    outline-width: 0;
  }

  #mc_embed_signup .email:hover {
    cursor: none;
  }

  .button {
    border: 0;
    border-radius: 0;
    font-family: 'Montserrat Black';
    font-size: 6.1vw;
    font-weight: bold;
    outline: none;
    padding: 6vw 6vw;
  }

  #ontheBop #mc_embed_signup .button {
    background-color: white;
    color: red;
    width: 100%;
  }

  #ontheBop #mc_embed_signup .button:hover {
    background-color: var(--accent-yellow);
    color: white;
    cursor: none;
  }

  .seeMore.button {
    margin: 0;
    width: auto;
  }

  #grillBop {
    color: #ec2029;
  }

  #busBop h1 {
    color: #ec2029;
  }

  #busBop img {
    pointer-events: all;
  }

  #usBop {
    background-color: #ec2029;
    color:white;
  }

  #usBop a {
    color: #fedd12;
    cursor: none;
    text-decoration: none;
    word-break: break-all;

    /* no highlight */
    -webkit-user-select: all; /* Chrome/Safari */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* IE10+ */
    /* Not implemented yet */
    -o-user-select: all;
    user-select: all;
    pointer-events: all;
  }

  #ontheBop {
    white-space: normal;
  }

  #ontheBop h2 {
    font-family: 'Montserrat Regular';
    font-size: 6.1vw;
    margin: 0;
  }

  #ontheBop h2.break {
    word-break: break-all;
  }

  #ontheBop a {
    color: #fedd12;
    font-size: 6.1vw;

    text-decoration: none;
    /* no highlight */
    -webkit-user-select: all; /* Chrome/Safari */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* IE10+ */
    /* Not implemented yet */
    -o-user-select: all;
    user-select: all;
    pointer-events: all;
  }

  .imageBox img {
    margin-bottom: 3.0vw;
    width: 100%;
  }

  #usBop .peopleBox {
    text-align: left;
    font-family: 'Montserrat Medium';
    font-size: 4vw;
    width: 100%;
  }

  .peopleBox h2 {
    font-family: 'Montserrat Medium';
    font-size: 4vw;
    margin: 0;
  }

  .peopleBox h3 {
    font-family: 'Montserrat Regular';
    font-size: 4vw;
    margin: .2vw 0 0 0;
  }

  .peopleBox a {
    color: #fedd12;
    font-family: 'Montserrat Regular';
    font-size: 4vw;
    margin: 2.0vw 0 0 0;
  }

  .peopleBox .peopleFrame {
    display: flex;
    margin-bottom: 3.0vw;
    width: 100%;
  }

  .peopleFrame img {
    margin: 0px;
    width: 100%;
  }

  #usBop .peopleFrame > div {
    flex: 1;
    width: 100%;
  }

  .peopleFrame > .left {
    padding-right: 2vw;
  }

  .peopleFrame > .right {
    padding-left: 2vw;
  }

  .leftTab, .cursor, .cursor_pop {
    display: none;
  }
}