@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --font1: "Poppins", sans-serif;
  --font2: "Montserrat", sans-serif;
  --font3: "Inter", sans-serif;

  --color1: rgb(180, 180, 180);
}

article{
    margin: 30px 0;
    border: 3px solid black;
    box-shadow: 4px 4px black;
 
    width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.article-intro{
    background-color: var(--color1);
    border-bottom: 3px solid black;
    
    padding: 15px 25px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.article-title h1{
    font-weight: 500;
    font-size: 19px;
}

.article-date time{
    font-weight: 700;
}

.article-content{
    padding: 20px 35px;
    width: 100%;
}

.article-content h1{
    font-size: 26px;
    margin-bottom: 6px;
}

.article-content h2{
    margin: 15px 0 10px 0;
    font-size: 22px;
    font-weight: 600;
}





/*media query*/





@media (max-width: 1220px){
    article{
        width: 800px;
    }
}

@media (max-width: 820px){
    article{
        margin: 20px 0;
        width: 460px;
    }

    .article-content{
        padding: 15px;

    }
}

@media (max-width: 480px){
    article{
        margin: 10px 0;
        width: 300px;
    }

    .article-intro{
        padding: 10px;
    }

    .article-title h1{
        font-size: 18px;
    }

    .article-date time{
        font-size: 14px;
        margin-right: 10px;
    }

    .article-content{
        padding: 8px;
    }

    .article-content h1{
        font-size: 23px;
    }

    .article-content h2{
        font-size: 20px;
    }

    .article-content p{
        font-size: 15px;
    }
}