grimm_website/css/style.css

/* Fonts */
@font-face {
    font-family: 'graublau_web';
    src: url('https://pfadfinder-goettingen.de/fonts/graublauweb-regular-webfont.woff2') format('woff2'),
         url('https://pfadfinder-goettingen.de/fonts/graublauweb-regular-webfont.woff') format('woff'),
         url('../fonts/graublauweb-regular-webfont.woff2') format('woff2'),
         url('../fonts/graublauweb-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cpd_bundesschrift';
    src: url('https://pfadfinder-goettingen.de/fonts/cpdbundesschrift-webfont.woff2') format('woff2'),
         url('https://pfadfinder-goettingen.de/fonts/cpdbundesschrift-webfont.woff') format('woff'),
         url('../fonts/cpdbundesschrift-webfont.woff2') format('woff2'),
         url('../fonts/cpdbundesschrift-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Colors */
:root {
    --blue1: #00519e;
    --blue2: #396cae;
    --blue3: #748dc2;
    --blue4: #a5b2d7;
    --blue5: #d3d7eb;

    --grey1: #a39e8d;
    --grey2: #b6b1a3;
    --grey3: #c8c4b9;
    --grey4: #dbd8cf;
    --grey5: #edebe7;

    --green1: #0c9930;
    --green2: #5cac57;
    --green3: #8fc080;
    --green4: #b8d6ac;
    --green5: #d7e3cf;

    --yellow1: #fbba00;
    --yellow2: #fcc841;
    --yellow3: #fed579;
    --yellow4: #ffe3aa;
    --yellow5: #fff2d6;
}

/* Global */
body{
  font-family: 'cpd_bundesschrift', 'graublau_web';
  padding:0;
  margin:0;
  background-color: var(--grey5);
}

.container{
    width:90%;
    margin:auto;
    overflow:hidden;
}

@media screen and (min-width: 614px) and (min-height: 600px) {
    .container{
        width:60%;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'graublau_web';
}

i,
b {
	font-family: 'graublau_web';
}

/* Header */
header{
    padding-top:30px;
    min-height:100px;
    width: 100%;
    background-color: var(--blue2);
}

@media screen and (min-width: 614px) and (min-height: 600px) {
    header{
        position: fixed;
    }
}

header .container{
    width:80%;
    margin:auto;
    overflow:hidden;
}


header .branding{
}

header .branding a{
    text-decoration:none;
    color: white;
}

header .branding h1{
    display: inline;
    padding: 0px ;
    margin: 0px;
}

header #logo_image{
    width: 100px;
    padding-right: 50px;
    height: auto;
    align: left;
}

header h1{
    font-family: 'cpd_bundesschrift';
}

header #nav{
    /*float: right;*/
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

section .content-container{
    margin: auto auto 70px auto;
}

@media screen and (min-width: 615px) and (min-height: 600px) {
    section .content-container{
        margin: 230px auto 70px auto;
    }
}

@media screen and (min-width: 990px) and (min-height: 600px) {
    section .content-container{
        margin: 190px auto 70px auto;
    }
}

footer{
    bottom:0;
    /*height:30px;*/
    width:100%;
    margin: auto;
    text-align: center;
    background-color: var(--blue1);
}

@media screen and (min-width: 614px) and (min-height: 600px) {
    footer{
        position:fixed;
    }
}

footer a{
    text-decoration: none;
    color: var(--grey5);
}