/* Familiarized branding color for call to actions 81 255 0 */
* {
  margin: 0;
  box-sizing: border-box;
}

@keyframes bounce {
0% {
box-shadow: 2px 6px 5px rgb(118,72,1);
}
50% {
box-shadow: 2px 3px 5px rgb(140,97,32);
}
100% {
box-shadow: 2px 6px 5px rgb(118,72,1);
}
}


html {
height:100%;
}
body {
background-color:rgb(0,0,0);
font-family:arial, helvetica, verdana;
font-size:0.9em;
color:rgb(250,250,250);
}

iframe {
display:inline;
border:5px solid black;
border-radius:15px;
margin:10px;
}

.grid-field {
background: #000000;
background: linear-gradient(161deg,rgba(0, 0, 0, 1) 0%, rgba(43, 5, 5, 1) 50%, rgba(0, 0, 0, 1) 100%);
background-repeat:no-repeat;
background-size:cover;


display: grid;
grid-template-areas:
'header header header header header header'
'menu content content content content notifications'
'footer footer footer footer footer footer';
gap: 10px;
padding: 10px;
z-index:50;
}

.header {
grid-area:header;
}

.header img {
height:120px;
width:auto;
}

.menu {
grid-area:menu;
padding-top:20px;
padding-right:10px;
margin-bottom:20px;
z-index:100;
}

.menu a {
background-color:rgb(255,110,25);
border-top-right-radius:25px;
border-bottom-right-radius:25px;
padding:15px;
padding-left:60px;
margin-left:-60px;
text-decoration:none;
color:rgb(0,0,0);
box-shadow: 2px 6px 5px rgb(118,72,1);
text-shadow: 2px 2px 4px rgb(239,125,6);
}

