:root {
    --primary: #ddd;
    --dark: #333;
    --anchorDark: #282a2b;
    --anchorYellow: #ffaf04;
    --navigatorBlue: #0f2033;
    --navigatorYellow: #f9ae39;
    --globeBlue: #008fbc;
    --lightGrey: #979797;
    --mediumGrey: #3a3a3a;
    --avellionBlue: #2b323b;
    --avellionLightBlue: #343f4d;
    --light: #fff;
    --green: #2f7347;
    --blue: rgb(26, 101, 172);
    --rouge: rgb(197, 37, 64);
    --orange: rgb(255, 171, 15);

    --JusticeBlack: #1f2228;
    --JusticeRed: #bb313f;
    --JusticeGray: #2d3036;
    --JusticeBeige: #bfba9d;
    --shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

@font-face {
    /*font-family: Saira-Condensed;
    src: url(font/SairaCondensed-Medium.ttf);*/
    font-family: Veneer Regular;
    src: url(font/Veneer-Clean-Regular.otf);
  }

@font-face {
    font-family: Oswald;
    src: url(font/Oswald-Medium.ttf);
  }

html {
    box-sizing: border-box;
    font-family: 'Veneer Regular', sans-serif;
    /*font-family: 'Quantico-Regular', sans-serif;*/
    /*font-family: 'Saira-Condensed', sans-serif;*/
    /*font-family: AnchorPoint;*/
    color: var(--primary);
}

/* ------------ SCROLLBAR ------------ */
/* width */
::-webkit-scrollbar {
    width: 12px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: var(--JusticeBlack);
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--JusticeGray);
    /*border-radius: 6px;*/
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--JusticeRed);
    /*border-radius: 6px;*/
}

body {
    /*font-family: "Lato", sans-serif;*/
    margin:0px;
}
  
  .sidenav {
    /*display: grid;
    grid-template-rows: repeat(1fr);*/
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--JusticeBlack);
    box-shadow: var(--shadow);
    overflow-x: hidden;
    padding-top: 1.2rem;
}
  
  .sidenav a {
    padding: 6px 6px 6px 32px;
    text-decoration: none;
    font-size: 1.6rem;
    color: var(--primary);
    display: block;
    max-height: 40px;
}
  
  .sidenav a:hover {
    background-color: var(--JusticeGray);
}

.logo-text {
    text-align: center;
    font-size: 2rem;
}

header img {
    width: 80px;
    padding-top: 2px;
    padding-left: 12px;
    float: left;
    pointer-events: none;
    user-select: none;
    /*display: block;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
    user-select: none;*/
}

.logo {
    width: 160px;
    padding-top: 2px;
    padding-left: 16px;
    padding-bottom: 2rem;
    float: left;
    pointer-events: none;
    user-select: none;
}

.sidenav a.active {
    color: var(--JusticeRed);
    background-color: var(--JusticeGray);
}

.footer {
    color: var(--primary);
    font-size: 1.2rem;
    padding-top: 26px;
    padding-left: 20px;
}

a.mail-text {
    color: var(--JusticeRed);
    font-size: 1rem;
    padding: 0px;
}

a.mail-text:hover {
    color: var(--primary);
    background-color: #00000000;
}

.footer-img {
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 2rem;
}
  
