*{
    margin:0;
    padding:0;
}

@font-face {
    font-family: "Ubuntu";
    src: url("../../site/Ubuntu/Ubuntu-Medium.ttf") format("truetype");
    font-style: normal; 
    font-weight: normal; 
}
:root{
    --max-width:1920px;
    --same-width:100%;
    --center-width:1278px;
    --that-block:1300px;
}
body{
    margin-left: auto;
    margin-right:auto;
    width:100%;
    max-width:var(--max-width);
    font-size:20px;
    font-family: "Ubuntu";
}
main{
    width:100%;
}
header{
    width:100%;
    max-width:var(--max-width);
    background: url("../img/origin.webp");
    background-position: center center;
    min-height:100vh;
    color:white;
    text-shadow:2px 2px black;
    display:grid;
    align-content: space-between;
    justify-content: center;
    justify-items: center;
    justify-items: start;
    transition: all ease-in 3s;
}
header > nav{
    max-width:var(--center-width);
    width:100%;
    max-width:var(--center-width);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    min-height:70px;
    align-content:center;
    justify-content: center;
    align-items: center;
    justify-items:center;
    transition:all 1s;
}
header > nav > strong{
    font-size:30px;
}
header > nav > div{
    min-height: 30px;
    display:grid;
    align-content: space-between;
    justify-content: center;
    align-items: center;
    transition:all 1s;
}
header > nav > div > span:nth-child(2){
    width:57px;
    transition:all 1s;
}
header > h1{
    text-shadow:-2px -2px 3px black;
    text-shadow:2px 2px black;
    width:100%;
    max-width:777px;
}
header > nav > ul > li{
    display:inline-block;
    transition:all 1s;
}
header > nav > ul > li > a{
    color:white;
    text-shadow:black 1px 1px;
    text-decoration:none;
    margin-right:3%;
}
header > nav > ul > li > a:hover{
    color:#DF6951;
    transition:all 1s;
}
header > nav > button{
    width:100%;
    max-width:152px;
    height:58px;
    background-color: #DF6951;
    color:white;
    border-radius: 7px;
    border: none;
    font-size:20px;
}
@media(max-width:700px){
    
    header > nav > ul{
        display:none;
    }
    
    header > nav > div > span{
        display:block;
        width:70px;
        height:3px;
        border-radius:7px;
        background-color: #DF6951;
    }
}
@media(min-width:700px){
    body > main > header > nav > div{
        display:none;
    }
}
img{
    width:100%;
    max-width:var(--max-width);
}
body > main > article > ol,body > main > article > ul{
    margin-left:17px;
}

.boxMenu{
    display:grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
    top:0;
    width:100%;
    height:0;
    background-color: #DF6951;
    font-size:0px;
    position:fixed;
    transition:all 1s;
    opacity:0;
}
.boxMenu > a{
    font-size:0;
    color:white;
    text-shadow:black 1px 1px;
    text-decoration:none;
    transition: all 1s;
}
.boxMenu > a:hover{
    color:aqua;
    transition: all 1s;
}


/* ARTICLE */
article{
    display:grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
    width:100%;
    /* grid-template-columns: repeat(1920px, 1fr);/ */
}
article > p{
    margin:1%;
}
.category{
    width:100%;
    max-width:var(--that-block);
    display:grid;
    min-height:500px;
    justify-content: center;
    align-items: center;
    justify-items: center;
}
.category > span{
    text-transform: uppercase;
    color:#DF6951;
}
.category > section > div > img{
    width:72px;
}
/* .category > section > div{
    
} */
.category > section{
    display:grid;
    justify-content: center;
    align-items: center;
    justify-items: center;

    width:100%;
    max-width:1300px;
    /* flex-wrap:wrap; */
    grid-template-columns: repeat(auto-fill, minmax(120px,320px));

}
.category > section > div{
    min-width:150px;
    width:100%;
    min-height:190px;
    max-width:200px;
    padding: 17px;
    display:grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
    box-shadow:3px 3px 13px black;
    border-radius: 37px;
    gap: 3px;
    margin:17px;
}
.category > section > div{
    font-size:12px;
}
.twoSlide{
    margin:0;
    padding:0;
    width:100%;
    display:grid;
    justify-content: space-around;
    grid-template-columns:repeat(auto-fill,minmax(583px,744px));
    margin-top:70px;
}
body > main > article > section.twoSlide > div:nth-child(2) > ol{
    width: 100%;
}
@media(max-width:700px){
    .twoSlide{
        grid-template-columns:repeat(auto-fill,minmax(100px,300px));
    }
    .category > section{
        max-width: 100%;
    }
}
.twoSlide > div > picture > img{
    width:100%;
    max-width:744px;
    height:762px;
    border-radius:337px 337px 0 0;
}

/* body > main > article > section.twoSlide > div:nth-child(2) */
.twoSlide > div:nth-child(2){
    width:100%;
    max-width:583px;
    min-height:380px;
    display:grid;
}
.twoSlide > div:nth-child(2) > button{
    width:176px;
    height:57px;
    background-color: #DF6951;
    border-radius: 17px;
    border:none;
    color:white;
    text-shadow:2px 2px black;
}
body > main > article > section.twoSlide > div:nth-child(2) > span{
    text-transform: uppercase;
    color:#DF6951;
}
body > main > article > section.twoSlide > div:nth-child(2) > ol{
    margin-left:17px;
}


.holiday{
    width:100%;
    max-width:1920px;
    height:399px;
    background-image: url("../img/lineSPB.png");
    background-position: center center;
    display:grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
    margin-top:70px;
    margin-bottom:70px;
}
.holiday > h3{
    color:white;
    font-size:70px;
    text-shadow: 2px 2px black;
}
body > main > article > section:nth-child(9){
    width:100%;
}




footer{
    width:100%;
    /* display:grid;
    justify-content: center;
    align-items: center;
    justify-items:center; */
    /* width:100px; */
    /* min-height:484px; */
    /* max-width:1300px; */
    /* grid-template-columns: repeat(auto-fill,minmax(140px,700px)); */
    /* grid-template-rows: 3ch auto minmax(10px, 60px); */
}
footer > div{
    display:grid;
    justify-content: center;
    align-items: center;
    justify-items:center;
    /* width:100px; */
    min-height:484px;
    /* max-width:1300px; */
    grid-template-columns: repeat(auto-fill,minmax(140px,700px));
}
footer > div > section > ul{
    margin: 7%;
}
/* body > main > footer > section:nth-child(2) */
footer > div > section:nth-child(2){
    width:100%;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(140px,300px));
    justify-content: center;
    align-items: center;
    justify-items: center;
}
body > main:nth-child(1) > footer:nth-child(3) > div:nth-child(1) > section:nth-child(1) > div:nth-child(1) > p:nth-child(2){
    width:100%;
    max-width:300px;
}
footer > div > section > div > div > img{
    width:20px;
}
footer > strong{
    display:flex;
    justify-content:center;
    align-items:center;
    justify-items:center;
    grid-template-columns: 1;
}