@font-face {
     font-family: 'bebas_neuebold';
     src: url('../fonts/bebasneuebold-webfont.ttf');
}
 @font-face {
     font-family: 'bebas_neuebook';
     src: url('../fonts/bebasneuebook-webfont.ttf');
}
 body {
     font-size: 16px;
     margin: 0;
     padding: 0;
     background: black;
     color: black;
}
 .hidden {
     opacity: 0;
}
 .visible {
     opacity: 1;
     transition: opacity 1s ease-out;
}
 .fadeout {
     opacity: 0;
     transition: opacity 1s ease-out;
}
 p {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 #home {
     top:0;
     left:0;
     width:100%;
     height:100%;
     overflow: hidden;
}
 #about, #editorial-listing, #news-listing, #play-listing, #news-article, #project, #editorial {
     background: rgb(232,232,232);
     background: linear-gradient(0deg, rgba(232,232,232,1) 90%, rgba(204,204,204,1) 100%);
     padding: 0 0 3rem 0;
}
 #about, #editorial-listing, #news-listing, #play-listing, #news-article, #editorial {
     background-position: left 4rem;
     background-attachment: fixed;
}
 #news-listing, #project, #editorial {
     padding: 2rem 0 3rem 0;
}
 video {
     background-color: black;
     position: fixed;
     object-fit: cover;
     width: 100%;
     height: 100%;
     z-index: -100;
}
 .video-overlay {
     position: absolute;
     top:50%;
     left:50%;
     transform: translate(-50%, -50%);
     align-items: center;
}
 #home .overlaybox {
     background-color: rgba(0, 0, 0, 0.75);
     padding: 1rem 2rem;
     color: white;
     font-size: 1.25rem;
     text-align: center;
     display: none 
}
 h1, h2, h3, h4 {
     font-family: 'bebas_neuebold', sans-serif;
     line-height: 0.85em;
     font-size: 1.75rem;
     margin-bottom: 1rem;
     color: black;
}
 .quotebox {
     background: rgb(204,175,255);
     background: linear-gradient(45deg, rgba(204,175,255,1) 0%, rgba(249,199,255,1) 30%, rgba(238,233,255,1) 70%, rgba(183,240,255,1) 100%);
     padding: 1rem 2rem;
     margin:0 0 2rem 0;
     animation: gradient 15s ease infinite;
     background-size: 400% 400%;
}
 @keyframes gradient {
     0% {
         background-position: 0% 50%;
    }
     50% {
         background-position: 100% 50%;
    }
     100% {
         background-position: 0% 50%;
    }
}
 .quotebox p {
     line-height: 1.25em;
     font-size: 1.75rem;
     font-weight: 200;
}
 .quotebox h1 {
     line-height: 0.85em;
     font-size: 2rem;
}
 .box-white {
     background: white;
     padding: 1rem 2rem;
     margin:0 0 2rem 0;
     display: block;
     width:100%;
}
 .rounded {
     border-radius: 1rem;
}
 .header-iframe {
    /* margin-bottom: 3rem;
     */
}
 .breaker-white, .breaker-black {
     margin: 3rem 0;
     width: 100%;
     display: block;
     border-top-width: 1px;
     border-color: white;
     border-top: solid;
}
 .breaker-black {
     border-color: black;
}
 .flex-video {
     padding-top: 0;
}
 .logo-white, .logo-black, .logo-animated-white {
     text-indent:-99999em;
     white-space: nowrap;
     overflow: hidden;
     background-image: url("../images/logo-white2.svg");
     background-position: left center;
     background-repeat: no-repeat;
     background-size: contain;
     display: block;
     height: 3rem;
     margin: 3rem 0;
}
 .logo-black {
     background-image: url("../images/logo.svg");
}
 .logo-animated-white {
     background-image: url("../images/dadako_intro2.gif");
     height: 13rem;
     margin: 0;
     background-position: center center;
}
 footer {
     padding-top: 3rem;
     padding-bottom: 3rem;
     background: black;
     color: white;
}
 .header-image-container {
     position: relative;
     height: 0;
     padding-bottom : 40%;
     margin-bottom: 2rem;
}
 .header-image {
     background-position: center center;
     background-repeat: no-repeat;
     background-color: black;
     background-size: cover;
     width : 100%;
     height: 100%;
     position: absolute;
     top: 0;
     bottom: 0;
     image-rendering: pixelated;
     image-rendering: -moz-crisp-edges;
     image-rendering: crisp-edges;
     border-radius: 0 0 1rem 1rem;
}
 #play-listing {
     padding-top: 2rem;
     
}
 #play-listing .game-listed a {
     display: block;
     top: 0;
     position: relative;
     background-repeat: no-repeat;
     background-size: 20rem, cover, cover;
     background-position: center center, center center, center center;
     aspect-ratio: 16/9;
     background-color: grey;
     width:100%;
     border-radius: 1rem;
     margin-bottom: 2rem;
	 transition: top ease 0.25s, box-shadow ease 0.25s;
	 box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);

}
#play-listing .game-listed a:hover {
     top:-0.5rem;
     box-shadow: 0 0.5rem 3px 3px rgba(0, 0, 0, 0.05);
     transition: top ease 0.25s, box-shadow ease 0.25s;
     background-size: cover;
     background-position: center center;
}
#play-listing .game-listed a:hover .game-listed-info{
     visibility: visible;
}

 #play-listing .game-icon {
     display: block;
     background-position: center center;
     background-size: contain;
     height: 6rem;
     width: 6rem;
     border-radius: 1.25rem;
     margin: 1rem;
     box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.28);
     float: left;
}
#play-listing .game-listed
{
	position: relative;
}
#play-listing .game-listed-info
{
	background-color:rgba(0, 0, 0, 0.65);
	height:4rem;
	display: block;
	width: 100%;
	position: absolute;
	bottom: 0;
	left:0;
	border-radius: 0 0 1rem 1rem;
	padding: 0.5rem 1rem 0 1rem;
	visibility: hidden;
}
#play-listing .game-listed-info-big
{
	height:8rem;
	margin-left: 0;
}
#play-listing .game-listed h3, #play-listing .game-listed p.intro{
	color:#e3e3e3;
	margin: 0;
}
#play-listing .game-listed p{
	color:#9d9d9d;
	margin: 0;
	}
