@charset "UTF-8";
@import url("main.css");
<link rel="preconnect" href="https://fonts.gstatic.com">;
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">;
@import @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

/*OVERALLS*/
* {margin:0; padding:0; border:0;}
a {
	color:#52340d;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
	font-style:normal;
	font-weight:400;
	opacity:0.95;
}
a:hover {
	color:#52340d;		
	opacity:1.0;
}
a.kontakt {
	color:#52340d;
    text-decoration: none;
	font-family: 'Inter', sans-serif;
    font-style:normal;
    height:13px;
    font-size: 13px;
    letter-spacing: 3px;
	font-weight:300;
	opacity:0.75;
}
a.kontakt:hover {
	color:#52340d;		
	opacity:1.0;
}
a.link {
	color:#000000;
	font-family: 'Times', serif;
    font-size:11px;
    letter-spacing: 1px;
    line-height:1.4;
    font-weight:100;
    text-align: justify;
    margin-bottom: 5px;
    opacity: 0.8;
}
p {
	font-family:'Times', serif;
	color:#000000;
	font-size:11px;
    letter-spacing: 1px;
    line-height:1.4;
    font-weight:200;
    text-align: justify;
    margin-bottom: 5px;
    opacity: 1;
}
pi {
	font-family:'Times', serif;
	color:#000000;
	font-size:11px;
    letter-spacing: 1px;
    line-height:1.5;
    font-weight:100 ;
    font-style: italic;
    margin-bottom: 5px;
    opacity: 1;
}
pm {
	font-family: 'Open Sans', sans-serif;
	color:#a2ddff;
	font-size:10px;
    letter-spacing: 1px;
    line-height:1;
    text-align: justify;
    margin-bottom: 5px;
    opacity: 1;
}
pbil {
	color:#52340d;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
	font-style:italic;
    float: left;
	font-weight:400;
	opacity:0.95;
}


/* title stor - Vekselvorkninger*/
h0 {
    font-family: 'Inter', sans-serif;
	color:#000000;
	height: 40px;
    font-size:40px;
	font-weight:200;
    letter-spacing: 16px;
	margin-top: -1px;
	opacity: 1;
}
h8 {
    font-family:'Times', serif;
	color:#000000;
	font-size:12px;
    letter-spacing: 3px;
    font-weight:200;
    opacity: 1;
}

/*mindre overskrift i om og opslag*/
h7 {
	float: left;
    font-family: 'Inter', sans-serif;
	color:#000000;
	font-size:12px;
    letter-spacing:1px;
    font-weight:200;
}
/*dato på individuelle opslagssider*/
h6 {
	float:left;
    font-family: 'Inter', sans-serif;
	color:#000000;
	font-size:11px;
    letter-spacing:3px;
    font-weight:200;
    opacity: 0.6;
}
/*titel på individuelle opslagssider*/
h5 {
	font-family: 'Inter', sans-serif;
	color:#000000;
	font-size:22px;
    letter-spacing: 4px;    
    font-weight:200;
    margin-bottom: 20px;
    opacity: 0.6;
}
/*titles for work on individual pages h3*/
h4 {
	font-family: 'Inter', sans-serif;
	color:#000000;
	height: 15px;
    font-size:15px;
	font-weight:200;
    letter-spacing: 3px;
	margin-top: 5px;
    margin-bottom: 20px;
	opacity: 1;
}
/*titles for work matrix 2B8599 #9ce9f0 #4ba2bd #6ea6b8 #80bbcf #a2ddff #67afc7 #478599 h3*/
h3 {
	font-family: 'Inter', sans-serif;
	color:#96d7eb;
	height: 15px;
    font-size: 15px;
	font-weight:900;
    letter-spacing: 3px;
    padding-left: 20px;
	margin-bottom: 0px;
	opacity: 0.9;
}
/*for menu h2 #9ce9f0color:#478599 #133b47 #265766 */
h2 {
	font-family: 'Inter', sans-serif;
	color:#133b47;
	height: 10px;
    font-size: 7px;
	font-weight:500;
    letter-spacing: 3px;
	opacity: 0.95;
	font-style:normal;
    padding-left: 200px;
    margin-bottom: 130px;
}
/* Christine hvidt name h1*/
h1 {
	color:#000000;
	font-family: 'Josefin Sans', sans-serif;
	font-style:normal; 
	font-size:25px;
	font-weight: lighter;
    letter-spacing: 3px;
	margin-bottom: 5px;
	opacity: 0.5;
}
h1:hover {
	color:#000000;
	opacity: 1;
}

html,body {width:100%; height:100%;}
body {background:#fffffd;}
.bg {z-index:-1; 
	width:auto; 
	height:auto;
	position: fixed;
	width:100%;
	height:100%;
}
#wrapper {
	position:absolute;
	margin-top:0px;
	width: 700px;
	height:auto;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	top: 15px;
}
#wrapperAP {
	position:absolute;
	margin-top:0px;
	width: 70%;
	height:auto;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	top: 15px;
}

#header-wrapper {
    height : 30px;
    border-bottom : 1px black solid;
    padding-bottom : 10px;
    margin-bottom : 30px;
}

