body
{
	background-color: #eddac7;
	margin:0px;
	padding:0px;
}

@media only screen and (max-width: 1026px) { 
  .desktop_only { 
    display: none; 
  } 

  #main_content {
	    height: 99vh;
		width: 97vw; 

		border-style: solid;
		border-color: #82776c;
		border-width: 8px;

		margin: auto;

		position: relative;
		top: 0px;
		left: 0px;

		transition-property: opacity;
	  	transition-duration: 400ms;
	}
}

@media only screen and (min-width: 1026px) { 
  .mobile_only { 
    display: none; 

  } 

  #main_content {
	    height: 96vh;
		width: 97vw; 

		border-style: solid;
		border-color: #82776c;
		border-width: 8px;

		margin-top: 1vh;
		margin-left: 1vw;

		position: relative;
		top: 0px;
		left: 0px;

		transition-property: opacity;
	  	transition-duration: 400ms;
	}
}

@font-face 
{
	font-family: main_font;
	src: url('fonts/Source_Code_Pro/static/SourceCodePro-Regular.ttf');
}



#background {
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0px;
	left: 0px;
}

#name_title_mobile {

	padding: 20px;
	font-family: main_font;
	color: #82776c;

	font-size: 48px;

	transition-property: opacity;
  	transition-duration: 100ms;
}

#name_title_desktop {

	padding: 20px;
	font-family: main_font;
	color: #82776c;

	font-size: 72px;

	transition-property: opacity;
  	transition-duration: 100ms;
}

.subtitle {
	padding-left: 20px;

	font-family: main_font;
	color: #82776c;

	font-size: 16px;
}

.fill_page {
	height: 100%;
	width: 100%;
}

#menu_button {
	position: absolute;

	background: none;
	border-width: 0px;

	top: 10px;
	right: 10px;
}

#links_section {
	vertical-align: middle;

	position: absolute;
	bottom: 0px;
	right: 0px;

	height: auto;
	width: auto;
}

.homepage_links {
	width: 100%;
	color: #82776c;
	font-size: 24px;
	text-decoration: none;
	font-family: main_font;
	display: inline-block;
	text-align: right;
}	

.homepage_links:hover {
	font-size: 48px;
	color: #66163a;

	transition-property: font-size color;
  	transition-duration: 100ms;
}

.article_link {
	width: 100%;
	color: #82776c;
	font-size: 24px;
	text-decoration: none;
	font-family: main_font;
}

.article_link:hover {
	width: 100%;
	color: #66163a;
	text-decoration: none;
	font-family: main_font;
}

.article_date {
	width: 100%;
	color: #807b77;
	font-size: 12px;
	text-decoration: none;
	font-family: main_font;
}

#article_link_list {
	padding-top: 20px;
	padding-left: 50px;
	width: 100%;
}

.article_link_row {
	width: 100%;

	height: auto;
}

.article_column {
	width: 70%;
}

.no_outline_button {
	background: none;
	border: none;
}

#fullscreen_button {
	position: absolute;

	top: 30px;
	right: 3vw;

	color: #82776c;

}

#exit_fullscreen_button {
	position: absolute;

	top: 30px;
	right: 3vw;

  	opacity: 0;

	color: #82776c;
}

#pause_button {
	position: absolute;

	top: 70px;
	right: 3vw;

	color: #82776c;
}

#play_button {
	position: absolute;

	top: 70px;
	right: 3vw;

	opacity: 0;

	color: #82776c;
}

#refresh_button {
	position: absolute;

	top: 110px;
	right: 3vw;

	color: #82776c;
}