* {box-sizing: border-box}
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial;
    overflow: hidden;
}
  

.angry-grid {
    display: grid; 
 
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    
    gap: 0px;
    height: 100vh;
 }
   
 #item-0 {
 
    background-color: #EBCB5A; 
    grid-row-start: 3;
    grid-column-start: 1;
 
    grid-row-end: 5;
    grid-column-end: 3;
    display: flex; 
    justify-content: center;
    align-items: center;
 }
 #item-1 {
 
    background-color: #B5BC67; 
    grid-row-start: 3;
    grid-column-start: 3;
 
    grid-row-end: 4;
    grid-column-end: 5;

 }
 #item-2 {
 
    background-color: #AB95D9; 
    grid-row-start: 4;
    grid-column-start: 3;

    grid-row-end: 5;
    grid-column-end: 5;
 }
 #item-3 {
 
    background-color: #8DD9BD; 
    grid-row-start: 2;
    grid-column-start: 1;
 
    grid-row-end: 3;
    grid-column-end: 3;
   display: flex; 
   justify-content: start;
   align-items: center;
   font-size: 3em;
   text-transform: uppercase;
   padding-left: 25px;
 }
 #item-4 {
 
    background-color: #DEEF7F; 
    grid-row-start: 1;
    grid-column-start: 1;
 
    grid-row-end: 2;
    grid-column-end: 2;
   display: flex; 
   justify-content: center;
   align-items: center;
   padding: 25px;
 }
 #item-4 img {
   width: 100%;
 }
 
 #item-5 {
 
    background-color: #FBB7AA; 
    grid-row-start: 2;
    grid-column-start: 3;
 
    grid-row-end: 3;
    grid-column-end: 5;
   display: flex; 
   justify-content: start;
   align-items: center;
   padding: 25px;
 }
 #item-6 {
 
    background-color: #BCB9B5; 
    grid-row-start: 1;
    grid-column-start: 2;
 
    grid-row-end: 2;
    grid-column-end: 3;
   display: flex; 
   justify-content: center;
   align-items: center;
   padding: 25px;
 }
 #item-7 {
 
    background-color: #7BBBB5; 
    grid-row-start: 1;
    grid-column-start: 3;
 
    grid-row-end: 2;
    grid-column-end: 4;
   display: flex; 
   justify-content: center;
   align-items: center;
   padding: 25px;
 }
 #item-8 {
 
    background-color: #BBFBF9; 
    grid-row-start: 1;
    grid-column-start: 4;
 
    grid-row-end: 2;
    grid-column-end: 5;
   display: flex; 
   justify-content: center;
   align-items: center;
   padding: 25px;
 }
 
 video {
   width: 100%;
   height: auto;
 }
 
 
 /* Style tab links */
 .tablink {
   background-color: #555;
   color: white;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   font-size: 17px;
   width: 25%;
 }
 
 .tablink:hover {
   background-color: #777;
 }
 
 /* Style the tab content (and add height:100% for full page content) */
 .tabcontent {
   color: white;
   display: none;
   padding: 100px 20px;
   height: 100%;
 }
 
 #Home {background-color: red;}
 #News {background-color: green;}
 #Contact {background-color: blue;}
 #About {background-color: orange;}
 
 




 .choice {
    display: inline-block;
    width: 100px;
  }
  
  .result {
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .bar {
    height: 10%;
    width: 0%;
  }
  
  .bar[data-choice="1"] {
    background-color: red;
  }
  .bar[data-choice="2"] {
    background-color: green;
  }
  .bar[data-choice="3"] {
    background-color: blue;
  }
  .bar[data-choice="4"] {
    background-color: Orange;
  }
  
  .label {
    height: 70px;
    text-align: center;
  }