body {
    background-color: whitesmoke;
    font-family: arial;
}

.gridstor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.ovningar {
    background-color: white;
    border-radius: 5px;
}

.första {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 5px;
    text-align: center;
    background-color: white;
}

.första p {
    margin: 0;
    padding: 8px;
    background-color: rgb(224, 225, 255);
}

.andra {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 6px;
    text-align: center;
    background-color: white;
}

.andra p {
    margin: 0;
    padding: 10px;
    background-color: rgb(254, 224, 224);
}

.box1 {
    grid-column: 1/3;
}

.box2 {
    grid-column: 2/4;
}

.tredje {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 5px;
    text-align: center;
    background-color: white;
}

.tredje p {
    margin: 0;
    padding: 10px;
    display: grid;
    align-items: center;
    background-color: rgb(224, 255, 224);
}

.box3 {
    grid-column: 1/3;
    grid-row: 1/3;
}

.box4 {
    grid-column: 4/5;
    grid-row: 2/4;
}

.box5 {
    grid-column: 2/4;
}

.fjärde {
    display: grid;
    grid-template-areas: 'header header header' 'sidebar maincontent maincontent' 'footer footer footer';
    gap: 10px;
    padding: 5px;
    text-align: center;
    background-color: white;
}

.fjärde p {
    margin: 0;
    padding: 10px;
    background-color: rgb(255, 224, 255);
}

.box6 {
    grid-area: header;
}

.box7 {
    grid-area: sidebar;
}

.box8 {
    grid-area: maincontent;
}

.box9 {
    grid-area: footer;
}

.femte {
    display: grid;
    grid-template-areas: 'header header header' 'main main right' 'footer footer footer';
    gap: 10px;
    padding: 5px;
    text-align: center;
    background-color: white;
}

.femte p {
    margin: 0;
    padding: 20px;
    background-color: rgb(172, 240, 239);
}

.femteb1 {
    display: grid;
    grid-area: right;
    gap: 10px;
    padding: 10px;
    background-color: rgb(172, 240, 239);
}

.femteb1 p {
    margin: 0;
    border-radius: 10px;
    background-color: rgb(244, 187, 110);
}

.femteb2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-area: footer;
    gap: 10px;
    padding: 10px;
    background-color: rgb(172, 240, 239);
}

.femte5b2 p {
    margin: 0;
    border-radius: 10px;
    background-color: rgb(244, 187, 110);
}

.B1 {
    grid-area: header;
}

.B2 {
    grid-area: main;
    padding: 200px;
}

.B3 {
    grid-area: right;
}

.B4 {
    grid-area: footer;
}

.sjätte {
    display: grid;
    grid-template-areas: 'header header header' 'sidebar maincontent maincontent' 'footer footer footer';
    gap: 10px;
    padding: 5px;
    text-align: center;
    background-color: white;
}

.sjätte p {
    margin: 0;
    padding: 20px;
    background-color: rgb(255, 224, 255);
}

.C1 {
    grid-area: header;
}

.C2 {
    grid-area: sidebar;
    width: 300px;
}


.C4 {
    grid-area: footer;
}