body, input, button {
  font-size: 12px;
  font-family: "Helvetica", sans-serif;
  background-color: black;
  color: white;

}
h2{
    font-size: 10px;
    
}

button {
  padding: 0.3em;
}

button a {
  text-decoration: none;
  color: #000;
}

#userslist {
  margin-top: 1em;  
   
}

#userslist, #logout-button, #profile-button, #profile {
  display: none;
}

#audiolist{
   -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    
}


.displayname {
  margin-bottom: 0;
  font: Times New Roman;
  font-weight: 200;
  font-family:serif;
  font-size: 20px;
  display: inline-block;

}

.playButton {
background: gold;
margin-top: 10px;
height: 10px;
line-height: 24px;
color: #FFFFFF;
font-family: Helevetica;
width: 325px;
font-size: 35px;
font-weight: 900;
padding-top: 10px;
text-decoration: none;
cursor: pointer;
text-align: center;
padding-bottom: 30px;
float: right;
}

.playButton:hover {
background: gold;
text-decoration: none;
}

.flagButton {
 background: #C40A0A;
background-image: -webkit-linear-gradient(top, #C40A0A, #FF0F0F);
background-image: -moz-linear-gradient(top, #C40A0A, #FF0F0F);
background-image: -ms-linear-gradient(top, #C40A0A, #FF0F0F);
background-image: -o-linear-gradient(top, #C40A0A, #FF0F0F);
background-image: linear-gradient(to bottom, #C40A0A, #FF0F0F);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
height: 10px;
line-height: 24px;
color: #FFFFFF;
font-family: Arial;
width: 300px;
font-size: 35px;
font-weight: 900;
padding-top: 20px;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
padding-bottom: 50px;
float: right;
}
.flagButton:hover {
 background: #C40A0A;
background-image: -webkit-linear-gradient(top, #C40A0D, #FF0F0F);
background-image: -moz-linear-gradient(top, #C40A0D, #FF0F0F);
background-image: -ms-linear-gradient(top, #C40A0D, #FF0F0F);
background-image: -o-linear-gradient(top, #C40A0D, #FF0F0F);
background-image: linear-gradient(to bottom, #C40A0D, #FF0F0F);
text-decoration: none;
}

.profilephoto {
  width: 200px;
  height: auto;
}

/* sytlez */
header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;  
  height: 20vh;
  background-color: gold;
}

#header-home {
  height: 100vh;
}


#title {
  margin: 0;
  letter-spacing: 4px;
  color: #fff;
}

/*
#controls {
  position: absolute;
  right: 1vh;
  top: calc(19vh - 2em);
}
*/

.button,
.button a {
  color: #fff;
  background-color: #DD2C23;
  height: 2em;
}

.button {
  border: none;
  border-radius: 8px;  
}

.button:hover {
  cursor: pointer;
}

.profile-section {
  width: 100%;
  display: inline-block;
  text-align: left;
  color: white;
 -moz-transform: rotate(180deg);
 -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
/* .displayname {
  border-bottom: solid 4px #DD2C23;
} */



@media only screen and (min-width : 320px) and (max-width : 480px) {
/* Styles for some mobile devices */

    body, input, button {
  font-size: 15px;
  font-family: "Helvetica", sans-serif;
}
 .profile-section {
  width: 100%;
  display: block;
  align-content: left;
  text-align: left;
  color: white;
     
   }
header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;  
  height: 10vh;
  background-color: gold;
}
}