@media screen and (max-width: 800px) {
    body {
	--gossip-mobile: mobile;
    }
    
    .large {
	display: none;
	visibility: hidden;
    }

    .small {
	display: initial;
	visibility: visible;
    }

    div.taller {
	position: initial;
	display: block;

	overflow: scroll;
    }

    div.header > div.title {
	flex-grow: 0;
    }
    
    div.body > div.container {
	flex-grow: 1;
    }

    div.main {
	flex-direction: column;
    }

    div.main > div.column {
	width: 100vw;
    }

    div.column > div.square > div.lastevent > div.data {
	padding-left: 2em;
	display: flex;
	flex-direction: column;
    }
    
    div.column > div.square > div.lastevent > div.data span.data:after {
	content: "";
	margin: 0px;
    }
    
    div.column > div.spacer {
	visibility: visible;
	display: block;
    }

    div.picks > div.spacer {
	visibility: visible;
	display: block;
    }

    div.event_data > table {
	font-size: inherit;
    }

    div.main > div.square {
	flex-grow: 1;
    }
    
    div.mainmap {
	flex-grow: 1;
    }

    div.main > div.informations {
	max-width: 100vw;
	width: 100vw;
    }

    div.informations {
	flex-grow: 1;
	max-width: 100vw;
    }

    div.informations > div.title span.title {
	font-size: 40vw;
    }

    div.informations > div.bottom {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
    }
    
    div.areas > div.list > div.area > div.lastevent > table.data,
    div.areas > div.list > div.area > div.lastevent > table.data thead,
    div.areas > div.list > div.area > div.lastevent > table.data tbody,
    div.areas > div.list > div.area > div.lastevent > table.data td,
    div.areas > div.list > div.area > div.lastevent > table.data th,
    div.events > div.picks > table, div.events > div.picks > table thead, div.events > div.picks > table tbody,
    div.events > div.picks > table th, div.events > div.picks > table td,
    div.mainevent > table, div.mainevent > table thead, div.mainevent > table tbody,
    div.mainevent > table tr, div.mainevent > table th, div.mainevent > table td,
    div.page > div.lastevent > table, div.page > div.lastevent > table thead, div.page > div.lastevent > table tbody,
    div.page > div.lastevent > table tr, div.page > div.lastevent > table th, div.page > div.lastevent > table td {
	display: block;
    }

    div.areas > div.list > div.area > div.lastevent > table.data thead,
    div.areas > div.list > div.area > div.lastevent > table.data th,
    div.events > div.picks > table thead, div.events > div.picks > table th,
    div.mainevent > table thead, div.mainevent > table th,
    div.page > div.lastevent > table thead, div.page > div.lastevent > table th {
	display: none;
	visibility: hidden;
    }

    div.events > div.picks > table th.station {
	display: block;
	visibility: visible;
    }

    div.areas > div.list > div.area > div.lastevent > table.data {
	width: 100%;
	margin: 0px;
	font-family: monospace;
    }
    
    div.areas > div.list > div.area > div.lastevent > table.data td {
	text-align: right;
    }

    div.events > div.picks > table tr, div.page > div.lastevent > table tr {
	display: flex;
	flex-direction: column;
    }

    div.events > div.picks table td.verticable > span.label {
	display: inline-block;
	visibility: visible;
	font-weight: bold;
	float: left;
    }

    div.events > div.picks table td.destroyable {
	display: none;
	visibility: hidden;
    }

    div.events > div.label {
	font-size: smaller;
    }

    div.mainevent > table td.evid,
    div.page > div.lastevent > table td.evid {
	text-align: center;
	font-weight: bold;
    }

    div.page > div.lastevent > span.legend {
	display: inline-block;
	width: 100%;
	text-align: center;
    }

    div.areas > div.list > div.area > div.lastevent > table.data span.label,
    div.mainevent > table span.label,
    div.page > div.lastevent > table span.label {
	display: inline;
	visibility: visible;

	float: left;
	font-weight: bold;
    }

    div.areas > div.list > div.area > div.lastevent > table.data span.data {
	clear: both;
	white-space: nowrap;
    }


    div.page > div.lastevent > table span.label:after {
	content: ':';
    }

    div.maintitle {
    	padding-bottom: 0.5em;
    }

    div.maintitle > div {
	flex-direction: column;
    }

    div.maintitle > div > h2 {
	width: 100%;
	font-size: 30vw;
	text-align: center;
	margin-bottom: -0.1em;
    }

    div.maintitle > div > div.acronym {
	width: 100%;
	background-color: white;

	display: block;
	font-family: inherit;
    }

    div.maintitle > ul.links {
	margin: 1em 0px;
	font-size: 4vw;
	padding-left: 0px;
    }

    div.maintitle > ul.links > li {
	display: list-item;
    }

    div.areas > div.list {
	flex-direction: column;
    }

    div.areas > div.list > div.area {
	width: 100%;
    }

    div.theyears > ul.list, div.theareas > ul.list {
	flex-direction: column;
	justify-content: flex-start;
    }

    div.theyears > ul.list > li, div.theareas > ul.list > li {
	width: 100%;
    }
}