body {
    /*padding-left: 24%;
    padding-right: 24%;*/
    padding-top: 10px;
    width: 640px;
    height: 600px;
    margin: auto;
}
a {
    text-decoration: none;
    color: black;
}

/***************************************

                HEADER

***************************************/
#head > div {
    display: inline-block;
}
#head > .side {
    /*width: 10%;*/
    width: 64px;
}
#head > .side > p {
    text-align: center;
    font-family: "Signika";
    font-weight: bold;
}
#head > .side > p:first-child {
    /*width: 10%;*/
    width: 12px;
    margin: auto;
    word-wrap: break-word;
}
#head > .side:first-child > p:first-child {
    margin: 0px 0px 0px 22px;
}
#head > .side:nth-child(3) > p:first-child {
    margin: 0px 0px 0px 29px;
}
#head > .side > p:nth-child(2) {
    font-size: /*1vw*/13px;
}
#head > .side:nth-child(3) > p {
    transform: scaleX(-1);
}
#head > #title {
    width: /*78%*/500px;
    position: relative;
    top: -15px;
}
#head > #title > p {
    text-align: center;
}
#head > #title > p:nth-child(1) {
    font-size: /*2vw*/21px;
    font-family: "Signika";
    margin-bottom: 0;
    margin-top: auto;
}
#head > #title > p:nth-child(2) {
    font-size: /*3vw*/38px;
    font-family: "Papyrus";
    color: #880000;
    margin: 0;
    padding-bottom: 0;
}
#head > #title > p:nth-child(3) {
    font-size: /*1.5vw*/20px;
    font-family: "Signika";
    margin-top: 0;
    margin-bottom: auto;
}

/***************************************

                NAVBAR

***************************************/

#nav {
    height: 50px;
}
.tab, #nav > p {
    position: relative;
    display: inline-block;
	padding: 0 2px 0 2px;
	margin: 5px 2px 0 2px;
    width: /*8%*/83px;
    color:black;
    font-family: "Signika";
    text-align: center;
}
.tab::before {
	content: '';
	position: absolute;
	top: -6px; right: 0; bottom: 0px; left: 0px;
    width: /*100%*/83px;
    height: 27px;
	z-index: -1;
	background: #E2E49C;
	transform: perspective(10px) rotateX(3deg);
    border-radius: 10px 10px 0 0;
}
#nav > p:nth-child(2) {
    width: /*68%*/435px;
    background: #E2E49C;
    height: 18px;
    padding: 5px;
    position: relative;
    bottom: 3px;
    left: -3px;
    font-size: 14px;
    letter-spacing: 1px;
}
#nav > p:nth-child(3) {
    left: -5px;
}
span {
    font-size: 13px;
    padding: 5px 6px 5px 6px;
    font-variant: small-caps;
}

/***************************************

              BOOK COVERS

***************************************/

#content > img {
    display: inline-block;
    width: /*19%*/122px;
    height: 193px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

/***************************************

                FORM

***************************************/
form > input, textarea {
    margin: 3px;
    padding: 4px;
    background-color: #eeeeee;
    border-width: 1px;
    border-color: #aaaaaa;
    border-style: solid;
    color: #777777;
    font-size: 14px;
    font-family: "Signika";
    font-style: italic;
    width: /*40%*/220px;
}
form > input:nth-child(9) {
    background-color: #ff8888;
    color: #444444;
    border: none;
    font-size: 16px;
    padding: 6px 9px 6px 9px;
    position: absolute;
    left: /*53%*/670px;
    width: auto;
}
#mailform {
    margin: /*0 7% 5% 7%*/ 0 45px 32px 95px;
}
textarea {
    width: /*80%*/430px;
    height: /*20%*/110px;
}
#mailform > p {
    font-family: "Signika";
    margin: 5px;
    padding: 0;
}
#mailform > p:first-child {
    font-size: /*1.3em*/20px;
    position: relative;
    left: 15px;
}
#mailform > p:nth-child(2) {
    font-size: /*.8em*/13px;
    position: relative;
    left: 35px;
}