html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/*
.perle {
    min-height:40px;
    margin-top:5px;
    margin-bottom:5px;
    padding-top:8px;
    padding-left:20px;
    padding-right:20px;
    border:1px solid gray;
    border-radius:10px;
}

*/


.blue_stripe {
    background: var(--coral-green-01, #2BACBE);
    color: var(--white-01, #FFF);
    /* Paragraph/Semibold/Ph18 - LH 180% */
    font-family: Outfit;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 1.4625rem */
    height: 2rem;
    flex-shrink: 0;
    text-align:center;
}

.rwg {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bebebe+29,ffffff+29,ffffff+29,ffffff+64,ff0000+66,ff0000+100 */
    background: rgb(190,190,190); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(190,190,190,1) 29%, rgba(255,255,255,1) 29%, rgba(255,255,255,1) 29%, rgba(255,255,255,1) 64%, rgba(255,0,0,1) 66%, rgba(255,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(190,190,190,1) 29%,rgba(255,255,255,1) 29%,rgba(255,255,255,1) 29%,rgba(255,255,255,1) 64%,rgba(255,0,0,1) 66%,rgba(255,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(190,190,190,1) 29%,rgba(255,255,255,1) 29%,rgba(255,255,255,1) 29%,rgba(255,255,255,1) 64%,rgba(255,0,0,1) 66%,rgba(255,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#ff0000',GradientType=0 ); /* IE6-9 */
}

header {
    box-sizing: border-box;
    
    width: 100%;
    height: 55px;
    left: 2px;
    top: 0px;
    background: conic-gradient(from 157.27deg at 27.22% -51.35%, #000000 0deg, #34452F 181.04deg, #3B4437 360deg);
    mix-blend-mode: normal;
    border: 1px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   
}


.white {
    color:white;
    font-size:20px;
    font-weight:bold;
}


div.stateTitle h1{
    background:#ebff00;
    width:fit-content; 
}

.ball {
    text-align: center;
    width: 80px;
    height: 80px;
    margin-left: auto;
    background: #2bacbe;
    border-radius: 40px;
    padding-top: 15px;
    font-size: 32px;
    /* padding-right: 10px; */
}


.equip_bubble {
    
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    min-height:150px;
}

.pending {
    background-color: #aadde4;
}

.ready {
    background-color: #a4ecdc;
}

.location_info {
    font-weight:bold;
    
    font-size:large;
    text-align:center;
}

.lego_bubble {
    width: 250px;
    height: 250px;
    background: #6EBDE2;
    border: 3px solid #34452F;
    border-radius:200px;
    margin-left:auto;
    margin-right:auto;
}

.red {
    background: #E50000;

}

.darkblue {
    background: #191D31;
}

.black {
    background:""#111315";
}

.lego_command {
    color:white;
    border-radius:5px;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    padding-left:10px;
    padding-right:10px;
    margin-top:25px;
    font-weight:bold;
}