diff --git a/static/styles/misc.css b/static/styles/misc.css
new file mode 100644
index 0000000..cfb5f2c
--- /dev/null
+++ b/static/styles/misc.css
@@ -0,0 +1,13 @@
+
+
+.misc_button{
+    width: 100px;
+    background: gray;
+    text-align: center;
+    border: black;
+    border-top-style: none;
+    border-right-style: none;
+    border-bottom-style: none;
+    border-left-style: none;
+    border-style: outset;
+}
diff --git a/static/styles/nav.css b/static/styles/nav.css
new file mode 100644
index 0000000..46a75d1
--- /dev/null
+++ b/static/styles/nav.css
@@ -0,0 +1,64 @@
+
+
+nav{
+    height:40px;
+    position:inherit;
+    top:0;
+    
+    z-index:1;
+    
+    text-align: center;
+    display: grid;
+    
+}
+
+.nav{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    min-height:32px;
+    background:none;
+    text-decoration:none;
+    cursor:pointer;
+    
+    float:left;
+    clear:left;
+    text-align:center;
+    
+    font-size: var(--font-size);
+    
+    width:100%;
+    margin:0 0 10px 0;
+    
+    background-color: var(--main-color);
+    
+    color:var(--main-fg-color);
+    text-decoration-color:#d4d4d4;
+    border-color: #000000;
+    
+    border-width: var(--button-border-width);
+    border-style: var(--button-border-style);
+    
+}
+
+.navSep {
+    width: 100%;
+    float:left;
+    margin-bottom: 20px;
+    background-color: var(--main-title-fg-color);
+    border-color: var(--main-title-fg-color);
+}
+
+.selected-nav {
+    border-style: var(--button-selected-style);
+    background-color: var(--main-bg-color);
+    color: var(--main-title-fg-color);
+}
+
+.disabled-nav {
+    color: gray;
+    cursor: default;
+}
+
+
+
diff --git a/static/styles/newstyle.css b/static/styles/newstyle.css
new file mode 100644
index 0000000..e29b1ef
--- /dev/null
+++ b/static/styles/newstyle.css
@@ -0,0 +1,220 @@
+* {
+box-sizing:border-box
+}
+
+@font-face {
+    font-family: FreePixel;
+    font-style: normal;
+    font-weight: 400;
+    src: url("/fonts/FreePixel.ttf");
+}
+
+body {
+    /*font-family: "FreePixel";
+     *   font-size:16px;*/
+    
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    color:var(--main-fg-color);
+    
+    background-image: /*url(../images/light.png)*/var(--background-image);
+    background-repeat: repeat-x;
+    background-color: var(--main-bg-end-color);
+    background-position: left top;
+    
+    padding-bottom:26px;
+    
+    text-rendering: optimizelegibility;
+    text-shadow: rgba(0,0,0,.01) 0 0 1px;
+    
+}
+
+main{
+    width: 75%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.content,#footnote{    
+    min-height: calc(80vh - 200px);
+    border-style: solid;
+    border-width: 1px;
+    background: var(--main-color);
+    
+    padding: 10px 10px 10px 10px;
+    
+    .titlebar {
+        margin: -10px -10px 0 -10px;
+        background: var(--main-bg-color);
+        color: var(--main-title-fg-color);
+        padding: 5px 5px 5px 10px;
+        margin-bottom: 10px;
+        text-align: var(--title-align);
+        border-style: var(--border-style);
+        border-width: var(--border-width);
+    }
+    
+    
+}
+
+.fit,#footnote{
+    min-height: fit-content;
+}
+
+.smol{
+    max-height: 200px;
+    
+    div{
+        overflow: auto;
+        max-height: 150px;
+    }
+}
+
+footer{
+    height:fit-content;
+    background-color: var(--main-color);
+    color: var(--main-fg-color);
+    display:flex;
+    padding:0 10px;
+    align-items:center;
+    overflow-x:hidden;
+    position:fixed;
+    
+    font-family: "FreePixel";
+    
+    bottom:0;
+    width:100%
+}
+
+#footnote{
+    margin-bottom: 20px;
+    height: max-content;
+    border-style: solid;
+    border-width: 1px;
+
+    padding: 10px 10px 10px 10px;
+
+    margin-right: auto;
+    margin-left: auto;
+
+    background-color: var(--main-color);
+}
+
+#gif{
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    scale: 100%;
+
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:10px;
+
+    margin-bottom: 40px;
+
+}
+
+.text-center{
+    text-align:center;
+    display: block;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+.columnsplitter{
+    display: grid;
+    
+    columns: 2;
+    grid-template-columns: auto 300px;
+    column-gap: 20px;
+}
+
+.singlecolumn{
+    grid-template-columns: auto;
+}
+
+.rowsplitter{
+    display: grid;
+    
+    columns: 1;
+    row-gap: 20px;
+}
+
+.chatbox{
+    margin-top: 10px;
+    
+    textarea {
+        font-family: "FreePixel";
+        resize: none;
+    }
+    
+    input{
+        border-style: solid;
+        border-width: 1px;
+        border-color: black;
+
+    }
+}
+
+.info {
+    background-color: red;
+    color: var(--main-bg-color);
+}
+
+.tworowtext {
+    dl dt{
+        float:left;
+        clear:left;
+        text-align:right;
+        width:130px;
+        font-weight:700
+    }
+    
+    dl dd{
+        margin-left:calc(130px + 20px)
+    }
+}
+
+.button-container{
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:20px;
+    
+    margin-bottom: 20px;
+}
+
+.squeeze{
+    width: auto;
+    img{
+        width: 100%;
+        image-rendering: optimizespeed;
+    }
+}
+
+.leftpad{
+    float: right;
+}
+
+.list-left{
+    ul{
+        text-align: left;
+        list-style: disclosure-closed;
+        list-style-position: inside;
+        padding-left: 0px;
+    }
+}
+
+.centered{
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+}
+
+.rndText {
+    
+    
+}
diff --git a/static/styles/photobook.css b/static/styles/photobook.css
new file mode 100644
index 0000000..9548dae
--- /dev/null
+++ b/static/styles/photobook.css
@@ -0,0 +1,127 @@
+* {
+box-sizing:border-box
+}
+
+body {
+    min-height: 100vh;
+    background-image: url(../images/gera_landschaft.jpeg);
+    background-size: cover;
+    
+    display: flex;
+}
+
+main{
+    margin: auto;
+}
+
+.paper{
+    width: 100%;
+    position: relative;
+    
+    #background {
+        width: 100%;
+        
+        border-width: 1px;
+        border-style: solid;
+        border-color: black;
+        
+        z-index: 0;
+        position: relative;
+        
+        @media (min-width: 1080px){
+            zoom: 1.8;
+        }
+        @media (min-width: 720px){
+            zoom: 1.3;
+        }
+    }
+}
+
+.controlbox{
+    display: flex;
+    
+    top: 0;
+    position: absolute;
+    
+    padding: 20px;
+    width: 100%;
+    height: 20px;
+    
+    z-index: 1;
+    
+    a{
+        border-style: outset;
+        height: fit-content;
+        background-color: #80808045;
+        padding-right: 5px;
+        padding-left: 5px;
+        border-width: 2px;
+        
+        color: black;
+        text-decoration: none;
+    }
+    
+    .disabled{
+        color: gray;
+        cursor: not-allowed;
+    }
+    
+    .padding{
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+
+.page{
+    display: grid;
+    
+    position: absolute;
+    top: 0px;
+    
+    width: 50%;
+    height: 100%;
+    padding: 20px 20px 0px 20px;
+    
+    .content{
+        margin-top: 30px;
+        overflow-y: auto;
+        
+        img {
+            border-style: solid;
+            border-width: 2px;
+            border-color: black;
+        }
+    }
+    
+    .infocontainer{
+        bottom: 0;
+        width: 100%;
+        padding: 0 20px 0 0px;
+        
+        .description{
+        
+        }
+        
+        .date{
+            font-style: italic;
+            text-decoration: underline;
+            text-align: right;
+        }
+    }
+    
+    
+}
+
+.right{
+    left: 50%;
+}
+
+.photo{
+    width: 48%;
+    margin: 1%;
+}
+
+.dontSquish{
+    width: 100%;
+}
diff --git a/static/styles/style.css b/static/styles/style.css
new file mode 100644
index 0000000..00d69ce
--- /dev/null
+++ b/static/styles/style.css
@@ -0,0 +1,548 @@
+* {
+    box-sizing:border-box
+}
+
+body {
+    /*font-family: "FreePixel";
+    font-size:16px;*/
+
+    font-family: var(--font-family);
+
+    font-style: 13px/1.231;
+    font-size: var(--font-size);
+
+    color:var(--main-fg-color);
+    
+    background-image: var(--background-image);
+    background-repeat: repeat-x;
+    background-color: var(--main-bg-end-color);
+    background-position: left top;
+    
+    margin:0;
+    padding-bottom:26px;
+
+    text-rendering: optimizelegibility;
+    text-shadow: rgba(0,0,0,.01) 0 0 1px;
+
+}
+
+
+.linespan{
+    display: flex;
+    clear: both;
+    justify-content: center;
+}
+
+.linebutton{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    min-height:48px;
+    
+    cursor:pointer;
+    
+    float:left;
+    text-align:center;
+
+    color: var(--main-fg-color);
+    
+    font-size: var(--font-size);
+    
+    box-sizing: border-box;
+    
+    width:40%;
+    margin:0 10px 10px 0;
+    
+    background-color: var(--main-bg-color);
+        
+    border-style: var(--button-border-style);
+    border-width: var(--button-border-width);
+    
+    border-color: #000000;
+    
+    text-decoration-color:#d4d4d4;
+    color:var(--main-fg-color);
+    
+    text-decoration:none;
+}
+
+nav{
+    height:40px;
+    position:inherit;
+    top:0;
+
+    z-index:1;
+
+    text-align: center;
+    display: grid;
+    margin-top: 20px;
+
+}
+
+.nav{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    min-height:32px;
+    background:none;
+    text-decoration:none;
+    cursor:pointer;
+
+    float:left;
+    clear:left;
+    text-align:center;
+
+    margin-right: 20px;
+    margin-top: 10px;
+
+    color: var(--main-fg-color);
+
+    font-size: var(--font-size);
+
+}
+
+.navSep {
+    width: 100%;
+    float:left;
+    margin-bottom: 20px;
+    background-color: var(--main-title-fg-color);
+    border-color: var(--main-title-fg-color);
+}
+
+main{
+    width:100%;
+    min-height:calc(100vh - 60px - 26px);
+
+    overflow-x:hidden;
+    padding:20px 20px;
+
+
+}
+
+.content,#footnote{
+    min-height: calc(80vh - 200px);
+    border-style: solid;
+    border-width: 1px;
+    background: var(--main-color);
+    margin-bottom: 10px;
+
+    padding: 10px 10px 10px 10px;
+
+    .titlebar {
+        margin: -10px -10px 0 -10px;
+        background: var(--main-bg-color);
+        color: var(--main-title-fg-color);
+        padding: 5px 5px 5px 10px;
+        margin-bottom: 10px;
+        text-align: var(--title-align);
+        border-style: var(--border-style);
+        border-width: var(--border-width);
+    }
+    
+    
+}
+
+.fit,#footnote{
+    min-height: fit-content;
+}
+
+.smol{
+    max-height: 200px;
+    
+    div{
+        overflow: auto;
+        max-height: 150px;
+    }
+}
+
+.inline{
+    
+    img{
+       width: 200px; 
+       float: right;
+    }
+}
+div>.inline{
+    min-height: 200px;
+}
+
+footer{
+    height:fit-content;
+    background-color: var(--main-color);
+    color: var(--main-fg-color);
+    display:flex;
+    padding:0 10px;
+    align-items:center;
+    overflow-x:hidden;
+    position:fixed;
+
+    font-family: "FreePixel";
+
+    bottom:0;
+    width:100%
+}
+
+#footnote{
+    margin-bottom: 20px;
+    height: max-content;
+    border-style: solid;
+    border-width: 1px;
+
+    padding: 10px 10px 10px 10px;
+
+    margin-right: auto;
+    margin-left: auto;
+
+    background-color: var(--main-color);
+}
+
+#gif{
+	margin-left: auto;
+	margin-right: auto;
+    align-items: center;
+	scale: 100%;
+
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:10px;
+
+    margin-bottom: 40px;
+
+}
+
+@font-face {
+    font-family: FreePixel;
+    font-style: normal;
+    font-weight: 400;
+    src: url("../src/FreePixel.ttf");
+}
+  
+
+@media (max-width: 576px) {
+    .nav::before,.nav::after{
+        content: "/";
+    }
+
+    .navSep {
+        scale: 0%;
+    }
+
+    .selected-nav{
+        text-decoration-color: var(--main-fg-color);
+        text-decoration-line: underline;
+    }
+
+    nav{
+        position: inherit;
+        width: 100%;
+        height: fit-content;
+        overflow: scroll;
+        display: flex;
+        margin-left :calc(576px - 80px * 2);
+    }
+
+    .nav{
+        white-space: nowrap;
+        font-size: 12px;
+        margin-right: 10px;
+    }
+}
+
+@media (min-width: 576px){
+    nav{
+        width:250px;
+
+        position:absolute;
+        height:auto;
+        margin-left :calc(992px - 80px * 2);
+    }
+    
+    .nav{
+        width:100%;
+        margin:0 0 10px 0;
+
+        background-color: var(--main-color);
+
+        color:var(--main-fg-color);
+        text-decoration-color:#d4d4d4;
+    
+        border-style: solid;
+        border-width: 1px;
+    
+        border-color: #000000;
+        
+        border-width: var(--button-border-width);
+        border-style: var(--button-border-style);
+    }
+
+    main{
+        width:calc(576px - 80px);
+        max-width:100vw;
+        min-height:calc(100vh - 26px);
+    }
+
+    .selected-nav {
+        border-style: var(--button-selected-style);
+        background-color: var(--main-bg-color);
+        color: var(--main-title-fg-color);
+    }
+}
+
+@media (min-width: 768px){
+    body{
+        padding-left:calc((100vw - 768px - 200px)*.5)
+    }
+
+    main{
+        width:calc(768px - 80px * 2)
+    }
+
+    footer{
+        margin-left:calc((100vw - 768px - 200px)*-.5)
+    }
+}
+
+@media (min-width: 992px){
+    body{
+        padding-left:calc((100vw - 992px - 50px)*.5)
+    }
+    main{
+        width:calc(992px - 80px * 2)
+    }
+    footer{
+        margin-left:calc((100vw - 992px - 200px)*-.5)
+    }
+}
+    
+div.button-container{
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:20px;
+
+    margin-bottom: 10px;
+}
+
+div.contact-text{
+    margin-left:calc(130px + 20px)
+}
+
+.license-img{
+    height:31px;
+    width:88px;
+}
+
+.construction-img{
+    margin-left:auto;
+    margin-right:auto;
+    margin-bottom:20px;
+    display:block;
+    width: 80%;
+}
+
+.smaltext{
+    font-size: xx-small;
+    text-align:center
+}
+
+.image-rounded{
+    border-radius:50%;
+}
+
+.text-center{
+    text-align:center;
+    display: block;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.margin-list{
+    li {
+        margin-bottom: 10px;
+    }
+}
+
+dl dt{
+    float:left;
+    clear:left;
+    text-align:right;
+    width:130px;
+    font-weight:700
+}
+
+dl dd{
+    margin-left:calc(130px + 20px)
+}
+
+.inline-icon{
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:left;
+    gap:10px;
+    
+}
+
+.section-header{
+    display:flex;
+    justify-content:space-between;
+    align-items:center
+}
+
+.post-footer{
+    display:flex;
+    justify-content:right;
+    align-items:center
+}
+
+.post-footer>p{
+    margin:0 5%
+}
+
+p.info{
+    font-size:.8rem;
+    margin-top:5px
+}
+
+span {
+    display: block ruby;
+    font-size: small;
+}
+
+.info {
+    background-color: red;
+    color: var(--main-bg-color);
+}
+
+p.info span{
+    display:block;
+    margin-right:20px;
+}
+
+p.info span i{
+    margin-right:.5em
+}
+
+@media (min-width: 768px){
+    p.info span{
+        display:inline
+    }
+}
+h1,h2,h3,h4,h5,h6{
+    margin:20px 0
+}
+
+h1+p.info,h2+p.info,h3+p.info,h4+p.info,h5+p.info,h6+p.info{
+    margin-top:-15px;
+    margin-bottom:20px
+}
+code,pre{
+    font-size:.875em;
+    font-family: "FreePixel";
+    font-feature-settings:"calt" 1;
+    font-variant-ligatures:normal;
+    border-color:var(--main-fg-color);
+    border-style:solid;
+    border-radius:3px;
+    background-color: var(--main-bg-end-color-color);
+    color: var(--main-fg-color);
+}
+
+code{
+    border-width:1px 0
+}
+
+pre{
+    border-width:1px;
+    overflow-x:auto;
+    padding:4px 2px
+}
+
+.nobr {
+    white-space: nowrap;
+    white-space-collapse: nowrap;
+}
+
+pre>code{
+    border-width:0
+}
+
+h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{
+    border-width:0
+}
+
+
+.form-group{
+    padding:5px 0
+}
+
+.form-group>label{
+    display:block;
+    font-size:14px
+}
+
+.form-group>.error{
+    color:red;
+    font-size:14px
+}
+
+input{
+    width:100%;
+    padding-top:2px
+}
+
+.right-div{
+    width: fit-content;
+    text-align: left;
+    margin-left: auto;
+    margin-right: 0;
+
+    h2{
+        text-align: right;
+    }
+    a.right-div{
+        text-align: right;
+        display: block;
+    }
+}
+
+.postlist {
+    margin-top: 20px;
+    
+    a {
+        font-size: 15px;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+    
+    li {
+       margin-bottom: 20px; 
+       font-size: 10px;
+    }
+}
+
+
+.prefSpan{
+   display: block;
+}
+
+a {
+    color: #0066cc;
+}
+
+.floating {
+        background: var(--optional-link-background);
+}
+
+.buttonToggle {
+    width: fit-content;
+}
+
+.styleSelector {
+    float:right;
+    display: flex;
+    align-items: center;
+}
diff --git a/static/styles/theme.css b/static/styles/theme.css
new file mode 100644
index 0000000..2bb5c21
--- /dev/null
+++ b/static/styles/theme.css
@@ -0,0 +1,20 @@
+:root {
+	--main-bg-color:		"#fed6af";
+	--main-bg-end-color:    "#ffffee";
+	--main-color:           "#ffffff";
+	--main-fg-color: 		"#800000";
+	--main-title-fg-color:	"#800000";
+	
+	--title-align: 			left;
+	--border-style: 		solid;
+	--border-width: 		0px;
+	
+	--button-border-width:	1px;
+	--button-border-style:	solid;
+	--button-selected-style: ridge;
+	
+	--optional-link-background: #00000000;
+
+	--font-family: 			"Arial, Helvetica, sans-serif";
+	--font-size: 			13px;
+}