main {
    margin-left: 200px; /* Same as the width of the sidenav */
    background-image: url("img/Skyline-Background.jpg");
    background-repeat: no-repeat;
    background-position:top, left;
    background-size: 100% 100%;
    background-attachment: fixed;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

/* ------------ BUTTONS ------------ */

.btn {
    background-color: var(--JusticeGray);
    /*background-image:url("img/parchment_button.png");*/
    /*background-repeat: no-repeat;
    background-position:top, left;
    background-size: 100% 100%;*/
    color: var(--primary);
    padding: 0.6rem 1.6rem;
    text-decoration: none;
    /*border: 2px solid var(--lightGrey);*/
    border-radius: 6px;
    text-align: center;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.btn:hover {
    background-color: var(--JusticeRed);
    color: var(--primary);
    /*border: 2px solid var(--lightGrey);*/
    border-radius: 6px;
}

/* ------------ BUTTONS ------------ */
.article-btn {
    background-color: var(--JusticeGray);
    background-repeat: no-repeat;
    background-position:top, left;
    background-size: 100% 100%;
    color: var(--primary);
    padding: 0.6rem 1.6rem;
    text-decoration: none;
    /*border: 2px solid var(--anchorYellow);*/
    max-width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    text-align: center;
    border-radius: 6px;
    text-align: center;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.article-btn:hover {
    background-color: var(--JusticeRed);
    color: var(--primary);
    /*border: 2px solid var(--anchorYellow);*/
    border-radius: 6px;
    text-align: center;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

/* ------------ TOP CONTAINER ------------ */
.top-container {
    grid-area: top-conatiner;
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
        "showcase showcase showcase"
        "top-box-a top-box-a top-box-b";
    
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    color: var(--primary);
}

/* ------------ SHOWCASE ------------ */
.showcase {
    grid-area: showcase;
    min-height: 400px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.620),  rgba(0, 0, 0, 0.620)), url("img/norge_17_mai_003.png");
    /*background: #282a2b88;*/
    /*background-color: var(--anchorDark);*/
    background-size: cover;
    background-position: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    box-shadow: var(--shadow);
    border-radius: 12px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    12px right 12px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 12px left  12px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.showcase h1 {
    font-size: 4rem;
    margin-bottom: 0;
    color: var(--light);
    text-shadow: var(--shadow);
    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
    /*text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -6px 6px 0 #000, 2px 2px 0 #000;*/
}

.showcase p {
    font-size: 8.2rem;
    margin-top: 0;
    /*color: var(--light);*/
    color: var(--JusticeBeige);
    text-shadow: var(--shadow);
    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
    /*text-shadow: -2px -2px 0 var(--JusticeBlack), 2px -2px 0 var(--JusticeBlack), -6px 6px 0 var(--JusticeBlack), 2px 2px 0 var(--JusticeBlack);*/

}

/* ------------ TOP BOX ------------ */
.top-box {
    background: var(--JusticeBlack);
    /*background-image:url("img/parchment_horizontal_card.png");*/
    background-repeat: no-repeat;
    background-position:top, left;
    background-size: 100% 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    box-shadow: var(--shadow);
    padding: 1.5rem;
    font-size: 1.4rem;
    border-radius: 12px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    12px right 12px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 12px left  12px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.top-box h1 {
    color: var(--primary);
    font-size: 3rem;
    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
    text-shadow: var(--shadow);
}

.top-box .price {
    font-size: 2.5rem;
    color: var(--primary);
    font-family: 'Oswald', sans-serif;
}

.top-box-a {
    grid-area: top-box-a;
    background-color: var(--JusticeBlack);
    background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.620),  rgba(0, 0, 0, 0.620)), url("img/minimal-img-006.png");
}

.top-box-b {
    grid-area: top-box-b;
    background-color: var(--JusticeBlack);
    background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.620),  rgba(0, 0, 0, 0.620)), url("img/old-map-fredrikstad.jpg");
}

/* ------------ BOXES ------------ */
.boxes {
    grid-area: boxes;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    color: var(--JusticeRed);
}

.boxes h3{
    font-size: 2rem;
    color: var(--JusticeRed);
}

.boxes p {
    font-size: 1.4rem;
    color: var(--primary);
    font-family: 'Oswald', sans-serif;
}

.boxes a {
    font-size: 1.4rem;
}

.boxes .btn {
    max-width: 160px;
}

.box {
    background: var(--JusticeBlack);
    /*background-image:url("img/parchment_horizontal_card.png");*/
    background-repeat: no-repeat;
    background-position:top, left;
    background-size: 100% 100%;
    text-align: center;
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow);
    border-radius: 12px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    12px right 12px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 12px left  12px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.article-boxes {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr ));
    margin-left: 2rem;
    margin-right: 2rem;
    color: var(--JusticeRed);
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.article-boxes h3, p {
    color: var(--JusticeRed);
    font-size: 1.6rem;
}

#Info-Anchor {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    top: -4rem;
    visibility: hidden;
}

