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

*
{
margin:0px;
padding:0px;
}

:root
{
--layout:grid;
--place-items-center:center;
--place-content-center:center;
--place-items-strech:strech;
--place-content-strech:strech;
--text-center:center;
--main-color:#080f3c;
--alternative-color:#efe3a9;
--font-family:'Smooch', cursive;
}

body,nav,aside,article,footer,nav ul
{
    display:var(--layout);
    background:var(--alternative-color);
    color:var(--main-color);
    font-weight:600;
    place-items:var(--place-items-center);
    place-content:var(--place-content-center);
}

body 
  {
    min-height:100vh;
    text-align:var(--text-center);
    font-family:var(--font-family);

   }

h1
  {
    color:var(--main-color);
    font-size: 60px;
    margin:40px auto;
  }
  
.container
{
display:var(--layout);
grid-template-rows: [row1-start]15% [row2-start] auto [row3-start]auto [row4-start]10%;
grid-template-columns: repeat(4,1fr);
grid-template-areas: 'hd hd hd hd'
                     'sd art art art'
                     'foo foo foo foo';
min-height:500px;
border-radius:10px;
border:10px dashed var(--main-color);
/*-grid-template-columns: [first]50px  [line2]auto [line3]auto [line4]50px;*/
/*grid-auto-columns: 100 px;*/
margin-bottom: 30px;
overflow:scroll;

}


nav,footer,article,aside 
{
    border:5px solid var(--main-color);
    grid-row-start: span row4-start;
    grid-row-end:5;
    
}

nav{
   
    grid-area: hd;
    grid-column: 1 / 5;/* grid-column-start: 1;grid-column-end: 5;*/
    grid-row: 1/2;/*mean start from row 1 end to starting of row 2*/
}
nav ul {
    max-width: 100%;
    list-style:none;
    grid-template-columns:repeat(4,1fr);
}

nav ul li 
{      
    background: var(--alternative-color);
    padding:10px;
    cursor: pointer;
    border-right: 5px solid var(--main-color);
}

nav ul li:last-of-type {
    border-right: none;
}
nav ul li:hover {
    color:#262b54;
    background: repeating-linear-gradient(358deg,var(--alternative-color),var(--main-color) 2px);
    mix-blend-mode: hard-light;
}

aside {
  
    grid-area: sd;
    grid-row: 2 / 4;
    background:radial-gradient(var(--alternative-color), transparent);

}
article 
    {
    grid-area:art;
    grid-row: 2 / 4;
    background:radial-gradient(var(--alternative-color), transparent);
     }

footer{
    grid-area: foo;
    grid-row: 4/5;
   /* grid-column: 8 / 9;*/
    background:radial-gradient(var(--alternative-color), transparent);

}