/* 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(51,151,84);
text-shadow: 2px 2px 4px rgb(150,150,150);
}
50% {
box-shadow: 2px 3px 5px rgb(51,151,84);
text-shadow: 2px 4px 3px rgb(150,150,150);
}
100% {
box-shadow: 2px 6px 5px rgb(51,151,84);
text-shadow: 2px 2px 4px rgb(150,150,150);
}
}

body {
background-color:rgb(10,10,10);
font-family:arial, helvetica, verdana;
font-size:0.9em;
color:rgb(250,250,250);
}

.grid-field {
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;
}


.header {
grid-area:header;
}

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


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

.menu 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);
}

.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;
}

.menupagemenu 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);
}

.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;
}




/* 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;}











}