@font-face {
    font-family: Decotura;
    font-style: normal;
    src: url('/images/Decotura.woff') format('woff');
}

body {
	font-family: 'Open Sans', sans-serif;
    background-color: #000078;
    background-image: url('/images/back.png');
    background-attachment: fixed;
}

div, iframe {
    position: absolute;
}

iframe {
    width: 100%;
    height: 100%;
}

.text {
    font-family: Decotura;
    color: #000078;
    text-shadow: calc(2vw/12) calc(3vw/12) calc(4vw/12) rgba(0, 0, 0, 0.2);
}

.text22 {
    font-size: calc(22vw/12);
}
.text32 {
    font-size: calc(32vw/12);
}
.text66 {
    font-size: cals(66vw/12);
}

a:link {
    text-decoration: none;
    color: #000080;
}

a:visited {
    text-decoration: none;
    color: #800000; 
}

a:hover {
    text-decoration: underline;
}

#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 98%;
    height: calc(40vw/12);
    background-color: #FFFFFF;
    font-size: calc(32vw/12);
    border-bottom: calc(1vw/12) solid rgba(0,0,100,0.5);
    z-index: 10;
    white-space: nowrap;
    padding-left: 1%;
    padding-right: 1%;
}

#title {
    float: left;
}

#links {
    float: right;
	font-size: calc(24vw/12);
	padding-top: calc(5vw/12);
}

#header a {
    text-decoration: none;
    color: #000080;
}

#lab-comic {
    position: absolute;
    left: 50%;
    top: calc(60vw/12);
    width: 810px;
    height: 210px;
    transform: translateX(-50%);
}

#blurb {
    left: 50%;
    top: calc(280vw/12);
    width: calc(810vw/12);
    padding: calc(10vw/12);
    font-size: calc(13vw/12);
    text-align: left;
    transform: translate(-50%, 0);
    background-color: #FFFFFF;
    border: calc(1vw/12) solid rgba(0,0,100,0.5);
}

#footer {
    position: fixed;
    width: 100%;
    left: 0;
	bottom: 0;
    padding: calc(10vw/12);
    background-color: #FFFFFF;
    border-top: calc(1vw/12) solid rgba(0,0,100,0.5);
    font-size: calc(10vw/12);
    white-space: nowrap;
    text-align: center;
}