@font-face {
  font-family: "Arial-BoldMT";
  src: url("Fonts/Arial-BoldMT.ttf");
}

@font-face {
  font-family: "BuurtCampusArial-Bold";
  src: url("Fonts/BuurtCampusArial-Bold.ttf");
}

*{
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}

.blockquote-oranje{
    max-width: 25ch;
    font-family: arial, Arial-BoldMT;
    background-color: orange;
    color: white;
    justify-self: center;
    text-align: center;
    font-size: xx-large;
    font-style: oblique;
    font-weight:600;
    margin: 2em 0 2em 0;
    padding: 1em;
    border-radius: 100px;
}

/* :root {
    --header-size: 0.7;
} */

.logo {
    width: 105px
    /* width: calc(150px * var(--header-size)); */
}

#navList{
    padding: 0 0 0 0;
    display: flex;
    gap: 0em;
    justify-content: center;
    translate: center;
    white-space: nowrap;
    padding-left: 1.5em;
    flex-wrap: wrap;

        @media (min-width: 360px) {
            flex-wrap: nowrap;
        }

        @media (min-width: 570px){
        gap: 1em;
        }
}

/* knoppen in de nav */
.navKnop{
    color: rgb(51 52 103);
    padding-right: 2rem;
    translate: 0 0;
}

/* hier nog even naar kijken */
/* .navKnop::after {
    content:"00"
} */

/* hover function met vlaggetje clipper */
.navKnop:hover,.navKnop:focus-visible{
    background-color: white;
    /* padding-right: 2rem; */
    clip-path: polygon(90% 0, calc(95% - 1.5em) 50%, 90% 100%, 0 100%, 0 0);
    padding: 0.1em 2.5em 0.1em 0.5em;
}

/* kleurverrandering als je klikt op de navKnop */
.navKnop:active{
    color: lightblue;
}

li{
    list-style: none;
}
li a{
    text-decoration: none;
    padding: 0.5em;
}

/* Nav */
a{
    font-size: 0.8em;
    font-family: Arial;
    font-weight: bold;
    display: block;
}

/* title */
h1{
    font-size: 18pt;
    font-family: Arial;
    font-weight: lighter;
}

/* het woord krant in onder het logo */
h6{
    font-size: 1.54em;
    /* font-size: calc(2.2em * var(--header-size)); */
    /* font-family: arial, Arial-BoldMT; */
    font-family: BuurtCampusArial-Bold;
    color: rgb(51 52 103);
    line-height: 0.6em;
}

/* basic text */
p{
    font-size: 1em;
    font-family: arial;
    padding-bottom: 1.5em;
}

/* platte text bold */
p.intro {
    font-size: 1em;
    font-family: Arial;
    font-weight: bold;
    padding-bottom: 0.5em;
}

/* text bold */
.bold {
    font-weight: bold;
    display: block;
}


/* title vertical */
.sideTitle{
    font-size: 28pt;
    font-family: BuurtCampusArial-Bold;
    font-weight: 300;
    writing-mode:vertical-rl;
    rotate:180deg;
    align-items: center;
    white-space: nowrap;
    display: flex;
    float: left;
    padding: 0.5em 0 0.5em 0.5em;
}

/* naam van buurt met vlaggetje links boven in pagina */
.headerBuurtTitle{
    font-family: BuurtCampusArial-Bold;
    clip-path: polygon(90% 0, calc(100% - 1.5em) 50%, 90% 100%, 0 100%, 0 0);
    background-color: rgb(51 52 103);
    color: white;
    padding: 0.1em 2.5em 0.1em 0.5em;
    width: max-content;
}

header {
    display: flex;
    grid-column: span 2;
    background-color: RGB(180 189 208);
    position: sticky;
    z-index: 10;
        top: 0;
        gap: 1.5em;
        padding: 1em 1em 0.5em 1em;
        flex-direction: column;
        align-items: center;
}

header > div {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}


@media (min-width: 480px) {
    h6{
    /* font-size: calc(2.2em*var(--header-size)); */
    }
    header {
        display: grid;
        grid-template-columns: 1fr max-content 1fr;
        width: 100%;
        padding: 1em;
        place-items: center start;
    } 
}       

main{
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 0.5em 1.5em 0.5em 1.5em;
    max-width: 500px;
    margin: 0 auto;
    
        @media (min-width: 500px){
            padding: 2em 4em 2em 4em;
        }

    /* @media (min-width: 900px){
        display: grid;
        padding: 2em 2em 0 2em;
        grid-column: span 2;
        grid-template-columns: 1fr 1fr;
    } */
        
    /* @media (min-width: 570px) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        padding: 1em 2em 0 2em;
        gap: 1em;
        } */
    }

body{
width: 100%;
}