body {
    padding: 0;
    margin: 0
}

section {
    width: 100%;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 400px 10px 0 10px;
    box-sizing: border-box;
}

nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    background: transparent;
    display: block;
    width: 100%;
    padding: 10px;
    height: 200px;
    z-index: 100;
    box-sizing: border-box;
}

nav a {
    font-family: 'Consolas','Inconsolata', monospace;
    color: #444;
    font-size: 12px;
    padding: 2px;
    display: block;
    float: left;
    text-decoration: none;
    margin: 4px 6px 4px 4px;
    background: white;
    z-index: 100;
}

nav a:hover,
nav a.active {
    background: black;
    color: white;
}

.fixed {
    position: fixed;
    top: 0;
}

p, p a {
    font-family: 'Consolas', 'Inconsolata', monospace;
    font-size: 12px;
    background: white;
    z-index: 100;
    float: left;
    text-decoration: none;
}

p {
    color: #303a93;
    padding: 2px;
    display: block;
    text-decoration: none;
    margin: 4px 6px 4px 4px;
    
}

p a {color: #303a93; margin: 0px 6px 0px 0px; padding: 0px;}

p a:hover, p a:active {background: #303a93; color: white;}

p.right {float: right;}
svg {
    position: absolute;
    opacity: .1;
    width: 6px;
    height: 6px;
}

svg.active {opacity: 1;}

/* ---navigation matrix--- */


svg#n02 {top: 62px; left: 69px;}
svg#n03 {top: 42px; left: 101px;}
svg#n04 {top: 42px; left: 36px;}
svg#n05 {top: 28px; left: 36px;}
svg#n06 {top: 48px; left: 53px;}
svg#n07 {top: 76px; left: 101px;}
svg#n08 {top: 69px; left: 150px;}
svg#n09 {top: 131px; left: 85px;}
svg#n10 {top: 158px; left: 150px;}
svg#n11 {top: 145px; left: 69px;}
svg#n12 {top: 151px; left: 20px;}
svg#n13 {top: 55px; left: 134px;}
svg#n14 {top: 90px; left: 85px;}
svg#n15 {top: 103px; left: 93px;}
svg#n16 {top: 62px; left: 20px;}
svg#n17 {top: 103px; left: 36px;}
svg#n18 {top: 117px; left: 150px;}
svg#n19 {top: 48px; left: 150px;}
svg#n20 {top: 158px; left: 36px;}
svg#n21 {top: 145px; left: 117px;}
svg#n22 {top: 55px; left: 93px;}
svg#n23 {top: 103px; left: 117px;}
svg#n24 {top: 124px; left: 52px;}
svg#n25 {top: 131px; left: 134px;}
svg#n26 {top: 83px; left: 52px;}

/*--- okay those where the svg squares in the nav matrix --- */

div.nav {
    width: 192px;
    height: 192px;
    display: inline-block;
    position: relative;
    float: left;
    margin: 4px 20px 4px 4px;
    background: white;
}

img.content {
	max-height: auto;
	width: 100%;
	display:block;
	border: 2px dotted pink;
	position: relative;
    margin: 4px 0;
}


/*------- media queries ----- */

@media only screen and (max-device-width : 700px) {

    nav a {display: none;}
    img.content {border: 1px dotted pink;}

}