/*setter skrifttypen for hele nettsiden*/
body {
    font-family: American Typewriter, serif;
}

/*header-elementet - grønn bakgrunnsfarge, hvit tekstfarge, sentrert 
teksten, legger til padding for å gi litt luft rundt innholdet.*/
header {
    background-color: #56be8c;
    color: #fff;
    text-align: center;
    padding: 20px;
}

/*Grid-layout for hovedinnholdet. Sentrerer elementene både horisontalt og vertikalt. 
padding rundt hovedinnholdet. hvis ikke - 3 eller mere rader*/
.grid-container {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

/*Dette gir hver "tur"-container et eget CSS Grid-layout med kolonner 
som justerer seg etter tilgjengelig plass. Minimum bredde for hver kolonne er 400px, 
og gapet mellom kolonnene er 20px.*/
.tur {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /*responsiv nettside*/
    gap: 20px;
}

/*styles til bilder og tekst*/
.turbilder {
    position: relative;
    overflow: hidden; /*hindrer "overflow"*/
    border: 5px solid #dddddd;
    width: 100%;
    height: auto;
    text-align: center;
}
img {
    display: block;
    width: 100%;
    height: auto;
}

/*overleggseffekt til "turbilder"*/
.overlay {
    position: absolute;
    top: 0; /* shaddow over hele boksen */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center; /*midstiller "les mer" knappen*/
    align-items: center;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/*styles til knappen*/
.info-box button {
    color: white;
    background-color: #3498db;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
}

/*Overleggseffekten vises*/
.turbilder:hover .overlay {
    opacity: 1;
}