#content-boxhot{
    /* border: 1px solid red; */
    width: 100%;
    height: 190px;
    background-color: #f0f0f0;
    padding-top: 25px;
}

#titlehot{
   display: flex;
    gap: 30px;
    /* border: 1px solid; */
    width: 75%;
    margin: auto;
}

#wordshot{
width: 75%;
/* border: 1px solid red; */
margin: auto;
}

#mainhot{
   height: auto;
   width: 100%;
   display: block;
}

#buttonshot{
   width: 80%;
   height: 140px;
   margin-left: 90px;
   padding-top: 40px;
}

#btnlist{
   width: 180px;
   height: 40px;
   border-radius: 5px;
   border: 0;
}

#btnlist:hover{
   cursor: pointer;
}

#btn1hot{
   display: flex;
   gap: 30px;
   padding-left: 150px;
}
#btn2hot{
   display: flex;
   gap: 30px;
   padding-left: 150px;
   margin-top: 40px;
}

#boxhot1{
   width: 75%;
   height: 900px;
   /* border: 1px solid red; */
   margin: auto;
   margin-top:50px ;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#pasta{
   /* border: 1px solid; */
   display: flex;
   justify-content: space-between;
   margin: auto;
   width: 90%;
   height: 50px;
   margin-top: 30px;
}

#twoword{
   display: flex;
   gap: 40px;
}

#mword{
   font-size: 25px;
   color: gray;
   /* font-weight: 80px; */
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin-top: 5px;
   font-weight: 500;
}

#twoword{
   font-size: 19px;
   color: #3187ff;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin-top: 10px;
   font-weight: 500;
}

#twoword:hover{
   cursor: pointer;
   text-decoration: underline;
}

#fourimages{
   /* border: 1px solid; */
   height: 200px;
   width: 90%;
   margin: auto;
   margin-top: 20px;
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-template-rows: auto;
   gap: 10px;
}

#fourimages1{
   /* border: 1px solid; */
   height: 200px;
   width: 90%;
   margin: auto;
   margin-top: 20px;
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-template-rows: auto;
   gap: 10px;
}

#fourimages2{
   /* border: 1px solid; */
   height: 200px;
   width: 90%;
   margin: auto;
   margin-top: 20px;
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-template-rows: auto;
   gap: 10px;
}

#fourimages3{
   /* border: 1px solid; */
   height: 200px;
   width: 90%;
   margin: auto;
   margin-top: 20px;
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-template-rows: auto;
   gap: 10px;
}

.hotimages{
   width: 90%;
   height: 100%;

}

.hottitle{
   color: gray;
}

.hottitle:hover{
   cursor: pointer;
   text-decoration: underline;
}

#hotcomment{
   /* border: 1px solid blue; */
   width: 90%;
   margin: auto;
   height: 40%;
   margin-top: 30px;
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: 10px;
}

#hotcomment1{
   /* border: 1px solid blue; */
   width: 90%;
   margin: auto;
   height: 40%;
   margin-top: 30px;
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: 10px;
}

#hotcomment2{
   /* border: 1px solid blue; */
   width: 90%;
   margin: auto;
   height: 40%;
   margin-top: 30px;
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: 10px;
}

#hotcomment3{
   /* border: 1px solid blue; */
   width: 90%;
   margin: auto;
   height: 40%;
   margin-top: 30px;
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: 10px;
}

.alldiv{
   /* border: 1px solid; */
   width: 100%;
   height: 100%;
   display: flex;
   gap: 10px;
}

.imgs{
   /* border: 1px solid; */
   height: 80%;
   width: 35%;
}

.im{
   width: 100%;
   height: 100%;
   border-radius: 5px;
}

.remaincontent{
   /* border: 1px solid; */
   width: 70%;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.com{
   /* border: 1px solid green; */
   width: 100%;
   height: 30%;
display: flex;
gap: 5px;
}

.dpdiv{
/* border: 1px solid ; */
width: 20%;
height: 100%;
}

.dp{
   width: 100%;
   height: 100%;
    border-radius: 60%;
}

.namdiv{
   /* border: 1px solid red; */
   width: 90%;
   height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   color: gray;
}

.read{
   color: #3187ff;
}

.read:hover{
   cursor: pointer;
   text-decoration: underline;
}

#smlbox{
   width: 90%;
   height: 5%;
   border: 1px solid;
   margin-top: 80px;
   background-color: rgb(192, 189, 189);
   margin-left: 50px;
   border: 0;
}

#smlbox:hover{
   cursor: pointer;
   text-decoration: underline;
}

#smlbox1{
   width: 90%;
   height: 5%;
   border: 1px solid;
   margin-top: 157px;
   border: 0;
   background-color: rgb(192, 189, 189);
   margin-left: 50px;
}

#smlbox1:hover{
   cursor: pointer;
   text-decoration: underline;
}

#smlbox2{
   width: 90%;
   height: 5%;
   border: 1px solid;
   margin-top: 130px;
   border: 0;
   background-color: rgb(192, 189, 189);
   margin-left: 50px;
}

#smlbox2:hover{
   cursor: pointer;
   text-decoration: underline;
}

#smlbox3{
   width: 90%;
   height: 5%;
   border: 1px solid;
   margin-top: 130px;
   border: 0;
   background-color: rgb(192, 189, 189);
   margin-left: 50px;
}

#smlbox3:hover{
   cursor: pointer;
   text-decoration: underline;
}


#com{
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   text-align: center;
   color: #686e6d;
}