.menu a:hover {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

.menu a::after {
background-image:url('group.png');
background-size:100%;
display:inline-block;
margin-left:3px;
height:18px;
width:18px;
content:"";
}

.menupagemenu {
grid-area:menu;
padding-top:20px;
padding-right:10px;
margin-bottom:20px;
z-index:100;
}

.menupagemenu a {
background-color:rgb(255,110,25);
border-top-right-radius:25px;
border-bottom-right-radius:25px;
padding:15px;
padding-left:60px;
margin-left:-60px;
text-decoration:none;
color:rgb(0,0,0);
box-shadow: 2px 6px 5px rgb(118,72,1);
text-shadow: 2px 2px 4px rgb(239,125,6);
}

.menupagemenu a:hover {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

.menupagemenu a::after {
background-image:url('calculator.png');
background-size:30px;
background-position:center bottom;
background-repeat:no-repeat;
display:inline-block;
margin-left:3px;
margin-bottom:-9px;
padding-top:30px;
height:45px;
width:45px;
content:"";
}

.legalmenu {
grid-area:menu;
padding-top:20px;
padding-right:10px;
margin-bottom:20px;
}

.legalmenu a {
background-color:rgb(81,255,0);
border-top-right-radius:25px;
border-bottom-right-radius:25px;
padding:15px;
padding-left:60px;
margin-left:-60px;
text-decoration:none;
color:rgb(0,0,0);
box-shadow: 2px 6px 5px rgb(51,151,84);
text-shadow: 2px 2px 4px rgb(150,150,150);
}

.legalmenu a:hover {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

.content {
grid-area:content;
margin-top:10px;
border-left:1px solid grey;
}

.content > p {
padding:10px;
}

.content h2 {
border-left:3px dashed grey;
margin-top:100px;
text-indent:30px;
}

.content a {
color:rgb(81,255,0);
}

.notifications {
grid-area:notifications;
border-left:1px solid grey;
max-height:300px;
min-height:100px;
}

.notifications h2 {
border-left:3px dashed grey;
text-indent:30px;
}

.notifications p {
padding:10px;
}

.footer {
grid-area:footer;
text-align:center;
}

.footer > p {
font-size:0.5em;
font-family:helvetica, arial;
color:rgb(100,100,100);
}

.footer a {
color:rgb(81,255,0);
}

input {
width:190px;
height:20px;
color:rgb(0,0,0);
font-family:arial black, arial;
font-size:1.1em;
}

.wheelArrow {
position:absolute;
width:384px;
height:216px;
margin-left:230px;
margin-top:170px;
left:50%;
top:50%;
background-image:url('pointing.PNG');
background-size:100% 100%;
z-index:100;
}

.streamerwheelcontainer {
position:absolute;
width:820px;
height:820px;
left:50%;
margin-left:-410px;
top:200px;
z-index:60;
overflow:hidden;
}

.wheelcover {
position:absolute;
width:100px;
height:100px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
border-radius:50%; 
background: #f5f5f5;
background: radial-gradient(circle,rgba(245, 245, 245, 1) 0%, rgba(145, 145, 145, 1) 100%);
z-index:90;
}

.wheel {
transition:rotate 15s ease-out 1s;
font-size:1.1em;
position:absolute;
width:810px;
height:810px;
left:50%;
margin-left:-405px;
top:5px;
border-radius:50%;
overflow:hidden;
background-color:rgb(0,0,0);
z-index:50;
}

.wheelpie {
position:absolute;
width:900px;
height:10px;
left:50%;
margin-left:-450px;
top:400px;
background-color:rgb(10,10,10);
z-index:50;
}

.wheelpie:nth-of-type(1) {
rotate:0deg;
}

.wheelpie:nth-of-type(2) {
rotate:30deg;
}

.wheelpie:nth-of-type(3) {
rotate:60deg;
}

.wheelpie:nth-of-type(4) {
rotate:90deg;
}

.wheelpie:nth-of-type(5) {
rotate:120deg;
}

.wheelpie:nth-of-type(6) {
rotate:150deg;
}


.wheelreward {
position:absolute;
left:50%;
top:50%;
margin-left:-500px;
margin-top:-500px;
stroke: black;
stroke-width: 1px;
z-index:45;
}

.wheelrewardresult {
font-family:arial, helvetica;
color:rgb(0,0,0);
text-align:right;
line-height:1000px;
position:absolute;
left:50%;
top:50%;
width:1000px;
height:1000px;
margin-left:-500px;
margin-top:-500px;
overflow:hidden;
z-index:100;
}

.wheelrewardresult p {
padding-right:100px;
}

.wheelreward:nth-of-type(1) {
rotate:15deg;
}

.wheelrewardresult:nth-of-type(1) {
rotate:15deg;
}

.wheelreward:nth-of-type(2) {
rotate:45deg;
}

.wheelrewardresult:nth-of-type(2) {
rotate:45deg;
}

.wheelreward:nth-of-type(3) {
rotate:75deg;
}

.wheelrewardresult:nth-of-type(3) {
rotate:75deg;
}

.wheelreward:nth-of-type(4) {
rotate:105deg;
}

.wheelrewardresult:nth-of-type(4) {
rotate:105deg;
}

.wheelreward:nth-of-type(5) {
rotate:135deg;
}

.wheelrewardresult:nth-of-type(5) {
rotate:135deg;
}

.wheelreward:nth-of-type(6) {
rotate:165deg;
}

.wheelrewardresult:nth-of-type(6) {
rotate:165deg;
}

.wheelreward:nth-of-type(7) {
rotate:195deg;
}

.wheelrewardresult:nth-of-type(7) {
rotate:195deg;
}

.wheelreward:nth-of-type(8) {
rotate:225deg;
}

.wheelrewardresult:nth-of-type(8) {
rotate:225deg;
}

.wheelreward:nth-of-type(9) {
rotate:255deg;
}

.wheelrewardresult:nth-of-type(9) {
rotate:255deg;
}

.wheelreward:nth-of-type(10) {
rotate:285deg;
}

.wheelrewardresult:nth-of-type(10) {
rotate:285deg;
}

.wheelreward:nth-of-type(11) {
rotate:315deg;
}

.wheelrewardresult:nth-of-type(11) {
rotate:315deg;
}

.wheelreward:nth-of-type(12) {
rotate:345deg;
}

.wheelrewardresult:nth-of-type(12) {
rotate:345deg;
}


















@keyframes hateballroll {
0% {
opacity:0;
transform: rotateY(90deg);
}
100% {
opacity:1.0;
transform: rotateY(0deg);
}
}

.hateballcontainer {
position:absolute;
width:820px;
height:820px;
left:50%;
margin-left:-410px;
top:200px;
z-index:60;
overflow:hidden;
}

.hateball {
position:absolute;
width:600px;
height:600px;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-300px;
border-radius:300px;
background: #4f4f4f;
background: radial-gradient(circle,rgba(79, 79, 79, 1) 17%, rgba(0, 0, 0, 1) 71%);
background-size:100%;
background-repeat:no-repeat;
}

.hateballfluid {
position:absolute;
width:280px;
height:280px;
left:50%;
top:50%;
margin-left:-140px;
margin-top:-140px;
border-radius:140px;
background: #deb1b1;
background: radial-gradient(circle,rgba(222, 177, 177, 1) 0%, rgba(227, 93, 20, 1) 53%);
background-size:100%;
background-repeat:no-repeat;
border:15px solid black;
transition:all 2s;
}

.hateballdie {
position:absolute;
width:160px;
height:160px;
left:50%;
top:50%;
margin-left:-80px;
margin-top:-80px;
background-color:#ddb1ff;
border-radius: 5px 50px 5px 50px;
box-shadow: 2px 6px 5px rgb(118,72,1);
transition:all 1s;
}

.hateballdieprofile {
position:absolute;
width:140px;
height:140px;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-70px;
background-color:#cb8efa;
border-radius: 0px 40px 0px 40px;

}

.hateballdieprofile p {
width:100%;
margin:0px;
color:rgb(0,0,0);
font-family:'Times New Roman', serif,arial;
font-size:20px;
font-weight:bold;
position: absolute;
top: 50%;
left: 50%;
text-align:center;
transform: translate(-50%, -50%);
}





















/* Mobile media adjustment */
@media only screen and (max-width: 1000px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 6;}
  .legalmenu {grid-area: 2 / span 6;}
  .menupagemenu {grid-area: 2 / span 6;}
  .content {grid-area: 3 / span 6;}
  .notifications {grid-area: 4 / span 6;}
  .footer {grid-area: 5 / span 6;}

.streamerwheelcontainer {
position:absolute;
width:820px;
height:820px;
left:-450px;
margin-left:0px;
top:300px;
z-index:60;
overflow:hidden;
}

.wheelArrow {
position:absolute;
width:192px;
height:108px;
margin-left:0px;
margin-top:0px;
left:170px;
top:360px;
background-image:url('pointing.PNG');
background-size:100% 100%;
rotate:-70deg;
z-index:100;
}


}