*{
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
#main{
    /* border: 1px solid; */
    margin: 20px;
    display: flex;
    gap: 20px;
}
#main #main-1{
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* border: 1px solid red; */
    flex: 2.4;
}
#main #main-1 > div{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 10px;
    /* line-height: 10px; */
}
#main #main-1 > div h3{
    font-size: 13px; 
    font-weight: 600;
    padding: 10px;
    border-bottom: 0.1px solid rgb(216, 216, 216);
    margin-bottom: 20px;
}
#main #main-1 > div .list{
    display: flex;
    gap: 15px;
    /* line-height: 1px; */
    /* padding-top: 10px;   */
    padding-left: 20px;
    padding: 10px;
    font-size: 13px;
    align-items: center;
}
#main #main-1 > div .list:hover{
    background-color: aqua;
    cursor: pointer;
}
#main #main-1 > div .list span{
    color: #1BB2F7;
}
#main #main-2{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    flex: 5.5;
}
#main #main-2 #latest-news{
    /* border: 2px solid blue; */
    /* height: 200px; */
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 10px;
    margin-bottom: 20px;
    /* padding: 20px; */
}
#main #main-2 #latest-news .headline{
    padding: 15px;
    border-bottom: 0.1px solid rgb(216, 216, 216);
}
#latest-news .headline h4{
    font-size: 14px;
    /* font-weight: bold; */
}
#latest-news .headline p{
    font-size: 12px;
    /* font-weight: bold; */
    padding-top: 3px;
    color: gray;
}
#main #main-2 #latest-news .scoreDiv{
    line-height: 30px;
    padding: 15px;
    border-bottom: 0.1px solid rgb(216, 216, 216);
}
#latest-news .scoreDiv p{
    font-size: 14px;
}
#latest-news .scoreDiv p:nth-child(1){
    font-weight: bold;
}
#latest-news .scoreDiv .score1, .score2{
    display: flex;
    padding-bottom: 10px;
    /* justify-content: space-between; */
    /* font-size: 18px; */
}
.scoreDiv .score1 img, .score2 img{
    flex: 0.3;
    /* width: 10px; */
    padding-right: 10px;
    height: 30px;
}
.scoreDiv .score1 h4, .score2 h4{
    flex: 5;
}
.scoreDiv .score1 h3, .score2 h3{
    flex: 0.5;
}

#main #main-2 #latest-news .shortInfo{
    padding: 15px;
    border-bottom: 0.1px solid rgb(216, 216, 216);
}
#main #main-2 #latest-news .discussion{
    padding: 15px;
    border-bottom: 0.1px solid rgb(216, 216, 216);
}
#latest-news .shortInfo{
    line-height: 30px;
}
#latest-news .shortInfo img{
    width: 100%;
    height: 350px;
    border-radius: 10px;
    cursor: pointer;
}
#latest-news .shortInfo h3{
    font-size: 18px;
}
#latest-news .discussion{
    display: flex;
    gap: 20px;
    font-size: 15px;
}
#latest-news .discussion img{
    width: 50%;
    height: 150px;
    border-radius: 10px;
    cursor: pointer;
}
#latest-news .discussion h3{
    font-size: 17px;
    padding-bottom: 10px;
}
#latest-news .pointsDiv{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 15px;
    border-bottom: 0.1px solid rgb(216, 216, 216);
}
#latest-news .pointsDiv div i{
    color: #1BB2F7;
}
#latest-news .pointsDiv div{
    display: flex;
    gap: 10px;
    font-size: 14px;
    /* cursor: pointer; */
    padding: 5px;
}
#latest-news .pointsDiv div:hover{
    cursor: pointer;
}
#latest-news .additionalInfo{
    display: flex;
    /* overflow: scroll; */
    padding: 10px;
}
#latest-news .additionalInfo div{
    padding: 10px;
    width: 100%;
}
#latest-news .additionalInfo img{
    width: 100%;
    height: 130px;
    border-radius: 10px;
    cursor: pointer;
}
#latest-news .additionalInfo p{
    padding-top: 10px;
    font-size: 13px;
}
#main #main-3{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 2.7;
}
#main #main-3 #news{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 10px;
    /* border: 1px solid red; */
    
}
#main #main-3 > #news h3{
    font-size: 13px; 
    font-weight: 600;
    padding: 15px;
    border-bottom: 0.1px solid rgb(216, 216, 216);
    margin-bottom: 10px;
}
#main #main-3 > #news .list{
    display: flex;
    gap: 15px;
    /* line-height: 35px; */
    padding: 10px;  
    padding-left: 20px;
    padding-bottom: 10px;
    font-size: 12px;
    align-items: center;
    font-weight: 600;

}
#main #main-3 > #news .list:hover{
    background-color: aqua;
    cursor: pointer;
}
#main #main-3 > #news .list span{
    color: #1BB2F7;
}
#main #main-3 > #random-news{
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 10px;
}
#main #main-3 > #random-news > div{
    display: flex;
    gap: 20px;
    flex-direction: column;
    padding: 20px;
    font-size: 13px;
    line-height: 20px;
    border-bottom: 0.1px solid rgb(216, 216, 216);
}
#main #main-3 > #random-news > div:last-child{
    border: none;
}

#main #main-3 > #random-news > div img{
    margin: auto;
    width: 99%;
    height: 150px;
    border-radius: 10px;
}