html {
    height: 100%;
}
body {
    background-color:#ffffff;
    height: 100%;
    width: 100%;
    margin: 0;
}
h1, h2, h3, h4 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
}
p {
    font-family: 'Nunito Sans', sans-serif;
}
.content {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.centered {
    display: block;
    position: relative;
    padding-top: 20%;
    margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
    vertical-align: middle;
}

.title {
	text-align: center;
    padding: 50px 0;
}
.title h1 { margin-top: 0; margin-bottom: 0; letter-spacing: .3em; color: #ffffff; }
.title h2 { margin-bottom: 0; font-weight: 700; font-size:1.2em; letter-spacing: .8em; padding-left: .8em; color: #F7C42D; }
.title h3 { margin-top: 0; font-family: 'Kaushan Script', cursive; letter-spacing: .1em; padding-right: 0.1em; font-size:1.8em; color: #F7C42D; }

.error404 { display: block; position: relative; margin-left: auto; margin-right: auto; width: 50%; min-width: 400px; max-width: 640px; padding-top: 17%; }
.error404 h1 { font-size: 9em; padding: 0; margin: 0; color: #fff; }

.cities td {
    width: 24%;
    text-align: center;
}

pre {
    font-family: monospace;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    background-color: rgba(80,80,80,0.75);
    color: white;
    padding: 10px 20px;
    overflow: auto;
    border-left: 3px solid #F7C42D;
    border-radius: 10px;
    margin-top: 10px;
    position: relative;
}
code {
    position: relative;
}
code *::-moz-selection { /* Code for Firefox */
    background-color: lightgray;
    color: #F7C42D;
    text-shadow: lightyellow 0 0 3px;
}
code *::selection {
    background-color: lightgray;
    color: #F7C42D;
    text-shadow: lightyellow 0 0 3px;
}
.single-box {
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}
.two-columns {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
    align-content: space-between;
    margin-bottom: -12px;
}
.one-half:first-child { margin-right: 20px; }

.one-half {
    flex: auto;
    overflow: auto;
}

/*****    Exactly 50% columns    *****/
.one-half { width: 50%; }

/*****   Help Tooltip   *****/

.tooltip-holder {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 100%; text-align: right; margin-top: 40px; margin-bottom: 10px; margin-right:20px;; 
}

.tooltip {
    display:inline-block;
    position:relative;
    /*border-bottom:1px dotted #666;*/
    text-align:left;
    color:#888888;
    cursor: help;
}
.tooltip h3 { font-weight: 600; margin:12px 0; text-decoration: none; color: #ccc; }
.tooltip h4 { font-weight: 400; margin:12px 0; text-decoration: none; color: #ccc; }
.tooltip ul { color:#cccccc; padding-inline-start: 17px !important; font-size: .9em; font-weight: 200; }
.tooltip p { color:#666666; text-align: right; }
.tooltip .top {
    min-width:340px;
    max-width:400px;
    top:-12px;
    left:-110px;
    transform:translate(-50%,-100%);
    color:#ffffff;
    background-color:#444;
    background-image: linear-gradient(to top right, #333, #666);
    font-weight:normal;
    font-size:14px;
    border-radius:8px;
    position:absolute;
    z-index:99999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}
.tooltip:hover .top {
    display:block;
}
.tooltip .top img {
    width: 100%;
    max-height:80px;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius:8px 8px 0 0;
}
.tooltip .text-content {
    padding:10px 20px;
}
.tooltip .top i {
    position:absolute;
    top:100%;
    left:300px;
    margin-left:-15px;
    width:30px;
    height:15px;
    overflow:hidden;
}
.tooltip .top i::after {
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#484848;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}