/* ------------ INFO ------------ */
.info {
    grid-area:info;
    background: var(--JusticeBlack);
    /*background-image:url("img/parchment_info.png");*/
    background-repeat: no-repeat;
    background-position:top, left;
    background-size: 100% 100%;
    /*box-shadow: var(--shadow);*/
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    padding: 3rem;
    margin-left: 2rem;
    margin-right: 2rem;
    font-size: 1.2rem;
    color: var(--JusticeRed);
    border-radius: 12px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    12px right 12px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 12px left  12px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.info-img {
    overflow: hidden;
    /*max-height: 680px;*/
    align-self: center;
    width: 100%;
    pointer-events: none;
    user-select: none;
    border-radius: 12px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    12px right 12px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 12px left  12px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.info-mail-text {
    text-decoration: none;
    color: var(--primary);
    font-size: 1.6rem;
    padding: 0;
}

.info-mail-text:hover {
    color: var(--JusticeRed);
}

.mail-text {
    text-decoration: none;
    color: var(--JusticeRed);
    font-size: 1.2rem;
    padding: 0;
}

.info p {
    color: var(--primary);
    font-family: 'Oswald', sans-serif;
}

/* ------------ ICONS ------------ */

.fab {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}

.fab:hover {
    opacity: 0.7;
}

#fab-facebook {
    background: #3B5998;
    color: var(--primary);
    border-radius: 6px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

#fab-twitter {
    background: #55ACEE;
    color: var(--primary);
    border-radius: 6px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

#fab-linked-in {
    background: #0077B5;
    color: var(--primary);
    border-radius: 6px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

#fab-google-plus {
    background: #dd4b39;
    color: var(--primary);
    border-radius: 6px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

#fab-fa-discord {
    background: #5865F2;
    color: var(--primary);
    border-radius: 6px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

#fab-fa-steam-square {
    background: #171a21;
    color: var(--primary);
    border-radius: 6px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    6px right 6px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 6px left  6px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

/* ------------ ARTICLE ------------ */
article {
    background: var(--JusticeBlack);
    /*background: #d3c8ac;*/
    border-radius: 12px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    20px right 20px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 20px left  20px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.article {
    box-shadow: var(--shadow);
    margin-bottom: 0rem;
    margin-top: 0rem;
    margin-left: 20%;
    width: 60%;
}

.article #img {
    overflow: hidden;
    max-height: 680px;
    width: 100%;
    pointer-events: none;
    user-select: none;
    border-radius: 12px;
}

.article #title, #info, .article h2, .paragraph, .info-header {
    padding-left: 6%;
    padding-right: 6%;
}

#title {
    margin-top: 26px;
    margin-bottom: 26px;
}

#info {
    font-size: 1.6rem;
    color: var(--lightGrey);
}

.article h1 {
    font-size: 4rem;
    color: var(--JusticeRed);
    padding-left: 6%;
    padding-right: 6%;
}

.article h2 {
    font-size: 2rem;
    color: var(--JusticeBeige);
}

.paragraph {
    font-size: 1.6rem;
    padding-bottom: 40px;
    margin-right: 10%;
    color: var(--primary);
    font-family: 'Oswald', sans-serif;
}

.info-header {
    font-size: 1.2rem;
    padding-top: 40px;
    margin-right: 10%;
}

.article-img {
    max-width: 80%;
    margin-left: 6%;
    margin-right: 14%;
    pointer-events: none;
    user-select: none;
    max-height: 600px;
    /*border: 6px solid var(--globeBlue);*/
    border-radius: 12px;
    --g: #000, #0000 1deg 180deg,#000 180deg;
    --mask:
    /*conic-gradient(from -45deg at top    12px right 12px,var(--g)) 100% 0   /51% 100% no-repeat,
    conic-gradient(from -225deg at bottom 12px left  12px,var(--g)) 0    100%/51% 100% no-repeat;*/
    -webkit-mask: var(--mask);
          mask: var(--mask);
}

.image-container {
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
    max-width: 80%;
    margin-left: 6%;
    margin-right: 14%;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr ));
}

.image-container .article-img {
    max-width: 92%;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 4%;
    margin-bottom: 4%;
    pointer-events: none;
    user-select: none;
    max-height: 600px;
}

.local-vid {
    width: 80%;
    margin-left: 10%;
    max-height: 600px;
    border: 6px solid var(--JusticeRed);
    border-radius: 12px;
}

.local-audio {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

/* ------------ Media Queries ------------ */
@media(max-width: 1420px) {

    .showcase p {
        font-size: 6rem;
    }

    .top-box {
        max-height: 600px;
    }

    .top-box h1 {
        font-size: 2rem;
    }

    .top-box .price {
        font-size: 1.6rem;
    } 

    .boxes {
        grid-template-columns: 1fr 1fr;
    }

    .info {
        grid-template-columns: 1fr;
    }

    .info-img {
        max-width: 620px;
    }

    .article {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

    .article-btn {
        padding: 0.6rem 1.3rem;
        max-width: 50%;
        margin-left: 25%;
        margin-right: 25%;
    }

}

@media(max-width: 970px) {
    
    .top-container {
        grid-template-areas: 
            "showcase"
            "top-box-a"
            "top-box-b";
    }

    .showcase h1 {
        font-size: 2.5rem;
    }
    
    .showcase {
        max-height: 540px;
    }

    .showcase p {
        font-size: 4rem;
    }

    .top-box {
        max-height: 270px;
    }

    .top-box h1 {
        font-size: 1.6rem;
    }

    .top-box .price {
        font-size: 1.2rem;
    } 

    .box h3 {
        font-size: 1.6rem;
    }

    .box p {
        font-size: 1.2rem;
    }

    .article {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .article-btn {
        padding: 0.6rem 1.3rem;
        max-width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media(max-width: 620px) {

    .boxes {
        grid-template-columns: 1fr;
    }

}