/*---------------FONTS----------------*/
/* "Ubuntu" p, "Rubik Distressed" h1, "Audiowide" h2-h6.*/

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: white;
}
.titill{
    font-family: "Audiowide", sans-serif;
    font-weight: 500;
    padding: 1rem 0;
    margin: 0;

}
p, .titill{
    line-height: 1.8rem;
}

/*========= NAVBAR  og LINKS =========*/
a:link{
    text-decoration: none;
    color: rgb(47, 136, 136);
    padding: 2px;
}
a:hover, a:active{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.5);
}
a:visited{
    color: pink;
}

nav{
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    text-align: center;
    align-items: center;
    padding: .5rem;
    background-color: rgb(41, 117, 117);
}
nav a:link{
    text-decoration: none;
    background-color: rgb(47, 136, 136);
    color: black;
    border-radius: .5rem;
    font-size: 1.2em;
    padding: .5rem;
}
nav a:visited{
    color: black;
    background-color: rgb(47, 136, 136);
}
nav a:hover, nav a:active{
    background-color: rgb(37, 104, 104);
    color: white;
}


/*========= HEADER =========*/
header{
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}
header h1{
    font-family: 'Rubik Distressed', cursive;
    font-size: 2.5rem;
    font-weight: normal;
    margin: 0 0 -10rem 0;
    z-index: 1;
    text-align: center;
}
.language{
    margin: 0;
    font-size: .9rem;
    z-index: 1;
    margin: 0 0 -3rem 0;
}
.language a, .language a:visited{
    background-color: rgb(31, 31, 40);
    border: 1px solid white;
    color: rgb(47, 136, 136);
    border-radius: .5rem;
    padding: .5rem;
}
header .language {
    position: absolute;
    top: 1em;
    right: 2em;
}

/*========= MAIN =========*/
.container section{
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.col-2, .col-3, .col-4{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    justify-items: center;
    align-items: start;
}

/*========= FOOTER =========*/

/*========= BACKGROUND =========*/
.body-bg{
    background-color: rgb(15, 15, 15);
}

.base-bg{
    background-image: linear-gradient(to top, rgb(31, 31, 40), rgb(21, 21, 30));
    padding: 1rem;
}
.footer-bg{
    background-image: linear-gradient(to top, rgb(31, 31, 40), rgb(39, 39, 51));
    padding: 1rem;
}

/*========= AUKA =========*/
strong{
    color: pink;
    font-size: larger;
}
.center{
    text-align: center;
    margin-bottom: 0;
}
.float-right{
    float: right;
    padding: .5rem;
}
.info{
    text-align: center;
    font-weight: 300;
    font-style: italic;
    padding: .5rem;
    margin: 0;
}

/*========= MYNDIR =========*/
.page2 img{
    max-width: 50%;
}
img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
    border-radius: .5rem;
}
picture img{
    width: 100%;
    height: auto;
    border-radius: 0;
}
.page5 img{
    display: flex;
}

/*---------------AUDIO----------------*/
audio{
    display: inline-block;
    margin: 0 auto;
    width: 100%;
}


/*---------------KORT----------------*/
.kort{
    width:100%;    
    height:15.75rem;
}
/*---------------WINDOW----------------*/

.gluggi{
    width:100%;
    height:13.5rem;
    margin: auto;
}

/*---------------TOP BUTTON----------------*/
.top-btn{
    position: fixed;
    right: 1em;
    bottom: 1em;
    padding: .7rem .6rem;
    border-radius: 50%;
    text-decoration: none;
    font-size: .8em;
    box-shadow: 2px 2px 10px black;
    z-index: 2;
}

/*========= MEDIA =========*/
/*---------------37.5rem----------------*/
@media screen and (min-width:37.5rem) {
    nav{
        display: flex;
        justify-content: space-between;
    }
    nav a:link{
        font-size: 1.2em;
    }
    .kort {
      height:19.7rem;
    }

    .base-bg, .footer-bg{
        padding: 1.5rem;
    }

    .gluggi {
      height:19.7rem;
    }
    
}

/*---------------48rem----------------*/
@media screen and (min-width:48rem) {
    .top-btn{
        font-size: 1.2em;
    }

    .col-2, .col-3, .col-4{
        grid-template-columns: 1fr 1fr;
    }

    header h1{
        font-size: 4rem;
        margin: 0 0 -12rem 0;
    }
    .base-bg, .footer-bg{
        padding: 2rem;
    }
    
    .kort{
    height:28.2rem;
    }

    .gluggi{
    height:24.6rem;
  }
}

/*---------------60rem----------------*/
@media screen and (min-width:60rem) {
    nav, nav a{
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .top-btn{
        font-size: 1.5em;
    }

    header h1{
        font-size: 5rem;
        margin: 0 0 -15rem 0;
    }
    
    .base-bg, .footer-bg{
        padding: 2.5rem;
    }

    .gluggi{
    height:33rem;
    }
}
/*---------------80rem----------------*/
@media screen and (min-width: 80rem) {
    .container{
        max-width: 80rem;
        margin: 0 auto;
    }
    .top-btn{
        font-size: 2em;
    }
    .col-3{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .col-4{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    
    header h1{
        font-size: 6rem;
        margin: 0 0 -20rem 0;
    }

    .base-bg, .footer-bg{
        padding: 3rem;
    }

    .gluggi {  
      height:44em;
    }
}
/* !!!!!! GERA STÆRRI MEDIA !!!!!!!!!! */