#play-listing a:hover h3{
	color:white;
}
 #news-listing .news-listing-image {
     display: block;
     width: 100%;
     height: 8rem;
     background-color: white;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     border-radius: 1rem 1rem 0 0;
     float: left;
}
 #news-listing .news-listing-preview {
     display: block;
     float: left;
     width: 100%;
     height: 6rem;
     background: white;
     border-radius: 0 0 1rem 1rem ;
     padding: 0.5rem 1rem 1rem 1rem;
}
 #news-listing a p {
     color: black;
     overflow: hidden;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     display: -webkit-box;
}
 #news-listing span {
     position: absolute;
     bottom: 1rem;
     right: 1rem;
     text-align: right;
     display: block;
     width:100% -1rem;
}
 #news-listing a {
     display: block;
     top: 0;
     position: relative;
     transition: top ease 0.25s, box-shadow ease 0.25s;
     float:left;
     box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
     border-radius: 1.25rem;
     margin-bottom: 2rem;
     width: 100%;
}
 #news-listing a:hover {
     top: -0.5rem;
     box-shadow: 0 0.5rem 3px 3px rgba(0, 0, 0, 0.05);
     transition: top ease 0.25s, box-shadow ease 0.25s;
}
 #news-article .news-article-main {
     border-radius: 1.25rem;
     background: white;
     display: block;
     width: 100%;
}
 .news-image-container {
     position: relative;
     height: 0;
     padding-bottom : 56.25%;
     margin-bottom: 2rem;
}
 .news-image {
     background-position: center center;
     background-color: white;
     background-size: contain;
     background-repeat: no-repeat;
     width : 100%;
     height: 100%;
     position: absolute;
     top: 0;
     bottom: 0;
}
 .news-sidebar {
     position: -webkit-sticky;
     position: sticky;
     margin-top: 2rem;
     top: 6rem;
     background: rgb(204,175,255);
     background: linear-gradient(45deg, rgba(204,175,255,1) 0%, rgba(249,199,255,1) 30%, rgba(238,233,255,1) 70%, rgba(183,240,255,1) 100%);
     animation: gradient 15s ease infinite;
     background-size: 400% 400%;
     border-radius: 1.25rem;
}
 .news-sidebar .news-next-link a {
     color: black;
     transition: background ease 0.5s;
     display: block;
     padding: 1rem 3rem 1rem 1rem;
     border-top: solid 2px white;
     background-image: url("../images/go-forward-arrow.png");
     background-position: right 1rem center;
     background-size: 1rem;
     background-repeat: no-repeat;
}
 .news-sidebar .news-prev-link a {
     color: black;
     transition: background ease 0.5s;
     display: block;
     padding: 1rem 1rem 1rem 3rem;
     border-radius: 0 0 1.25rem 1.25rem;
     border-top: solid 2px white;
     background-image: url("../images/go-back-arrow.png");
     background-position: 1rem center;
     background-size: 1rem;
     background-repeat: no-repeat;
}
 .news-sidebar .news-next-link a:hover {
     background: white;
     transition: background ease 0.5s;
     background-position: right 1rem center;
     background-size: 1rem;
     background-repeat: no-repeat;
     background-image: url("../images/go-forward-arrow.png");
}
 .news-sidebar .news-prev-link a:hover {
     background: white;
     transition: background ease 0.5s;
     background-position: 1rem center;
     background-size: 1rem;
     background-repeat: no-repeat;
     background-image: url("../images/go-back-arrow.png");
}
 .news-sidebar .news-nav-links {
     display: block;
     padding: 1rem 1rem 0 1rem;
}
 .news-nav-links p {
     line-height: 1.25em;
     font-size: 1.25rem;
     font-weight: 200;
}
 .news-nav-links h3 {
     line-height: 0.85em;
     font-size: 2rem;
}
 .embed-holder {
     position:relative;
     height: 0;
}
 .game-iframe {
     position:absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
}
 #play-details {
     padding-top: 1rem;
     padding-bottom: 1rem;
}
 .button-links {
     margin: auto 0;
     padding: 0;
     list-style-type: none;
     text-align: center;
     display: block;
     margin-top: 1rem;
     font-family: Arial;
     text-transform: none;
}
 .button-links li {
     display: inline-block;
     border-radius: 0.5rem;
     margin-right: 1rem;
     background: white;
     margin-bottom: 1.5rem;
     background-repeat: no-repeat;
}
 .button-links .black-border {
     border-width: 2px;
     border-style: solid;
     border-color: black;
}
 .button-links li a {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     padding: 0.25rem 0.75rem 0.25rem 2.5rem;
     color: black;
}
 .button-links .facebook2 {
     background-image: url("../images/facebook2.png");
     background-size: 1.5rem;
     background-position: left 0.35rem center;
}
 .button-links .discord {
     background-image: url("../images/discord.png");
     background-size: 1.7rem;
     background-position: left 0.35rem center;
}
 .button-links .presskit {
     background-image: url("../images/presskit.png");
     background-size: 1.5rem;
     background-position: left 0.35rem center;
}
 .button-links .twitter {
     background-image: url("../images/twitter2.png");
     background-size: 1.5rem;
     background-position: left 0.35rem center;
}
.button-links .itch
{
	background-image: url("../images/itch.png");
	background-size: 1.7rem;
	background-position: left 0.35rem center;

}
.button-links .steam
{
	background-image: url("../images/steam.png");
	background-size: 2rem;
	background-position: left center;
}
.button-links .appstore
{
	background-image: url("../images/appstore.png");
	background-size: 1.5rem;
	background-position: left 0.35rem center;

}
.button-links .googleplay
{
	background-image: url("../images/googleplay.png");
	background-size: 1.5rem;
	background-position: left 0.35rem center;

}
.button-links .soundtrack
{
	background-image: url("../images/music.png");
	background-size: 1.7rem;
	background-position: left 0.35rem center;

}
.button-links .switch
{
	background-image: url("../images/switch.png");
	background-size: 1.5rem;
	background-position: left 0.35rem center;

}
.button-links .playdate
{
	background-image: url("../images/playdate.png");
	background-size: 1.7rem;
	background-position: left 0.35rem center;

}
.button-links .weblink
{
	background-image: url("../images/www.png");
	background-size: contain;
	background-repeat: no-repeat;

}
 .button-links li:hover {
     background: black;
     background-image: url("../images/external-link.png");
     background-size: 1rem;
     background-position: left 0.75rem center;
     background-repeat: no-repeat;
}
 .button-links li a:hover {
     color: white;
}

