style.css

/* default / demo page */
* {
	box-sizing: border-box;
	}

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Mada', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
	min-height: 1280px;
	font-weight: 300;
	color: #2a2a2a;
	background-color:black;
}

p, h1, h2, h3, h4, a {
	margin: 0;
}

h1 {
	font-family:'Mada';
	font-size: 200px;
	font-weight:700;
}

#intro {
	margin: 0 auto;
	text-align: center;
	height:900px;
	background-color:black;
}

.feature-image-container {
	height:980px;
	width:700px;
	margin: 0 auto;
}
.row {
	width:100%;
	height:14.2%;
	float:left;
}

.center-row {
	float:left;
	width:100%;
	height:42.8%;
}

.center-row-side {
	float:left;
	width:20%;
	height:100%;
}

.center-row-middle {
	float:left;
	width:60%;
	height:100%;
}

.cell {
	width:20%;
	height:100%;
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
	position:relative;
	overflow: hidden;
}

.side-cell {
	width:100%;
	height:33.3%;
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
}

.title-cell {
	padding-top:80px;
	width:100%;
	height:100%;
}


.header {
	font-weight:700;
	font-size: 100px;
	color:white;
}

.line-break {
	width: 30%;
	margin: 0 auto;
	margin-bottom:15px;
	height:1px;
	background-color:red;
}

.sub-header {
	font-size:35px;
	font-weight:200;
	color:white;
}

.year-highlight {
	color:red;
	font-size:40px;
	font-weight: 700;
}

.feature-image {
	height:100%;
	width:100%;
}

.break {
	height:200px;
}

#outro {
	height:100%;
}


/* scrollama */
#scroll {
	position: relative;
}

.scroll__graphic {
	position: -webkit-sticky;
	position: sticky;
	float: right;
	width:100%;
	top:0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	z-index:100;
}

.scroll__graphic.is-fixed {
	position:fixed;
	width:100%;
	top:0;
}

.scroll__graphic.is-bottom {
	bottom: 0;
	top: auto;
}


.link-container {
	width:100%;
	margin-top:5px;
	position:relative;
	text-align:center;
	z-index:10;
}


.link {
	font-weight:500;
	cursor:pointer;
	display:inline-block;
	width:130px;
	color:white;
	text-decoration:underline;
	text-decoration-color:grey;
	background-color:black;
	border-radius:3px;

}

.website-link {
	text-align:right;
	padding-right:5px;
}

.example-link {
	text-align:left;
	padding-left:5px;
	z-index:11;
}

@media only screen and (max-width: 763px) {
	.link {
		font-size: 13px;
	}
	#link-container-above {
		display:block;
	}
	#link-container-below {
		display:none;
	}
}

@media only screen and (min-width: 764px) {
	.link {
		font-size: 16px;
	}
	#link-container-above {
		display:none;
	}
	#link-container-below {
		display:block;
	}
}



.change-data-button-container {
	width:100%;
	margin: 0 auto;
	margin-top:20px;
	text-align: center;
	position:relative;
}

.change-data-button {
	font-weight: 500;
	cursor:pointer;
	padding: 0px 8px;
	font-size: 14px;
	width:150px;
	margin:0;
	text-align:center;
	display:inline-block;
    height: 23px;
    border: 1px solid #cfcdd8;
    color: #cfcdd8;
    background: #0a061b;
	margin-left:-4px;
	line-height:23px;
}

