*{
    max-width: 2000px;
}


.container{
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: white;
    gap: 10px;
}

.container div{
    background-color: #e0e0ff;
    padding: 10px;
    font-size: 30px;
    text-align: center; 
}

.item1{
    grid-column: 1/ span 2;
}

.item4{
    grid-column: 2/ span 2
}

.itemrow1{
    grid-column: 1/ span 2;
    grid-row: 1/ span 2;
}

.itemrow5{
    grid-column: 4;
    grid-row: 2/ span 2;
}

.itemrow7{
    grid-column: 2/ span 2;
}
.grid_container{
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: white;
    gap: 10px;
    
}

.grid_container div{
    background-color: #ffe0e0;
    padding: 10px;
    font-size: 30px;
    text-align: center;
}

.bigfeature{
    background-color: white;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: white;
    gap: 10px;
}

.bigfeature div{
    background-color: #e0ffe0;
    padding: 10px; 
    font-size: 30px; 
    text-align: center; 
}

.namedfeature{
    background-color: white;
    display: grid; 
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    background-color: white;
    gap: 10px;
}

.namedfeature div{
    background-color: #ffe0ff;
    padding: 20px;
    font-size: 20px;
    text-align: center;
}

/* Kallar tillbaka de i koden*/

.header { grid-area: header;}
.sidebar {grid-area: sidebar;}
.main { grid-area: main;}
.footer { grid-area: footer;}

.wrapper5 {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Main + nav */
  gap: 10px;
  padding: 10px;
  
}

header {
     grid-column: 1 / -1; 
     background:#b1edf2; 
     padding:10px; }
main {
    background-color: #b1edf2;
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontal center */
    justify-content: flex-start; /* top alignment */
    padding: 50px;
}
nav{ 
    background:#f8b255; 
    padding:30px; 
    display:flex; 
    flex-direction:column; 
    gap:10px; 
}

/* Info-rutor som grid */
.info-container {
  grid-column: 1 / -1; /* tar hela raden */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* fyra lika rutor på samma rad */
  gap: 10px;
  background-color: #b1edf2;
  padding: 10px;
}

.info {
  background: #f8b255;
  padding: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 10px;
  
}

/* Meny-boxar i rad */
.menu-container {
    background: #b1edf2;  /* blått runt */
    display: flex;
    flex-direction: column; /* stapla vertikalt */
    gap: 10px;             /* mellanrum mellan rutor */
    border-radius: 8px;    /* rundade hörn om du vill */
}

.menu {
  flex: 1; /* alla rutor lika breda */
  background: #f8b255;
  padding: 20px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

nav{
    background-color: #b1edf2; 
}

.whitebox {
    background-color: white;
    padding: 20px;
    margin: 40px auto; /* avstånd mellan boxarna */
    border-radius: 10px;
    max-width: 1000px;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
}