@font-face {
    font-family: 'Computer Modern Sans Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/cmunss.ttf) format('truetype');
}

@font-face {
    font-family: 'Computer Modern Sans Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    font-stretch: semi-condensed;
    src: url(/fonts/cmunssdc.ttf) format('truetype');
}


html {
    background-color: #ffebff;
    font-family: 'Computer Modern Sans Serif', sans-serif;
    font-size: 1.5rem;
}

body {
    margin: 0;
    width: 100%;
}

header {
    width: 100%;
}

header a:any-link {
    text-decoration-color: #00000000;
    text-decoration: none;
}

footer a:any-link {
    color: #ffffffff;
    text-decoration-color: #ffffff80;
}

footer a.invisiblelink:any-link {
    text-decoration-color: #00000000;
    text-decoration: none;
}

main a:any-link {
    color: #000000ff;
    text-decoration-color: #000000ff;
}

main a.invisiblelink:any-link {
    color: #000000ff;
    text-decoration-color: #00000000;
}

.lines {
    background-size: auto 100px;
    background-position: left;
    background-repeat: no-repeat;
    max-width: 800px;
    height: 100px;

    width: 100%;
    margin: 12px auto;
    position: relative;
    left: -1000px;
}

hr.red {
    width: 100%;
    border: 0 solid #800000;
    border-bottom-width: 8px;    
}
hr.green {
    width: 100%;
    border: 0 solid #008000;
    border-bottom-width: 8px;    
}
hr.blue {
    width: 100%;
    border: 0 solid #000080;
    border-bottom-width: 8px;    
}

.headerbox {
    margin: 0 1rem;
}

h1 {
    font-family: sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    color: transparent;
    margin: 0 auto;
    position: relative;
    width: calc(100vw - 224px);
    max-width: 800px;
    padding: 10px 0;
}

h1 .rightlogo {
    width: calc(100vw - 224px);
    max-width: 800px;
    min-height: 120px;
    height: clamp(120px, calc((848px - 100vw) * 0.9 + 120px), 160px);
    background: url(/images/logo-right.png);
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
}


.leftlogo {
    background-image: url(/images/logo-left.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    width: 150px;
    height: 180px;
    position: absolute;
    left: -150px;
    top: 0;
}

@media screen and (max-width: 1200px) {
    h1 {
	margin: 0 auto 0 176px;
    }
    .lines {
	margin-left: clamp(0px, calc(100vw - 800px), 200px);
	left: clamp(-1150px, calc(100vw - 1800px), -1000px);
    }

}

@media screen and (max-width: 800px) {
    h1 .rightlogo {
	background-image: url(/images/logo-twolines.png);
	background-position: bottom left;
    }
}

main {
    width: 100%;
    max-width: 800px;    
    margin: 24px auto;
    min-height: calc(100vh - 20em);
}


.purplify svg {
    filter: url("#purplify");
}

footer {
    height: 10em;
    background-color: #532853;
    color: white;
    padding: 24px;
}

footer p {
    margin: 0 auto;
    max-width: 800px;
}

.mainwrapper {
    margin: 0 24px;
}

h2 {
    font-stretch: semi-condensed;
    font-weight: 700;
    line-height: 1.2em;
    position: relative;
    margin-block-end: 0.2em;
}


.betala, .skylt30, .gang, .ingenmotorvag {
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
    left: -150px;
    top: 0;
}

.subpage .betala, .subpage .skylt30, .subpage .gang, .subpage .ingenmotorvag {
    width: 200px;
    height: 200px;

    position: relative;
    left: 0;
    float: none;
    margin-bottom: 50px;
}

@media screen and (max-width: 1200px) {
    main {
	margin: 24px calc(200px - 24px) 24px calc(200px - 24px);
    }
}

@media screen and (max-width: 1024px) {
    main {
	margin: 24px 0 24px auto;
    }
    .betala, .skylt30, .gang, .ingenmotorvag {
	position: relative;
	left: 0;
	float: left;
	margin-right: 24px;
	width: 2.2em;
	height: 2.2em;
    }
}

.betala {
    background-image: url(/images/betala.png);
}

.skylt30 {
    background-image: url(/images/30.png);
}

.gang {
    background-image: url(/images/gagata.png);
}

.ingenmotorvag {
    background-image: url(/images/ingenmotorvag.png);
}

main p {
    clear: both;
    padding: 0.5em 0;
    margin: 0;
}

.smaller {
    font-size: 0.8em;
}

@media print {
    footer
    {
	display: none !important;
    }
    body {
	width: calc(100vw - 4cm);
	padding: 0 2cm;
    }
    h1 {
	width: unset;
	max-width: unset;
    }
    header {
	width: calc(100vw - 4cm);
    }
    h1 .rightlogo {
	width: unset;
	max-width: unset;
	margin: 0 200px 0 0;
	height: 170px;
    }
    main {
	margin: 2cm 0cm 2cm 0cm;
	width: calc(100vw - 4cm - 48px);
	max-width: unset;
    }
    .mainwrapper {
	width: calc(100vw - 4cm - 48px);
	margin: 0 24px;
    }
    .betala, .skylt30, .gang, .ingenmotorvag {
	position: relative;
	left: 0;
	float: left;
	margin-right: 24px;
	width: 2.2em;
	height: 2.2em;
    }
    html {
	background-color: #ffffff;
    }
    h1 {
	margin: 0 auto 0 auto;
    }
    .lines {
	display: none;
    }
    .leftlogo {
	width: 120px;
	left: unset;
	right: 0;
    }
}