@font-face {
    font-family: font;
    src: url(./all/Roboto-Regular.ttf);
}

* {
    font-family: font;
}



body {
    margin: 20px 0px 20px 10px;
    font-size: 16px;
    background-color: rgb(255, 255, 255);


}





.total {
    width: 100%;
    max-width: 1800;
    margin: 0 auto;
    display: grid;
    /* columns 30; */
    /* rows 30; */
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px ;
    row-gap: 5px;
    column-gap: 5px;
    font-size: 1.1;



}


.all-index1 {
    grid-column: 1/-1;
    grid-row: 1/-1;
    display: block;
}


.all-index2 {
    margin-right: 10px;
}


/* header */

.header1 {
    border: 3px solid rgb(172, 172, 172);
    border-radius: 10px;

}

.header-img {
    border-radius: 10px;

}


.header-img {
    width: 100%;
    height: 214px;

}


.body1{
 border: 3px solid rgb(172, 172, 172);
    border-radius: 10px;
    display: block;
}

.body2{
    margin: 5px;
    display: block;
    width: 98%;
}



.body3{
    margin: 5px 5px 5px 0px;

}



.body-text {
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    margin-right: 5px;
    
}


.body-a {
    text-decoration: none;
    display: block;
    color: rgb(0, 0, 0);
    padding: 0px;
    margin: 5px 5px 5px 0px;
}



/* footer */

.footer1 {
    border: 3px solid rgb(172, 172, 172);
    border-radius: 10px;
    display: block;
}


.footer2 {
    margin: 5px;
    display: block;
    width: 98%;


}



/* article */

.article-1 {
    grid-column: 1/-1;
    grid-row: 78/85;
    overflow: auto;
    overflow-wrap: break-word;
    word-break: keep-all;
    border-radius: 10px;
    overflow-x: hidden;
    border: 3px solid rgb(172, 172, 172);
}

.article-2 {
    width: 98%;
    height: 100%;
    display: block;
    margin: 0 auto;
    padding: 0 auto;
    margin: 5px 5px 5px 5px;
}

.article-a {
    text-decoration: none;
    display: block;
    color: rgb(0, 0, 0);
    padding: 0px;
    margin: 5px 5px 5px 0px;
}


.introduction {
    margin-right: 10px;
}


.button {
    border: 3px solid rgb(172, 172, 172);
    background-color: rgb(255, 255, 255);
    padding: 7px;
    border-radius: 10px;
    text-decoration: none;
    display: inline;
    color: rgb(0, 0, 0);
    text-align: center;
    outline: 0;
    width: fit-content;
    margin: 0 auto;
    padding: 0 auto;
    float: right;
    margin-left: 10px;

}



@media (max-width:1024px) {}

@media (max-width:850px) {}

@media (max-width:660px) {}

@media (max-width:440px) {}

@media (max-width:320px) {}

@media (max-width:250px) {}