html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

@font-face {
    font-family: Statik;
    src:url(fonts/wg_statik.woff);
}

/* palette = https://coolors.co/303633-1b9aaa-ff7e6b-f5f1e3-ef6461 */

body {
    background-color: #f5f1e3;
    display:grid;
    place-items:center;
    
}

main {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap:10px;
    grid-auto-rows:min-content auto;
    grid-template-areas: "h h h h h h h" 
                         ". n n n n n ." ;
}

.bakgrunn {
    position:absolute;
}

.navn {
    grid-area: h;
    text-align: center;
    font-size:xxx-large;
    /* font-family:Statik; */
    font-weight:100;
    color: #303633;
}

.navn > h1 {
    margin:0;
}

.navbar {
    grid-area: n;
    text-align: center;
    display: flex;
    gap:.5rem;
}

.navbar a {
    background-color: #FF7E6B;
    color:#303633;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    flex:1;
    padding:.5rem;
    border-radius: 20px;
    border:1px solid black;
    z-index: 9999 !important;
}

.bakgrunn {
    height:100%;
    width:100%;
}

.bakgrunn > div {
    background-color: #3498db; 
    border-radius: 50%; 
    position: fixed;
    z-index: -1;
}

#c1 {
    width: 22vw;
    height: 22vw;
    top:3vw;
    left:18vw;
}

#c2 {
    width: 17vw;
    height: 17vw;
    top:18vw;
    left:-7vw;
}

#c3 {
    width:24vw;
    height:24vw;
    bottom:-10vw;
    left:10vw;
}

#c4 {
    width:15vw;
    height:15vw;
    bottom:11vw;
    right:35vw;
}

#c5 {
    width:30vw;
    height:30vw;
    top:-15vw;
    right:10vw;
}

#c6 {
    width:45vw;
    height:45vw;
    bottom:-20vw;
    right:-20vw;
}