body{
    background-color: rgba(255, 255, 255, 0.4);
}
.box {
    width:200px;
    height:200px;
    background:
      linear-gradient(to bottom left,transparent 49.8%,#E0E6E5 50%) top   /100% 35%,
      linear-gradient(to top    left,transparent 49.8%,#E0E6E5 50%) bottom/100% 35%,
      linear-gradient(#E0E6E5,#E0E6E5) center/100% 30%;
    background-repeat:no-repeat;
   }


   
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
  }
.margin-bottom{
    margin-bottom: 4.5em;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.p-height{
    line-height: 2;
}
.zoom {
    z-index: 8;
    cursor: pointer;
    transition: transform .2s; /* Animation */
    margin: 0 auto;
}
h1, h2, h3, h4, h5, h6, p{
    font-family: "Jost", sans-serif;
    color: #1f2937;
}

.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.method-card{
    background: rgba( 223, 222, 222, 0.35 );
    box-shadow: 0 2px 8px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 3.5px );
    -webkit-backdrop-filter: blur( 3.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

/* .method-card{
     background: rgb(241,250,252);
    background: linear-gradient(90deg, rgba(241,250,252,1) 0%, rgba(240,249,252,1) 10%, rgba(241,252,252,1) 100%);
} */


.top-method-title{
    margin-bottom:-20px;
    margin-top: 40px;
}

.data-title{
    text-align: center;
    margin: 10px;
    border-bottom: 1px solid #dcdde0;
    padding-bottom: 5px;
}

th{
    text-align: left;

}
td{
    text-align: left;
}

.box-width{
    width: 50%;

   
}
.hazard-category-title{
    text-align: center; 
    padding: 20px;
    background-color: rgb(228, 228, 228) !important;
}
.box-width-data{
    margin-left: 200px;
}
@media only screen and (max-width: 600px) {
    .hazard-category-title{
        text-align: center; 
        padding: 20px;
         background-color: rgb(228, 228, 228) !important;
    }
.mobile-tablet {
        display:flex;
        flex-direction: column-reverse;
    }
.top-method-title{
    margin-bottom:-20px;
 
}
.mobile-tablet2 {
        display:flex;
        flex-direction: column;
}
.p-width{
        width: fit-content;
}
.zoom:hover {
        transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }
}