* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

body {
    background: rgb(0, 115, 255);
}

#wrapper {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 100px 250px 250px 1fr;
}

#bild1 {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

#namn {
    grid-column: 1 / 7;
    grid-row: 4;
    margin: 20px 0;
    text-align: center;
    font: bold 85px Georgia, serif;
    letter-spacing: 3px;
    color: rgb(0, 40, 90);
}

#ruta1, #ruta2, #ruta3 {
    width: 100%;
    max-width: 300px;
    justify-self: center;
    align-self: center;
}

#ruta1 { grid-column: 2; grid-row: 2; }
#ruta2 { grid-column: 5; grid-row: 2; }
#ruta3 { grid-column: 3 / 5; grid-row: 3; }

#ruta1 img, #ruta2 img, #ruta3 img {
    display: block;
    width: 100%;
}

.text1, .text2, .text3 {
    text-align: center;
    margin-top: 170px;
    font: bold 26px Georgia, serif;
    color: rgb(0, 40, 90);
}

.text1 { grid-column: 1 / 4; grid-row: 2; }
.text2 { grid-column: 4 / 7; grid-row: 2; }
.text3 { grid-column: 2 / 6; grid-row: 3; }

.text1, .text2, .text3, #namn {
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 20px cyan;
}

#skold, #anka {
    position: fixed;
    z-index: 10;
}

#skold {
    bottom: 20px;
    left: 20px;
    width: 280px;
}

#anka {
    bottom: -5px;
    right: 20px;
    width: 580px;
}

@media (max-width: 600px) {
    #wrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 120px 180px 180px 180px;
    }

    #namn {
        font-size: 34px;
        letter-spacing: 2px;
        padding: 0 10px;
    }

    #ruta1, #ruta2, #ruta3 {
        width: 140px;
    }

    #ruta1 { grid-column: 1; grid-row: 2; }
    #ruta2 { grid-column: 2; grid-row: 2; }
    #ruta3 { grid-column: 1 / 3; grid-row: 3; }

    .text1, .text2, .text3 {
        margin-top: 120px;
        font-size: 18px;
    }

    .text1 { grid-column: 1; grid-row: 2; }
    .text2 { grid-column: 2; grid-row: 2; }
    .text3 { grid-column: 1 / 3; grid-row: 3; }

    #skold {
        width: 110px;
        bottom: 10px;
        left: 10px;
    }

    #anka {
        width: 280px;
        bottom: -20px;
        right: -25px;
    }
}