#project-tags ul, #wp_page_numbers ul
{
	
	padding: 0;
	list-style-type: none;
	text-align: center;
	text-transform: none;
	margin-bottom: 1rem;
	margin-left: 0;
}

#project-tags ul li, #wp_page_numbers ul li
{
	display: inline-block;
	border-radius: 1rem;
	margin-right: 1rem;
	background-repeat: no-repeat;
	background-color: #9c9c9c;
	margin-bottom: 1rem;
}

#project-tags ul li:last-child, #wp_page_numbers ul li:last-child
{
	margin-right: 1rem;
}
#project-tags ul li a, #wp_page_numbers ul li a
{
	display: flex;
    align-items: center;
    justify-content: center; 
    height: 100%;
	padding: 0 1rem;
    color:#eaeaea;
    transition:.5s;
}

#project-tags ul li a:hover, #wp_page_numbers ul li a:hover
{
    color: white;
}
#project-tags ul li:hover, #wp_page_numbers ul li:hover
{
	background-color: #565656;
}
#wp_page_numbers ul li.active_page, #wp_page_numbers ul li.page_info, #project-tags ul li.active_page:hover, #wp_page_numbers ul li.page_info:hover
{
	background: none;
}
#wp_page_numbers ul li.active_page a, #wp_page_numbers ul li.page_info a, #wp_page_numbers ul li.active_page a:hover, #wp_page_numbers ul li.page_info a:hover
{
    color:black;
    cursor: default;
}
.h_iframe iframe {
  height:32rem;
}
.preorder
{
	background-color:rgba(0, 0, 0, 0.65);
	color: white;
	padding: 0.5rem 1rem;
	float:right;
	right:0;
	border-radius: 0 0.5rem 0 0;
}
@media screen and (max-width: 640px) 
{
		#project-tags ul
	{
		margin-bottom: 0rem;
		}
		 #play-listing {
	     padding-top: 1rem;
	     
	}
	 #play-listing .game-listed a {
	
	     margin-bottom: 1rem;
	    
	}
	 .quotebox {
	     
	     margin:0 0 1rem 0;
	}
	 .box-white {
	     margin:0 0 1rem 0;
	}
	 .header-image-container {
	     margin-bottom: 1rem;
	}
	 .header-image {
	
	     border-radius: 0;
	}
	.rounded
	{
		border-radius: 0;
	}
}
.hidden
{
	visibility: hidden;
	display: none;
}