#header { 
	height:30px;
	width:auto;
	text-indent:0px;
	float:left;
    padding-left: 10px;
}
#menu {
	float:right;
	color:#000000;
	width:auto;
	height:30px;
    margin-top:0px;
    padding-bottom: 3px;
	padding-right: 10px;
}
#menu ul {
	float:left;
}
#menu ul li {
	font-family: 'Numans', sans-serif;
    float:left;
	margin-left:33px;
	margin-top:0px;
	text-decoration: none;
	list-style:none;
}
#menu ul li:hover {
	font-family: 'Numans', sans-serif;
    float:left;
	margin-left:33px;
	margin-top:0px;
	text-decoration: none;
	list-style:none;
	opacity:1;
}
.active {
	opacity:1;
}
<!--BrugesTilVekselvirkninger-->
#sepwork{
	float:left;
    padding-top: 10
	height:1px;
	width:600;
	background:#000000;
	margin-top:10px;
    margin-bottom:4px;
	opacity:1;
}
#sepcasetop {
	float:left;
	height: 1px;
	width: 100%;
	background:#52340d;
	margin-top: 1px;
    margin-bottom: 3px;
	opacity:1;
}
#sepcasebuttom {
	float:left;
	height: 1px;
	width: 100%;
	background:#000000;
	margin-top: 6px;
    margin-bottom: 1px;
	opacity:0.3;
}
#septop {
	float:left;
	height: 1px;
	width: 100%;
	background:#000000;
	margin-top: 3px;
    margin-bottom: 40px;
	opacity:0.4;
}
#sepmid {
	float:left;
	height: 1px;
    width:100%; 
    margin-left:0px;
	background:#000000;
	margin-top: 3px;
    margin-bottom: 30px;
	opacity:0.4;
}
#sepbuttom {
	float:left;
	height: 1px;
	width: 100%;
	background:#000000;
	margin-top: 40px;
    margin-bottom: 0px;
	opacity:0.4;
}
<!--BrugesTilVekselvirkninger/*af en eller anden årsag virker den ikke!*/-->
#linje {
	float:left;
	height: 0.2px;
	width: 100%;
	background:#000000;
	margin-top: 5px;
    margin-bottom: 5px;
	opacity:1;
}
.textcase {
	float:left;
	width:158px;
	height:120px;
	margin-top:15px;
	margin-right:8px;
	margin-left:8px;
}
.textcasefront {
	float:left;
	width:100%;
	height:500;
	margin-top:0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.textcasebig {
	float:left;
    width:100%;
	height:220px;
    margin-top:0px;
	margin-right:1px;
	margin-left:1px;
}

.showcasebig {
	width:100%;
	height:5px;
	margin-bottom:4px;
	background-color:#fff;
	opacity:1;
    filter:saturate(90%);
}	
.showcasebig:hover {
	width:100%;
	height:5px;
	margin-bottom:4px;
	background-color:#fff;
	opacity:1;
    filter:saturate(100%);
}
/* kasse til p5js AfterProgress midterboks*/
#middleAP {
/*    position:absolute;*/
	margin-top: 30 px;
    margin-left: 0 px;
	float:center;
	width:auto;
	height:auto;
}
/* om projektet Vekselvirkninger*/
#middleom {
	margin-top:50px;
    margin-bottom:50px;
	float:left;
	width:600px;
	height:auto;
	padding-left:50px;
}

.middle {
	margin : 10px 0;
	height:auto;
    text-align : center;
    padding : 0 10%;
}

#middleindividuel {
	margin-top:10px;
    margin-bottom:30px;
	float:left;
	width:500px;
	height:auto;
	padding-left:100px;
    }
#middlemanifest {
	margin-top:50px;
    margin-bottom:50px;
    background: #478599;
	float:right;
	width:600px;
	height:410px;
}
#middlemanitekst {
	margin-top:50px;
    margin-bottom:0px;
	width:490px;
	height:auto;
    padding-left:50px;
}
#middlekontakt{
	margin-top:50px;
    margin-bottom:180px;
	float:left;
	width:600px;
	height:auto;
	padding-left:50px;
}
#middletom{
	height:auto;
    min-height: 150px;
	float:left;
	width:600px;
	height:auto;
	padding-left:50px;
}
#left {
	float:left;
	width:270px;
	min-height:200px;
	text-align: left;
    margin-bottom: 0px;
    margin-left: 60px;
}
#right {
	float:right;
	width:270px;
	min-height:200px;
    text-align: left;
    margin-bottom: 0px;
    margin-right: 60px;
}
#bred {
	float:left;
	width:400px;
    min-height:220px;
	text-align: left;
    margin-top: 60px;
    margin-bottom: 20px;
    margin-left: 0px;
}
#smal {
	float:left;
	width:200px;
	min-height:220px;
	text-align: left;
    margin-top: 60px;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
}
#bottom {
	margin-top:0px;
    margin-bottom:30px;
    margin-right:0px;
	float:left;
	width:700px;
	height:auto;
}
#bottom elm {
    	font-family: 'Numans', sans-serif;
    float:left;
	margin-right:20px;
	margin-top:0px;
	text-decoration: none;
	list-style:none;

}
#currentimg {
	width:auto;
	height:auto;
	opacity:0.6;
}
#artwork {
	margin-top:30px;
	float:left;
	width:850px;
	min-height:100px;
}
.headline {
	margin-top:20px;
	float:left;
	width:350px;
	height:auto;
	padding-left:8px;
}
.about {
	z-index:2;
	display:block; 
	position:fixed; 
	bottom:0; 
	left:0;
	background-repeat:no-repeat;
	background-position: 30px -90px;
	width:850px;
	height:400px;
}
.abouttext {
	margin-top: 50px;
	float:left;
	width:350px;
	padding-left:350px;
}
.abouttext h2{
	font-size:18px;
}