.left-button {
	border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.right-button {
	border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.change-data-button-selected {
	font-weight: 500;
    background-color: #cfcdd8;
    color: #0a061b;
}

@media only screen and (max-width: 763px) {
	.change-data-button {
		font-size: 12px;
		display:inline-block;
		width:120px;
		height:18px;
		line-height:18px;
	}
	.change-data-button-container {
		margin-top:10px;
	}
}

.meme-name-container {
	font-family:'Mada';
	text-align:center;
	width:100%;
	background-color:black;
	padding:10px;
	border-radius:3px;

}

.meme-name {
	font-weight:700;
	color:white;
}

.meme-name-sub {
	color:white;
	margin-left:3px;
}

.month {
	color:#FF0000;
	font-weight:700;
}

.meme-description {
	font-family:'Mada';
	text-align:center;
	color:white;
	width:100%;
	text-align:center;
	margin:0 auto;
	margin-top:20px;
}

@media only screen and (min-width : 1000px) {
	.meme-name-container {

	}
	.meme-name {
		font-size: 35px;
	}

	.meme-name-sub {
		font-size:30px;
	}

	.month {
		font-size:30px;
	}
	.meme-description {
		max-width:60%;
		font-size:18px;
		line-height:24px!important;

	}
}

@media only screen and (min-width : 764px) and (max-width: 999px) {
	.meme-name-container {
	}
	.meme-name {
		font-size: 30px;
	}

	.meme-name-sub {
		font-size:25px;
	}

	.month {
		font-size:25px;
	}
	.meme-description {
		max-width:80%;
		font-size:17px;
		line-height:20px!important;
	}
}

@media only screen and (max-width: 763px) {
	.meme-name-container {
		padding:5px;
	}

	.meme-name {
		font-size:25px;
	}

	.meme-name-sub {
		font-size:20px;
	}

	.month {
		font-size:20px;
	}
	.meme-description {
		max-width:90%;
		font-size:13px;
		line-height:16px!important;
		margin-top:10px;
	}
}

.line-break-two {
	width: 10%;
	height:1px;
	background-color:white;
	text-align:center;
	margin:0 auto;
	margin-top:20px;
	position:relative;
}

@media only screen and (max-width: 763px) {
	.line-break-two {
		margin-top:10px;
	}
}


#tweet {
	z-index:999;
	display:none;
	position:absolute;
	-webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
	left:50%;
}


.scroll__text {
	position: relative;
	width: 33%;
}

.step {
	position:absolute;
	width:1px;
	/* border-bottom: none; */
}

.joyplot-container {
	position:absolute;
	top:0;
}
@media only screen and (min-width : 1000px) {
	.joyplot-container {
		width:70%;
		left:15%;
	}

}

@media only screen and (min-width : 764px) and (max-width: 999px) {
	.joyplot-container {
		width:70%;
		left:15%;
	}
}

@media only screen and (max-width: 763px) {
	.joyplot-container {
		left:5%;
		width:90%;
	}
}

svg {
	display: block;
	margin: 0 auto;
	font-family: 'Mada';
	font-weight: 300;
}

.x-axis line {
	stroke:white;
}

.x-axis path {
	stroke:white;
}

.x-axis text {
	font-family: 'Mada';
	font-size: 12px;
	font-weight:500;
	fill:white;
}

.line {
	fill: none;
}

.benchmark-line {
	stroke: white;
	stroke-dasharray: 2;
	fill:none;
	stroke-width:1.5;
}

.area {
	fill: #ccf4f9;
}

.peak-annotation {
    text-align:center;
    font-family:'Mada';
    font-weight:700;
    border:1px solid white;
    background-color:black;
    padding:5px;
    position:relative;
    font-size:14px;
    color:white;
	max-width:50%;
	border-radius:5px;
}

.annotation-triangle {
    display: block;
    content: ' ';
    background: black;
    width: 10px;
    height: 10px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-top-right-radius: 2px;
    position: absolute;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

@media only screen and (min-width : 1000px) {
	.peak-annotation {
	}

}

@media only screen and (min-width : 764px) and (max-width: 999px) {
	.peak-annotation {
		font-size: 16px;
	}
}

@media only screen and (max-width: 763px) {
	.peak-annotation {
		font-size: 14px;
	}
}

.benchmark-annotation {
	color:white;
	-webkit-transform: translate(0%, -100%);
    -moz-transform: translate(0%, -100%);
    -o-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
	font-style:italic;
}


#tweet-storage {
	display:none;
}

.table-container {
	width:70%;
	margin:0 auto;
	padding-top:100px;
	padding-bottom:50px;
}

.meme-table {
	width:100%;
	color:white;
	border-collapse: collapse;
}

.meme-table td {
	font-size:18px;
	padding-right:5px;

}

.meme-header {
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5rem;
}

.index-header {
	width:45%;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5rem;
}

.table-head tr {
	border-bottom: 2px solid #999;
}


.table-body tr {
	border-bottom: 1px solid #999;
}

.table-rank {
	font-weight: 300;
}

.table-meme-name {
	font-weight: 700;
}

.table-meme-date {
	font-weight: 300;
	font-size:18px;
}

.table-index {
	font-weight: 700;
	line-height:45px;
}

.table-bar {
	background-color:red;
	height:45px;
	padding-left:5px;
}

.table-bar span {
	color: #fff;
    font-size: 17px;
    font-weight: 700;
}

@media only screen and (min-width : 1000px) {
	.table-container {
		width:70%;
	}

}

@media only screen and (min-width : 764px) and (max-width: 999px) {
	.table-container {
		width:80%;
	}
	.table-bar span {
		font-size: 16px;
	}
	.meme-table td {
		font-size: 17px;
	}
	.table-meme-date {
		font-size:16px;
	}
	.meme-header {
		font-size: 16px;
	}

	.index-header {
		font-size: 16px;
	}
	.table-index {
		line-height:38px;
	}
	.table-bar {
		height:39px;
	}
}

@media only screen and (max-width: 763px) {
	.table-container {
		width:95%;
	}
	.table-bar span {
		font-size: 13px;
	}
	.meme-table td {
		font-size: 14px;
	}
	.table-meme-date {
		display:none;
	}
	.meme-header {
		font-size: 13px;
	}

	.index-header {
		font-size: 13px;
	}
	.table-index {
		line-height:30px;
	}
	.table-bar {
		height:33px;
	}
}