@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --soft-orange: hsl(35, 77%, 62%);
    --soft-red: hsl(5, 85%, 63%);
    --off-white: hsl(36, 100%, 99%);
    --grayiesh-blue: hsl(233, 8%, 79%);
    --dark-grayiesh-blue: hsl(236, 13%, 42%);
    --dark-blue: hsl(240, 100%, 5%);
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    max-width: 1200px;
    margin: auto;
    min-height: 100vh;
    background-color: var(--primary-color);
    font-family: 'Inter', sans-serif;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}
body::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
img {
    max-width: 100%;
    width: 100%;
    display: block;
}

header {
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a {
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

ul {
    list-style-type: none;
}

.logo {
    width: 70px;

}

nav {
    margin-left: auto;
    position: relative;
}

nav ul {
    display: flex;
    justify-content: space-between;

}

nav ul li a {
    color: var(--dark-grayiesh-blue);
    font-size: 1.15rem;
    margin: 1em;
    position: relative;
    transition: all 300ms;
}

nav li a:hover {
    color: var(--soft-red);
    font-weight: bold;

}

.menu__checkbox,
.hamburger {
    display: none;
}

main {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.news_img_container img {
    max-width: 720px;
}

.news__content {
    padding: 2rem 2rem 2rem 0;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.8rem;
}

.news__content h1 {
    font-weight: 800;
    font-size: 2.8rem;
}

.news__content p {
    grid-column: 2/3;
    color: var(--dark-grayiesh-blue);
    line-height: 1.5;
    animation: fadeIn 1.2s both;
}

.news__content .btn {
    display: inline-block;
    margin-top: 2rem;
    background-color: var(--dark-blue);
    color: var(--off-white);
    padding: 0.85rem 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
}

.news__content .btn:hover {
    background-color: var(--soft-red);
}

aside {
    max-width: 400px;
    padding: 1.8rem;
    background-color: var(--dark-blue);
    color: var(--off-white);
}


aside h2 {
    font-size: 3rem;
    color: var(--soft-orange);
    animation: bounce 1.5s both infinite; 
}

.new__news {
    padding: 0 0 1.95rem 0;
}

.new__news ul li {
    padding: 1.8rem 0;
    animation: fadeIn 1.2s both;
}

.new__news ul li:not(:last-child) {
    border-bottom: 1px solid hsla(36, 100%, 99%, 0.3);
}

.new__news ul li:last-child {
    padding-bottom: 0;
}

.new__news ul li:nth-child(2) h3 {
    color: var(--soft-orange);
}

.new__news ul li a {
    color: inherit;
}

.new__news ul li h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.new__news ul li h3:hover,
.top3_news_description a:hover {
    color: var(--soft-red);
}

.new__news ul li p {
    font-size: 1rem;
    opacity: 0.75;
    line-height: 1.5;
    
}

.top3_news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 4rem 1.5rem;
    gap: 2rem;
   
}


.news {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1.5rem;
    --delay:0.8s;
    animation: fromBottom 0.9s both;
}
.news2{
    animation-delay:calc(var(--delay) * 1.3);
}
.news3{
    animation-delay:calc(var(--delay) * 2);
}
.top3_news_description {
    display: grid;
    gap: 0.4rem;
}

.top3_news_description h2 {
    font-size: 2rem;
    color: var(--grayiesh-blue);
}

.top3_news_description h2 + a {
    font-weight: 800;
    font-size: 1.2rem;
}

.top3_news_description p {
    font-size: 0.94rem;
    color: var(--dark-grayiesh-blue);
}
footer{
    font-size: 1.2rem;
    text-align: center;
    padding:2rem;
    background-color: var(--dark-blue);
    color:#fff;
}
footer a{
    color:#fff;
}
.backdrop{
    position: fixed;
    display: block;
    left:0;
    top:0;
    width: 100%;
    height:100%;
    z-index: 998;
    background-color: rgba(0,0,0,0.4);
    cursor:default;
    display: none;
}
/************* ANIMATION ************/
@keyframes fromBottom {
    0%{
        opacity: 0;
        transform: translateY(100%);
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
@keyframes fadeIn{
    0%{
        opacity: 0;
        
    }
    100%{
        opacity: 1;
    }
  }
/* MEDIA Queries */
@media (max-width:850px) {

    .news_img_container img {
        max-width: 100%;
    }

    main {
        flex-direction: column;
    }

    aside {
        max-width: 100%;
    }

    aside h2 {
        text-align: center;
        margin-bottom: 1.3rem;
    }

    aside ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        gap: 1.5rem;

    }

    .new__news ul li {
        padding: 1.5rem 0;
        padding-right: 1.5rem;
    }

    .new__news ul li:not(:last-child) {
        border-bottom: none;
    }

    .new__news ul li {
        border-right: 1px solid hsla(36, 100%, 99%, 0.3);

    }
}

@media (max-width:780px) {
    nav {
        display: block;
        position: fixed;
        top: 0;
        right: -250px;
        width: 250px;
        height: 100vh;
        background-color: var(--dark-blue);
        z-index: 1000;
        padding: 2rem;
        transition: all .3s ease-in-out;

    }

    nav ul {
        color: var(--off-white);
        flex-direction: column;
        margin-top: 5rem;
    }

    nav ul li {
        margin: 1.5rem 0;
    }

    nav ul li a {
        color: var(--off-white)
    }

    .menu__background {
        height: 3.5rem;
        width: 3.5rem;
        border-radius: 50%;
        position: fixed;
        top: 1.5em;
        right: 1.5rem;
        z-index: 10;
        text-align: center;
    }

    .menu__button {
        cursor: pointer;
        position: fixed;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        top: 1.3rem;
        right: 1.5rem;
        z-index: 1001;
        text-align: center;
    }

    .hamburger {
        position: relative;
        margin-top: 2rem;
    }

    .hamburger,
    .hamburger::before,
    .hamburger::after {
        width: 2rem;
        height: 3px;
        background-color: var(--soft-red);
        display: inline-block;
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
        transition: all .2s;
    }

    .hamburger::before {
        top: -0.7rem;
    }

    .hamburger::after {
        top: 0.7rem;
    }

    .menu__button:hover .hamburger::before {
        top: -0.8rem;
    }

    .menu__button:hover .hamburger::after {
        top: 0.8rem;
    }

    .menu__checkbox:checked+.menu__button .hamburger {
        background-color: transparent;
    }

    .menu__checkbox:checked+.menu__button .hamburger::before {
        top: 0;
        transform: rotate(135deg);
    }

    .menu__checkbox:checked+.menu__button .hamburger::after {
        top: 0;
        transform: rotate(-135deg);
    }

    .menu__checkbox:checked~nav {
        right: 0;
    }

    .menu__checkbox:checked ~ .backdrop{
        display: block;
    }
}

@media (max-width:650px) {
    .news__content {
        grid-template-columns: 1fr;
    }

    br {
        content: ' ';
    }
 
}