body 
{
    background-color: #5AB4B0;
    font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    font-weight: 300;
}

/* container is a horizontal scrollable list of two items, each the size of the window*/
.container 
{
    position: relative;
    display: flex;
    max-width: 200vw;
    max-height: 100vh;
    min-width: 30em;
    min-height: 100vh;
    scroll-behavior: auto;
    overflow-x: hidden;
    overflow-y: hidden;
    gap: 0px;
}

/* panel is a fixed window-sized box*/
.panel 
{
    background-color: #5AB4B0;
    flex: 1;
    min-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow-y: hidden;
}

.content 
{
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    height: 100vh;
	background-color: #5AB4B0;
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: content-box;
}

.text
{
    max-width: 40em;
    margin: 0 auto;
    padding: 1em 1.25em 1em 1.25em;
    overflow-x : hidden;
}

h1,h2,h3,h4,h5,h6
{
	margin: 0 0 .5em;
	font-weight: 400;
	line-height: 1.2;
}

h1 { font-size: 1.25em; font-weight:400;}
h2 { font-size: 1.2em; font-weight:400;}
h3 { font-size: 1.125em; font-weight:400;}
h4 { font-size: 1.125em; font-weight:300;}
h5 { font-size: 1.125em; font-weight:300;}
h6 { font-size: 1.125em; font-weight:300;}

strong { font-weight: 400; }

code { font-size: 1em; font-weight: 300; }

.code-container {
    width: 97%;
    overflow: hidden;
    display: inline-block;
    background-color: #76c0bc;
    -webkit-border-radus: 5px;
    border-radius: 5px;
}

.code-inline {
    color: #222 !important;
	background-color: #76c0bc;
	border-color: #76c0bc;
	display: inline-block;
	padding: 0.3em 0.2em 0.3em 0.2em;
	margin-bottom: 0;
    font-size: 1.25em;
	font-weight: 400;
	line-height: 0.8;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
}

p
{
	margin: 0 0 1.5em;
	line-height: 1.25;
    font-size: 1.2em;
    font-weight: 300;
}

input[type="email"] {

    background-color: #76c0bc;
    border: none;
    outline: none;
    display: inline-block;
    font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    font-size: 1em;
    font-weight: 300;
    -webkit-border-radus: 5px;
    border-radius: 5px;
}

.btn
{
	color: #222 !important;
	background-color: #55aaa6;
	border-color: #55aaa6;
	display: inline-block;
	padding: 0.3em 0.2em 0.3em 0.2em;
	margin-bottom: 0;
    font-size: 1.25em;
	font-weight: 400;
	line-height: 0.8;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
}

.btn:hover
{
	color: #222 !important;
	background-color: #55aaa6 ;
}

.btn:focus
{
	color: #222 !important;
	background-color: #5AB4B0;
}

.btn:active
{
	color: #222 !important;
	background-color: #5AB4B0;
}