@font-face {
    font-family: 'strassburg-fraktur';
    src: url('strassburg fraktur.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}

@font-face {
    font-family: 'robotobold';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff2') format('woff2'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}

@font-face {
    font-family: 'robotomedium';
    src: url('Roboto-Medium-webfont.eot');
    src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Medium-webfont.woff2') format('woff2'),
         url('Roboto-Medium-webfont.woff') format('woff'),
         url('Roboto-Medium-webfont.ttf') format('truetype'),
         url('Roboto-Medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}

@font-face {
    font-family: 'robotoregular';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff2') format('woff2'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}

@font-face {
    font-family: 'metropolisblack';
    src: url('Metropolis-Black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}
 
@font-face {
    font-family: 'metropolisbold';
    src: url('Metropolis-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal; 
    font-display:swap; 
}


html {
        background-image:url("/imgs/Attic_5.png");
	background-position:center;
        background-size:90%;
        background-repeat:no-repeat;
        background-attachment:fixed;
        width:100vw;
        height:100vh;
        scroll-behavior: smooth;
}

/*#bgimg {
  object-fit: cover;
  size: 90%;
  opacity: 40%;
  z-index: -1;
}*/

.pagetitle {
        margin-top: 2.85em;
        margin-bottom: -0.65em;
        font-size:clamp(2.85em, calc(2.85em + 6.3vw), 13.1em);
        font-family: 'metropolisbold', arial, helvetica;
        letter-spacing: 0.01em;
        text-align: center;
        color: #0000ff;
}

.pagesubtitle {
	margin-top: -0.8em;
	margin-bottom: -0.6em;
        font-size: clamp(1em, calc(1em + 3.1vw), 7.8em);
        font-family:'metropolisbold', arial, helvetica;
        letter-spacing: 0.025em;
        text-align: center;
        color: #0000ff;

}

h1 {
        margin-top: 2em;
	margin-bottom:8em;
        font-size: clamp(0.75em, calc(0.75em + 1.75vw), 2.38em);
        font-family:'robotomedium', arial, helvetica;
        letter-spacing: 0.025em;
        text-align: center;
        color: #ffffff;
	text-decoration: none;
}

h2 {
        font-family: 'robotomedium';
        font-size: clamp(0.85em, calc(0.85em + 0.95vw), 1.035em);
}

.no-line {
        text-decoration: none;
}

.form-f {
        color: #0000ff;
}

/*.efa {
        color: #00ff00;
}


.h1-subtitle {
        font-size: clamp(0.9em, calc(0.9em + 1.75vw), 1.9em);
        font-family:'robotomedium', arial, helvetica;
        letter-spacing: 0.015em;
        text-align: center;
        color:rgb(141, 154, 255);
}*/

a:link, a:visited {
        color:#ffffff;
}

main {
        margin:15em auto;
	padding: 1em;
        max-width:48em;
}

body {
        position: relative;
        font-family:'robotoregular', arial, helvetica;
        line-height: 1.5;
        font-size:clamp(0.85em, calc(0.85em + 1vw), 1.15em);
        color: #ffffff;
}

.zentriert {
        text-align:center;
}

.font-strassburg {
	font-family: 'strassburg-fraktur';
        font-size:clamp(1.15em, calc(1.15em + 3.7vw), 7.1em);
	color:#ffffff;
}

.icon-insta {
        width: clamp(1em, calc(1em + 1.5vw), 1.9em);
        position: fixed;
        top:1em;
        left:0.5em;
        z-index: 99;
}

.icon-location {
        width: clamp(1em, calc(1em + 1.5vw), 1.9em);
        position:fixed;
        top:3em;
        left:0.5em;
        z-index: 99;
}

.icon-email {
        width: clamp(1em, calc(1em + 1.5vw), 1.9em);
        position:fixed;
        top:5.2em;
        left:0.5em;
        z-index: 99;
}

footer {
        text-align: right;
        margin-right:0.6em;
        margin-bottom:0.2em;
        font-size: 0.8em;
        position:relative;
	color: #0000ff;
}