@font-face {
    font-family: Inter-Variable;
    src: url("assets/fonts/Inter-VariableFont_slnt\,wght.ttf");
}

html{
    box-sizing: border-box;
}

*::before, *::after{
    box-sizing: inherit;
}

body{
    padding: 0;
    margin: 0;
    font-family: Inter-Variable;
}

nav ul{
    padding: 0;
    margin: 0;
    /* border: 2px solid yellow; */
    list-style: none;
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-flow: row wrap;
    /* justify-content: center; */
    padding: 2.5rem 0 0 0;
}

nav li:first-child{
    /* border: 2px solid green; */
    text-align: right;
    margin: 0 auto 0 9.5rem;
}

nav li:nth-child(6){
    /* border: 2px solid springgreen; */
    margin: 0 9.5rem 0 0;
}

nav ul a{
    text-decoration: none;
    font-size: 0.9rem;
    color: hsl(236, 13%, 42%);
}

nav ul a:hover{
    color: hsl(236, 28%, 11%);
}

.hero-news{
    /* border: 2px solid red; */
    display: flex;
    margin: 3rem 0 0 0;
}

/* .hero-main-news{
    border: 2px solid rgb(50, 21, 216);
    width:80%;
} */

.hero-main-news p{
    /* border: 2px solid rgb(48, 12, 12); */
    width: 99%;
    color: hsl(236, 13%, 42%);
    /* margin: -1rem 0 0 0; */
}

.hero-main-news h1{
    /* border: 2px solid rgb(0, 255, 42); */
    font-size: 2.2rem;
    font-weight: bold;
    width: 90%;
}

.hero-main-news img{
    /* border: 2px solid red; */
    width: 78%;
    margin: 0 0 0 10rem;                                                                                                             ;
}

.main-news{
    /* border: 3px solid rgb(255, 118, 54); */
    display: flex;
    align-items: center;
    gap: 7rem;
    width: 80%;
    margin: 0 0 0 10rem;  
}

.top-news{
    /* border: 2px solid rgb(159, 255, 159); */
    margin: 0 11rem 0 0;
    padding: 0  0 0 0;
    width: 65%;
    background: hsl(240, 100%, 5%);
    color: hsl(36, 100%, 99%);
}

.top-news h2{
    margin: 2rem 0 0 1.2rem;
    color: hsl(35, 77%, 62%);
}


.news-width{
    font-size: 0.9em;
    color: hsl(36, 100%, 99%);
    /* border: 2px solid grey; */
    width: 80%;
    display: block;
}

.top-news article{
    margin: 2.2rem 0 0 1.2rem;
    /* border: 2px solid magenta; */
}

.line{
    border: 0.1rem solid ;
    color: hsl(0, 1%, 69%);
    width: 80%;
    margin-top: 2rem;
}

/* .top-news .first-news{
    color: blue;
    border: 2px solid green;
} */


.read-more{
    /* border: 2px solid rgb(230, 230, 13); */
    padding: 0.8rem 0.4rem;
    text-align: center;
    width: 35%;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 2rem 0 0 0;
    background: hsl(5, 85%, 63%);
}

.read-more a{
    text-decoration: none;
    color: hsl(36, 100%, 99%);
}

.sub-articles-section{
    display: flex;
    gap: 0.7rem;
    margin: 4rem 0 0 0;
}

.sub-articles-section h3{
    color: hsl(233, 8%, 79%);
}

.sub-articles-section span{
    color: hsl(236, 13%, 42%);
}

.retro-pc-preview{
     /* border: 2px solid rgb(39, 243, 226); */
     width: 95%;
     font-size: 0.8rem;
}

.retro-pc-img{
    min-width: 29%;
    height: 50%;
    margin: 1.2rem 0 0 0;
}

.top-laptops-img{
    min-width: 20%;
    height: 45%;
    margin: 1.2rem 0 0 0;
}

.top-laptops-preview{
    /* border: 2px solid rgb(43, 46, 226); */
    font-size: 0.8rem;
    width: 80%;
}

.gaming-growth-preview{
    /* border: 2px solid blueviolet; */
    width: 65%;
    font-size: 0.8rem;
}

/* .entire-retro-pcs-article{
    border: 2px solid purple;
} */

.entire-retro-pcs-article h4{
    /* border: 2px solid saddlebrown; */
    margin: -0.8rem 0 1rem 0;
}

.retro-pcs-article{
    display: flex;
    /* border: 2px solid rgb(0, 255, 42); */
    width: 22%;
    margin: 0 0 0 10rem;
    gap: 0.7rem;
}

.top-laptops-article{
    display: flex;
    /* border: 2px solid rgb(0, 162, 255); */
    width: 27%;
    gap: 0.7rem;
    margin: 0 -2.8rem 0 0;
}

.entire-top-laptops-article{
    /* border: 2px solid rgb(191, 53, 255); */
    width: 60%;

}

.entire-top-laptops-article h4{
    /* border: 2px solid saddlebrown; */
    margin: -0.8rem 0 1rem 0; 
}

.gaming-growth-article{
    /* border: 2px solid rgb(77, 241, 113); */
    display: flex;
    margin: 0 2rem 0 0;
    gap: 0.7rem;
}

.entire-gaming-growth-article h4{
    /* border: 2px solid saddlebrown; */
    margin: -0.8rem 0 1rem 0;
}

.gaming-growth-img{
    width: 17%;
    height: 47%;
    margin: 1.2rem 0 0 0;
}


.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }