/* ================================================================= Section 1 */
#Section1 {
	width: 100%;
	min-height: 425px;
	margin-top: 125px;
	margin-bottom: 125px;
	text-align: center;
	border-top: 1px solid #1e1e1e;
	border-bottom: 2px solid #2b2b2b;
box-shadow: 0px 70px 145px 12px #00000096 inset, 0px 5px 30px -10px #0097ff30;
  background: radial-gradient(circle, rgb(0, 125, 215) 4%, rgb(0, 119, 193) 23%, rgba(0, 0, 0, 0.73) 91%);
}
.Introduction {
	top: 70px;
	max-width: 80vw;
    }
    .Introduction-Logo {
    	width: 477px;
    	height: 128px;
    	background-image: url('https://www.darknessblade.com/Extras/Images/DarknessBlade_MiniLogo.png');
    	filter: drop-shadow(0px 3px 10px black);
    }
    .Introduction h2 {
    	display: block;
    	margin-top: 31px;
    	text-align: center;
    	color: #ffffffa8;
    	font-family: DarknessBlade-1;
    }
    .Introduction h3 {
    	display: block;
    	top: -3px;
    	margin-bottom: 20px;
        text-shadow: none;
    	text-align: center;
    	font-size: 18px;
    	font-weight: normal;
    	font-family: DarknessBlade-1;
    }
    .Introduction-GamesButton {
    	width: 145px;
    	height: 43px;
    	margin-left: 20px;
    	margin-right: 17px;
    	color: white;
    	white-space: nowrap;
    	align-content: center;
    	text-decoration: none;
    	text-shadow: 1px 1px 5px black;
    	font-size: 20px;
    	font-weight: bolder;
    	font-family: DarknessBlade;
    	border-radius: 9px;
    	border: 1px solid #222;
    	box-shadow: 3px 3px 3px #0000008a;
    	background: linear-gradient(#1f2428 0%, #151a1e 50%, #0d1216 100%);
    	transform: scale(1) perspective(40px) rotateX(1deg);
    }
    .Introduction-GamesButton:hover {
    	transition: 0.05s;
    	transform: scale(1.03) perspective(40px) rotateX(1deg);
    	cursor: pointer;
    }
    .Introduction-SteamButton {
    	height: 43px;
    	width: 190px;
    	margin-bottom: 17px;
    	white-space: nowrap;
    	text-decoration: none;
    	border-radius: 9px;
    	border: 1px solid #222;
    	box-shadow: 3px 3px 3px #0000008a;
    	background: linear-gradient(#1c2a40 0%, #183f6a 50%, #0f6693 100%);
    	transform: scale(1);
    }
    .Introduction-SteamButton:hover {
    	transform: scale(1.03);
    	transition: 0.05s;
    }
    .Introduction-SteamButtonLogo {
    	position: absolute;
    	top: 2px;
    	left: 5px;
    	width: 46px;
    	height: 100%;
    	background-size: 130%;
    	background-position: -17px;
    	background-image: url('https://www.darknessblade.com/Extras/Images/Steam_Logo.png');
    }
    .Introduction-SteamButtonText {
    	position: absolute;
    	left: 56px;
    	width: calc(100% - 56px);
    	height: 100%;
    	align-content: center;
    	font-size: 20px;
    	font-weight: bolder;
    	font-family: DarknessBlade;
    	text-shadow: 1px 1px 5px black;
    	border-top-right-radius: 9px;
    	border-bottom-right-radius: 9px;
    	background: linear-gradient(#1f2428 0%, #151a1e 50%, #0d1216 100%);
}
.Icon {
	width: 425px;
	height: 425px;
	pointer-events: none;
    }
    .Icon::after {
    	content: "™";
    	top: 10px;
    	left: auto;
    	right: 55px;
    	width: auto;
    	height: auto;
    	color: #ffffff6b;
    	font-size: 12px;
    	font-family: initial;
    	text-shadow: 1px 1px #00000096;
    }
    .IconWings {
    	display: block;
    	position: absolute;
    	top: -38px;
    	width: 100%;
    	height: calc(100% + 69px);
    	background-image: url('https://www.darknessblade.com/Extras/Images/DarknessBlade_IconWings.png');
    	animation: IconWingsFloat 6s linear infinite;
    	filter: drop-shadow(0px 3px 10px black);
    }
    @keyframes IconWingsFloat {
    	0%,
    	100% { transform: translateY(0); }
    	50% { transform: translateY(-3px); }
    }
    .IconCore {
    	display: block;
    	position: absolute;
    	left: 156px;
    	width: calc(100% - 319px);
    	height: calc(100% - 35px);
    	background-image: url('https://www.darknessblade.com/Extras/Images/DarknessBlade_IconCore.png');
    	animation: IconCoreFloat 5s ease-in-out infinite;
    }
    @keyframes IconCoreFloat {
    	0%,
    	100% { transform: translateY(0); }
    	50% { transform: translateY(-4px); }
}
.Awards {
	display: block;
	text-align: left;
	background-color: #151515;
	border-top: 1px solid #282828;
	border-bottom: 1px solid #22384d;
	box-shadow: 0px 10px 10px #222 inset;
	z-index: 99;
    }
    .AwardsIcon {
    	position: absolute;
        top: -180px;
    	left: 50px;
    	width: 153px;
    	height: 168px;
    	padding-top: 15px;
    	font-size: 32px;
        letter-spacing: 1px;
    	text-align: center;
    	font-weight: normal;
    	font-variant: small-caps;
    	font-family: DarknessBlade-1;
    }
    .AwardsIcon span {
    	font-size: 17px;
    	font-family: DarknessBlade-1;
    }
    .AwardsIcon::before {
    	content: "";
    	left: -50%;
    	background-size: auto 100%;
    	background-image: url('https://www.darknessblade.com/Extras/Images/Awards_Icon.png');
    	background-position-y: 5px;
    	top: -5px;
    }
    .AwardsIcon::after {
    	content: "";
    	left: 50%;
    	transform: scale(-1, 1);
    	background-size: auto 100%;
    	background-image: url('https://www.darknessblade.com/Extras/Images/Awards_Icon.png');
    	background-position-y: 5px;
    	top: -5px;
    }
    .Awards a {
    	top: 6px;
    	padding-left: 10px;
    	padding-bottom: 11px;
    	color: white;
    	font-size: 15px;
    	font-variant: small-caps;
    	text-decoration: none;
    }
    .Awards a:hover {
    	text-decoration: underline;
}
/* ================================================================= Section 2 */
#Section2 {
    width: 100%;
    min-height: 521px;
    margin-top: 125px;
    margin-bottom: 125px;
    padding-top: 25px;
    text-align: center;
    border-top: 1px solid #1e1e1e;
    border-bottom: 2px solid #2b2b2b;
    box-shadow: 0px 20px 55px #00000073;
    background-color: #0d0d0d;
}
#Section2 article {
    display: none;
    width: 100%;
}
.Section2-Preview {
    width: 600px;
    max-width: 80vw;
    margin-top: 35px;
    margin-bottom: 110px;
}
.Section2-Logo {
    margin-top: 22px;
    margin-bottom: 22px;
}
.Section2-Preview h2, .Section2-Preview p {
    font-size: 23px;
    display: inline;
    text-shadow: none;
}
.currentGame {
    display: inline-block !important;
}
.Section2-Button {
    display: block;
    top: 70px;
    width: 320px;
    height: 0px;
    max-width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    color: white;
    cursor: pointer;
    text-decoration: none;
    align-content: center;
    line-height: 56px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    font-family: DarknessBlade-1;
    transform: scale(1);
    text-shadow: 0px 0px 16px #000, 0px -1px 13px #ffffff8a;
    filter: drop-shadow(0px 3px 7px #000);
}
.Section2-Button::before, .Section2-Button::after {
    content: "";
    position: absolute;
    height: 25px;
    transform: perspective(20px) rotateX(175deg);
    transform-origin: bottom;
    background: linear-gradient(#0000004f ,#5e585800 4px, #0b0b0b3d 7px);
    border: 3px double #f0efea69;
    border-bottom: 0;
    box-shadow: 0px -3px 7px -3px #00000080;
    z-index: -1;
}
.Section2-Button::after {
    transform: perspective(20px) rotateX(365deg);
}
.Section2-Button:hover {
    transform: scale(1.03);
    transition: 0.05s;
}
.Section2-Carousel {
    width: 850px;
    height: auto;
    margin-bottom: 30px;
    margin-top: 33px;
    box-shadow: 0px -10px 20px -7px #00000061;
    aspect-ratio: 1.7782;
}
.Section2-Carousel img {
    width: 100%;
    height: 100%;
}
.Section2-CarouselArrow {
    height: 100%;
    width: 68px;
    cursor: pointer;
    background: linear-gradient(270deg,#00000047,#0000 92%);
    position: absolute;
    z-index: 105;
    right: 100%;
    left: auto;
}
.Section2-CarouselArrow::after {
    content: "";
    background-image: url('https://www.darknessblade.com/Extras/Images/Next_Arrow.png');
    filter: drop-shadow(8px 0px 10px #00000075);
    background-size: 35% 46px;
    opacity: 0.5;
}
.Section2-CarouselArrow:hover::after {
    content: "";
    opacity: 0.9;
}
.Section2-CarouselArrow.Right {
    transform: scale(-1, 1);
    left: 100%;
    right: auto;
}
.Section2-CarouselDots {
    width: 100%;
    height: 26px;
    align-content: center;
    position: absolute;
    display: block;
    bottom: -26px;
}
.Section2-CarouselDots div {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    border: 1px solid #ffffff96;
    margin: 5px;
    cursor: pointer;
    box-shadow: 0px 0px 1px white;
}
.Section2-CarouselDots div.selected {
    background: #e1e1e1;
}
.Section2-Games {
    width: 100%;
    background-image: linear-gradient(320deg, #0009, #0b0b0b99, #08080899, #06060699, #09090999, #06060699, #1119, #0f0f0f99, #10101099, #17171799),linear-gradient(#1a1a1a,#242424 20px, #0f0f0f 53px);
    border-top: 5px solid #282828;
    box-shadow: 0px -15px 17px #00000052;
    margin-top: 32px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.Section2-GamesTitle {
    display: block;
    text-align: right;
    left: 10vw;
    font-family: DarknessBlade-1;
    position: absolute;
    margin-top: 2px;
    z-index: 104;
}
.Section2-Games ul li {
    width: 200px;
    aspect-ratio: 2/3;
    max-width: 70vw;
    background-color: black;
    margin: 15px;
    box-shadow: 0px 10px 20px black;
    border: 1px solid #171717;
    cursor: pointer;
    font-size: 20px;
    font-family: DarknessBlade-1;
    align-content: end;
    line-height: 0;
    transform: scale(1);
}
.Section2-Games ul li:hover {
    transform: scale(1.03);
    transition: 0.05s;
}
.Section2-Games ul li img {
    z-index: -1;
    width: 100%;
    height: 100%;
}
.Section2-CarouselFullscreenIcon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    opacity: 0.15;
    cursor: pointer;
    background-size: 100% 100%;
    background-image: url("https://www.darknessblade.com/Extras/Images/Fullscreen_Icon.png");
}
.Section2-CarouselFullscreenIcon:hover {
    opacity: 0.35;
}
#ImagePreview-Window {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    align-content: center;
    background: #000000a8;
    z-index: 500;
}
#ImagePreview-Window img {
    transform: scale(1.5);
    max-width: 66vw;
    max-height: 66vh;
}
#ImagePreview-Window div {
    position: fixed;
    top: 30px;
    right: 30px;
    cursor: pointer;
    font-size: 24px;
}
/* ================================================================= Section 3 */
#Section3 {
    width: 100%;
    margin-top: 125px;
    margin-bottom: 125px;
    padding-top: 25px;
    border-top: 1px solid #1e1e1e;
    border-bottom: 2px solid #2b2b2b;
    box-shadow: 0px 20px 55px #00000073;
    background-color: #0d0d0d;
    padding-bottom: 25px;
    text-align: center;
}
#Section3 article {
    width: 900px;
    display: block;
    margin: auto;
    padding-bottom: 33px;
    max-width: 80vw;
}
#Section3 h2 {
    position: absolute;
    top: -30px;
    left: 10vw;
    font-family: DarknessBlade-1;
}
#Section3 h3 {
    font-family: DarknessBlade-1;
}
#Section3 p {
    font-size: 17px;
}
/* ================================================================= Tablet */
@media (max-width: 1430px) {
.Awards {
	margin-top: 130px;
	z-index: 100;
}
}
/* ================================================================= Mobile */
@media (max-width: 1000px) {
#Section1 {
	margin-top: 0px;
	padding-top: 50px;
}
.Icon {
	top: 40px;
}
.Introduction {
	height: 380px;
}
.Introduction h2 {
	font-size: calc(1vw + 15px);
}
.Introduction p {
	top: 0px;
	font-size: calc(1vw + 12px);
}
.Introduction-GamesButton {
    width: 160px;
}
.AwardsIcon {
    top: -143px;
    width: 116px;
    height: 131px;
    font-size: 23px;
}
.Section2-CarouselArrow {
    left: auto !important;
    right: auto !important;
}
.Section2-CarouselArrow.Right {
    right: 0 !important;
}
.Section2-Carousel {
    margin-bottom: 70px;
}
.Section2-CarouselFullscreenIcon {
    width: 64px;
    height: 64px;
    right: calc(50% - 32px);
    top: calc(50% - 32px);
    background-size: 50% 50%;
}
.Section2-Games ul li {
    width: 350px;
    font-size: 24px;
    line-height: 3;
}
#Section3 p {
    text-align: left;
  text-indent: 20px;
}
}