iwa-panda2

hdata.css (3472B)

---

 body {
     background-color: #BCCFB0;
     color: #333333;
     font-family: Roboto, sans-serif;
     margin: 0;
     padding: 0;
 }
 
 /*NAVBAR*/
 nav {
     background-color: #333333;
     width: 100%;
     height: 15vw;
     display: flex;
     align-items: center;
 }
 
 nav ul {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 15vw;
     display: flex;
     list-style-type: none;
     align-items: center;
 }
 
 nav li {
     font-weight: bold;
     font-size: 4vw;
     margin-right: 3vw;
 }
 
 nav ul li a {
     color: #fff;
     text-decoration: none;
     padding: 0;
 }
 
 nav ul li a.active {
     pointer-events: none;
     color: gray;
 }
 
 nav ul li:first-child {
     margin-right: auto;
 }
 
 .img-big-logo {
     display: none;
 }
 
 .img-small-logo,
 .img-big-logo {
     height: 15vw;
     width: auto;
     vertical-align: middle;
 }
 
 .download-button {
     display: flex;
     padding: 10px 20px;
     background-color: #BC9999;
     color: white;
     text-decoration: none;
     cursor: pointer;
 }
 
 /* HEADER */
 h1 {
     text-align: center;
     font-size: 8vw;
     margin: 5vw;
 }
 
 /* DATA BLOCKS */
 .block1,
 .block2 {
     display: flex;
     width: 90vw;
     height: auto;
     margin: 5vw auto 5vw;
     justify-content: space-between;
     background-color: #BCCFB0;
     color: white;
 
     border-radius: 4px;
     font-size: 4vw;
 }
 
 
 .block2 {
     margin: 10vw auto 110vw;
 }
 
 .content {
     height: auto;
     align-items: center;
     justify-content: center;
     width: 100%;
 }
 
 .content-title {
     display: inline-block;
     background-color: #BCCFB0;
     padding: 2px;
     box-shadow: 0 0 10px #333333;
 }
 
 .content h2 {
     font-size: 5vw;
     font-weight: bold;
     color: #333333;
     margin: 5px;
 }
 
 .topFiveTable {
     margin: 2vw 5% 3vw 5%;
     width: 90%;
 }
 
 .topFiveTable thead {
     font-weight: bold;
 }
 
 table {
     width: 100%;
     border-collapse: collapse;
     box-shadow: 0 0 10px #333333;
     color: white;
 }
 
 th, td {
     background-color: #333333;
     padding: 8px;
     text-align: left;
     border-bottom: 1px solid #ddd;
 }
 
 th {
     background-color: gray;
     font-weight: bold;
 }
 
 tr:hover {
     background-color: #444444;
 }
 
 #tabledate{
     background-color: black;
     color: #BCCFB0;
 }
 
 #chilling{
     background-color: #BC9999;
     color: #BCCFB0;
 }
 
 .space{
     background-color: transparent;
     box-shadow: none;
     padding-bottom: 100px
 }
 
 #myChart {
     display: inline !important;
     width: 90% !important;
     height: auto !important;
     margin: 2vw 5% 3vw 5%;
 }
 
 @media (min-width: 400px) {
     /*NAVBAR*/
     nav {
         height: 60px;
     }
 
     nav ul {
         height: 60px;
     }
 
     nav li {
         font-size: 16px;
         margin-right: 12px;
     }
 
     .img-small-logo,
     .img-big-logo {
         height: 60px;
     }
 
     /* HEADER */
     h1 {
         font-size: 32px;
         margin: 20px;
     }
 
     /* DATA BLOCKS */
     .block1 {
         font-size: 16px;
         margin: 20px auto 20px;
     }
 
     .block2 {
         font-size: 16px;
         margin: 40px auto 40px;
     }
 
     .content h2 {
         font-size: 20px;
     }
 
     .fancy-list {
         font-size: 16px;
     }
 }
 
 @media (min-width: 700px) {
     .img-big-logo {
         display: block;
     }
 
     .img-small-logo {
         display: none;
     }
 
     nav ul li:first-child {
         margin-right: 0;
     }
 
     nav ul li:nth-child(2) {
         margin-right: auto;
     }
 }
 
 @media (min-width: 1200px) {
     /* DATA BLOCKS */
     .block1,
     .block2 {
         width: 1080px;
     }
 }