:root{
     --PrimaryColor:#000;
     --SecondaryColor:#FF0;
}
@font-face {
     font-family: icon;
     src: url("heydings_icons.ttf");
}
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Arial, Helvetica, sans-serif;
}



body {
     background: #333;
}

.link {
     display: flex;
     float: left;
     list-style: none;
}

.titleAttr {
     background: #FFF;
     width: 250px;
     position: absolute;
     top: 25%;
     left: 25%;
     box-shadow: 2px 2px 6px #000;
     padding: 10px;
}

[name=newStreamer] {
     background: #33A;
     color: #FFF;
     border-radius: 5px;
     padding: 8px;
     width: 250px;
     text-align: center;
     text-decoration: none;
     transition: .7s;
     margin: 5px;
}

[name=newStreamer]:hover {
     background: #AA3;
     color: #FF0;
}
.liveInfo{width:100%; border-bottom:1px solid #FF0;}
.link li {
     margin: 6px;
}

.container {
     display: flex;
     flex-direction: column;
     width: 75%;
     height: 450px;
     align-self: center;
     overflow: auto;
}

.container h1 {
     color: #FF0;
}

.container h2 {
     color: #AA0;
}

.container ul {
     margin: 3px;
}

.container ul li {
     display: list-item;
     margin-left: 5px;
}

/*List*/
.list {
     display: flex;
     list-style: none;
     width: 100%;
     flex-direction: column;
     margin: 5px;
}

.list li {
     background: #FFF;
     width: 100%;
     border-bottom: 1px solid #000;
     padding: 5px;
     margin: 0.05em;
     transition: .7s;
}

.list li.hover:hover {
     background: var(--data-color);
}

/*End List*/
.wrapper {
     display: grid;
     grid-template-areas: "header"
          "main"
          "footer";
     grid-template-rows: 10% 80% 10%;
     width: 100vw;
     height: 100vh;
}

footer a {
     float: right;
     color: #FFF;
}

.main {
     grid-area: main;
     display: flex;
     flex-direction: column;
}

header {
     grid-area: header;
     background: #000;
     border-bottom: 1px solid #FF0;
     border-radius: 100%/0 0 50% 50%;
     color: #FFF;
     display: flex;
     justify-content: center;
  flex-direction: row;
}
header h1{
     width: 75%;
     font-size:2em;
}
.button {
     border: none;
     background: #AAA;
     padding: 5px;
     cursor: pointer;
     border-radius: 5px;
     text-decoration: none;
     color: #000;
     max-width: 250px;
     transition: .7s;
 }
 .button:hover {
     background: #777;
     color: #FFF;
 }
header a {
     display: block;
     position: absolute;
     left: 5%;
     
}
header a:hover img{
     filter: blur(2px);
}
header img {
     width: 75px;
     margin: 5px;
     transition: .7s;
}

footer {
     grid-area: footer;
}
#twitch_faq .compoment label a{
display:inline;
}
#twitch_faq .compoment label{width:100%}
/*Alert*/
.alert_overlay {
     width: 100vw;
     height: 100vh;
     background: #3336;
     position: absolute;
     top: 0;
}
.alert_overlay>div.normal{
 background: #FFF;
}
.alert_overlay>div.warning{
background: #FF9;
  color: #F00;
  align-content: center;
}
.alert_overlay>div.information{
background: #99F;
  color: #FFF;
  align-content: center;
}
.alert_overlay>div {
     background: #FFF;
     padding: 5px;
     position: relative;
     left: 45%;
     width: 15%;
     aspect-ratio: 4/3;
     top: 45%;
     padding: 19px;
}

.adscence {
     width: 30%;
     min-height: 150px;
     background: #FFF;
}
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {
     .wrapper {
          grid-template-rows: 20% auto 10%;
     }
     .alert_overlay>div {
     background: #FFF;
     padding: 5px;
     position: relative;
     left: 25%;
     width: 50%;
     aspect-ratio: 4/3;
     top: 25%;
     padding: 19px;
}
}