* {
    box-sizing: border-box;
}

.container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background-color: white;
    padding: 10px;
    text-align: center;
 
    border: 10px solid white
}

.container div {
    background-color: rgb(203, 203, 249);
    text-align: center;
    padding: 20px;
    font-size: 20px;
    
    
}

.container2{
    display: grid;
    grid-template-columns: repeat(3, 3fr);
    gap: 10px;
    padding: 10px;
    text-align: center;

    border: 10px solid white;
    background-color: white;
}

.container2 div {
    background-color: rgb(249, 203, 203);
    text-align: center;
    padding: 20px;
    font-size: 20px;

    
}

.item1{
    grid-column-start: 1;
    grid-column-end: 3;
   
}

.item4{
    grid-column-start: 2;
    grid-column-end: 4;
   
}

.container3{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    padding: 20px;
    text-align: center;

    border: 10px solid white;
    background-color: white;
}

.container3 div {
    background-color: rgb(203, 249, 203);
    text-align: center;
    padding: 20px;
    font-size: 1.3em;
    align-items: center;
    justify-content: center;    
    gap: 10px;
}

.feature{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;

}


.box2{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
   display: flex;
    align-items: center;
    justify-content: center;
    
}

.box3{
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: center;

}

.box4{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box5{
    grid-column: 4 / 5;
    grid-row: 2 / 4;
    display: flex;
    align-items: center;
    justify-content: center;

}

.box6{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;

}

.box7{
    grid-column: 2 / 4;
    grid-row: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;

}

.container4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    padding: 20px;
    text-align: center;

    border: 10px solid white;
    background-color: white;
}

.container4 div {
    background-color: rgb(255, 221, 248);
    text-align: center;
    padding: 20px;
    font-size: 1.3em;
    align-items: center;
    justify-content: center;    
    gap: 10px;
}

.header{
    grid-column: 1 / 5;
    grid-row: 1 / 2;
    background-color: rgb(255, 221, 248);
    display: flex;
    align-items: center;
    justify-content: center;

}

.sidebar{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: rgb(255, 221, 248);
    display: flex;
    align-items: center;
    justify-content: center;

}

.content{
    grid-column: 2 / 5;
    grid-row: 2 / 3;
   background-color: rgb(255, 221, 248);
    display: flex;
    align-items: center;
    justify-content: center;

}

.footer{
    grid-column: 1 / 5;
    grid-row: 3 / 4;
 background-color: rgb(255, 221, 248);
    align-items: center;
    justify-content: center;
    display: flex;

}


.container5 {
    display: grid;
    grid-template-areas: 'header header header'
                         'main main sidebar'
                         'footer footer footer';
grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    padding: 15px;
    text-align: center;
    background-color: white
}

.container5 div {
    text-align: center;
    gap: 10px;
    text-align: center;
}

.header2{
    grid-area: header;
    background-color: rgb(138, 242, 242);
    padding: 20px;
    font-size: xx-large;
}



.content1{
    grid-area: main;
    background-color: rgb(138, 242, 242);
    align-items: center;
    justify-content: center;
   font-size: normal; 
    
}

.sidebar2{
    grid-area: sidebar;
    
    display: grid;
    background-color:rgb(138, 242, 242);
    gap: 0px;
    
}



footer{
    grid-area: footer;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color:rgb(138, 242, 242);
   padding: 10px;
    gap: 10px;
}

p{
    background-color: orange;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
   margin: 15px;
}
h{
    font-size: xx-large;
    font-family: Arial, Helvetica, sans-serif;
}

a{
text-decoration: none;
    color: black;

}
a:hover{
    color: blue;
    text-decoration: underline;
}
a:visited{
    color: black;
    text-decoration: none;
}

b{
    text-decoration: underline;
}