* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    font-size: 10px;
}
body {
    background: rgba(51, 51, 51, 0.8);
    border-radius: 1.2rem;
    opacity: 1;
}
.news-title {
    text-align: left;
    letter-spacing: 0;
    color: #73B9B3;
    opacity: 1;
    font-size: 2.0rem;
    margin-top: 2.4rem;
    margin-left: 2.4rem;
    font-family: Barlow;
}
.news-body {
   margin-left: 2.6rem;
   margin-top: 1.9rem; 
}
.news-content {
    display: flex;
    margin-top: 2.6rem; 
}
.news-icon {
    min-width: 4.0rem;
    height: 4.0rem;
    border-radius: 50%;
    background: rgba(201, 249, 90, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.feed-icon {
    color: #C9F95A;
    opacity: 1;
    position: absolute;
    z-index: 2;
}
.material-icons {
    font-size: 2.4rem !important;
}
.news-summary-body {
    margin-left: 1.0rem;
    margin-right: 3.5rem;
    width: 83%;
    text-align: left;
    font: normal normal normal 1.4rem/1.9rem Roboto;
    letter-spacing: 0;
    color: #D6D6D6;
    opacity: 1;
}
.news-summary {
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis
}
.post-link {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: space-between;
    width: 100%;
    margin-top: 0.9rem;
}
.read-post {
    text-align: center;
    font: normal normal bold 1.4rem/1.6rem Arial;
    letter-spacing: 0.125rem;
    color: #45A29A;
    opacity: 1;
    cursor: pointer;
}
.post-date {
    text-align: left;
    font: normal normal normal 1.2rem/1.6rem Roboto;
    letter-spacing: 0.04rem;
    color: #D6D6D6;
    opacity: 1;
}
a{
    text-decoration: none;
}

@media screen and (min-width: 451px) and (max-width: 500px) {
    html, body {
        font-size: 8.5px;
    }
}
@media screen and (min-width: 401px) and (max-width: 450px) {
    html, body {
        font-size: 8px;
    }
}
 @media screen and (min-width: 351px) and (max-width: 400px) {
    html, body {
        font-size: 7.5px;
    }
}
 @media screen and (min-width: 301px) and (max-width: 350px) {
    html, body {
        font-size: 6.5px;
    }
}
@media screen and (min-width: 251px) and (max-width: 300px) {
    html, body {
        font-size: 5.5px;
    }
}
@media screen and (min-width: 231px) and (max-width: 250px) {
    html, body {
        font-size: 5px;
    }
}
@media screen and (min-width: 201px) and (max-width: 230px) {
    html, body {
        font-size: 4.5px;
    }
}
@media screen and (min-width: 100px) and (max-width: 200px) {
    html, body {
        font-size: 3.5px;
    }
}