section.title{
  background-color: #C22A39;
  height:35vh;
  min-height:360px;
  padding-top:60px;
  justify-content:center;
  -webkit-justify-content:center;
}

article.title p{
  font-size: 4em;
  width: 100%;
  text-align: center;
  color: white;
  margin: auto;
  padding-top: 35px;
}
section.uname{
  background-color: #C22A39;
}
article.uname> p{
  font-size: 2em;
  width: 100%;
  text-align: center;
  color: white;
  margin: auto auto 20px 10px;
}

section.rmod{
  width:100%;
  background-color: #C22A39;
  padding 10px;
}
article.rmod{
  flex:1 1 250px;
  margin:30px;
}
p#rmod{
  font-size: 1em;              
  color: white;                
  text-align: left;         
  margin:10px 40px 50px; 
  max-width:440px;
}
section.logout{
  width:100%;
  background-color: #C22A39;
}
article.logout{
  flex:1 1 100px;
  margin:2px;
}
p#logout{
  font-size: 1em;              
  color: white;                
  text-align: right;         
  margin:-10px 50px 10px;
}
section.info,
section.radio,
section.chat{
  width:100%;
  background-color: #333333;
  padding 10px;
  justify-content:center; 
  -webkit-justify-content:center; 
}

section.info{
padding:50px 20px;
}
article.online,
article.offline
{
  flex:5 1 300px;
  font-size: 1.5em;              
  color: white;                
  max-width:340px;
}
article.spot{ 
  text-align:center;
  font-size: 1em;              
  color: white;                
  max-width:300px;
  flex:1 1 280px;
}
div.spot{
  display:inline-block;
  background-color:red;
  padding:15px;
  border-radius:15px;
}
div.chat{
  background-color: #C22A39;
  padding:20px 0px;
  margin:15px 0px;
  border-radius:5px;
  min-width:200px;
}
div.chat:hover{
  font-size:1.2em;
  padding:22px 3px;
  margin:13px -3px;
  cursor:pointer;
  
}

article.radio{
  margin:30px;
  background-color:black;
  width:80vw;
}
p#now{
  color:white;
  text-align:center;

}
#ra{
  width:100%;
  margin:10px 0px;
}

article.online{
}
article.offline{
}
.show{
  display:block;
}
.hide{
  display:none;
}