body {
    background-color: #a4c1b0;
    font-family: arial;
    margin: 10px;
    padding: 10px;
}

h1 {
    padding: 10px;
    font-size: 150%;
}

.debug {
    color: red;
    font-style: italic;
}

table {
    border-collapse: collapse;
    font-size: 100%;
    margin: 10px;
    padding: 10px;
}

tr:nth-child(2n+2) {
    background: #93ad9e;
}
tr:nth-child(2n+3) {
    background: #adc7b7;
}


/* border-width er gitt i rekkefølge top, right, bottom , left */
th {
    background: #93ad9e;
    margin: 5px;
    padding: 5px;
    border-style: ridge;
    border-width: 3px 3px 3px 3px;
}

td {
    border-style: ridge;
    border-width: 0px 3px 0px 3px; /* Høyre og venste ramme */
    padding: 3px;
}


/* Rammer hhv høyre/under/venstre for alle td-elementer i siste rad */
tr:last-child td {
    border-style: ridge;
    border-width: 0px 3px 3px 3px;
}


/*  Fjerner alle rammer i første tabell på hver side  */
table:first-child tr td {
    border-style: ridge;
    border-width: 0px 0px 0px 0px;
}

td.c {
    text-align: center;
}

td.r {
    text-align: right;
}

div.pic {
    display: inline-block;
    margin: 10px;
}



/* Basestil for listebilder (kvadrat, midten av bildet) */
img.liste {
    display: block;              /* unngå "gap" under img */
    width: 70px;                /* styr bredde her (kan være % i responsivt layout) */
    aspect-ratio: 1 / 1;         /* kvadratisk ramme */
    object-fit: cover;           /* fyll rammen, beskjær det som ikke passer */
    object-position: center;     /* fokusér midten */
    border-radius: 6px;          /* valgfritt: avrundede hjørner */
}

/* Basestil for listebilder (kvadrat, midten av bildet) */
img.oppskrift {
    max-width: 250px;
    max-height: 250px;
}

/* Responsivt eksempel: mindre på smale skjermer */
@media (max-width: 600px) {
    img.liste {
	display: block;              /* unngå "gap" under img */
	width: 50px;                /* styr bredde her (kan være % i responsivt layout) */
	aspect-ratio: 1 / 1;         /* kvadratisk ramme */
	object-fit: cover;           /* fyll rammen, beskjær det som ikke passer */
	object-position: center;     /* fokusér midten */
	border-radius: 4px;          /* valgfritt: avrundede hjørner */
    }
    img.oppskrift {
	max-width: 200px;
	max-height: 200px;
    }
}

/* Hvis du vil at bilder skal fylle bredden til containeren sin 
.container .liste {
  width: 100%;
  max-width: 320px;            /* sett en maks om ønskelig 
}
*/

/*   Slutt   */