/* -----------------------------------------------------------------------------
Fonts
----------------------------------------------------------------------------- */
@font-face {
    font-family: Anders;
    src: url(https://www.horpereng.org/wp-content/themes/horpereng/fonts/Anders.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: CaviarDreams;
    src: url(https://www.horpereng.org/wp-content/themes/horpereng/fonts/CaviarDreams.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Century-Gothic;
    src: url(https://www.horpereng.org/wp-content/themes/horpereng/fonts/Century-Gothic.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: nightwear_0;
    src: url(https://www.horpereng.org/wp-content/themes/horpereng/fonts/nightwear_0.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Poppins;
    src: url(https://www.horpereng.org/wp-content/themes/horpereng/fonts/Poppins.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: riesling;
    src: url(https://www.horpereng.org/wp-content/themes/horpereng/fonts/riesling.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: TangoBT;
    src: url(https://www.horpereng.org/wp-content/themes/horpereng/fonts/TangoBT.ttf);
    font-weight: normal;
    font-style: normal;
}



/* -----------------------------------------------------------------------------
Container
----------------------------------------------------------------------------- */
.container-title {
	display: flex;
	justify-content: center;
	padding-top: 95px;
	margin-bottom: 70px;
}

.flex-title {
    display: flex;
	justify-content: center;
	overflow: hidden;
	width: 720px;
    border-radius: 15px 15px 0px 0px;
    background-color: #f3ecfd;
}

.flex-title ul {
    list-style-type: none;
    padding-left: 0px;
    overflow: hidden;
}



/* -----------------------------------------------------------------------------
Title Text One Line
----------------------------------------------------------------------------- */
/* Height = 96px */

/* -----------------------------------------------------------------------------
.title-text-oneline ► Height = 96px
.title-text-oneline:hover
----------------------------------------------------------------------------- */
/* Start here... */



/* -----------------------------------------------------------------------------
Title Text  - One Line, Two Lines, Three Lines
----------------------------------------------------------------------------- */
.title-text-oneline,
.title-text-twolines,
.title-text-threelines {
    font-family: 'Bebas Neue', cursive;
	font-size: 40px;
    color: white;
	text-shadow: 2px 2px 5px #F5006A;
    padding-top: 409px;
    width: 320px;
    position: absolute;
    filter: grayscale(100%);
	transition: all .5s cubic-bezier(0, 0.5, 1, 1);
	z-index: 1;
}

.title-text-oneline:hover,
.title-text-twolines:hover,
.title-text-threelines:hover {
    color: #FF85BA;
	transform: translate(0%, -1%);
	filter: grayscale(0);
	text-shadow: 2px 2px #F5006A;
}



/* -----------------------------------------------------------------------------
Title Image
----------------------------------------------------------------------------- */
#title-image1 {
    width: 320px;
    height: 453px; /* "Height = 44px + 409px = 453px" or "Height = 461px - 8px = 453px" */
    margin-left: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#title-image2 {
    width: 320px;
    height: 505px; /* Height = 96px + 409px = 505px */
    margin-left: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#title-image3 {
    width: 320px;
    height: 553px; /* Height = 144px + 409px = 553px */
    margin-left: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#title-image1 img,
#title-image2 img,
#title-image3 img {
	position: absolute;
    display: block;
	margin-left: 20px;
	box-shadow: 10px 15px 25px 0 rgba(61,20,22,.4);
	filter: grayscale(100%);
	transition: all .5s cubic-bezier(0, 0.5, 1, 1);
}

#title-image1:hover img,
#title-image2:hover img,
#title-image3:hover img {
	transform: translate(0, 2%);
	filter: grayscale(0);
	box-shadow: 1px 1px 10px 0 rgba(61,20,22,.2);
}

/* ---------------------- Title Image - Media Queries --------------------- */
@media screen and (max-width: 720px) {
    #title-image1,
    #title-image2,
    #title-image3 {
        margin-left: 0px;
    }
}



/* -----------------------------------------------------------------------------
Summary
----------------------------------------------------------------------------- */
.comic-title {
    padding: 0px;
    margin-top: 20px;
}

.title {
    font-family: TangoBT;
    font-size: 30px;
    color: white;
    background-color: #8338ec;
    padding-left: 20px;
}

.summary {
    padding: 20px;
    text-align: justify;
}



/* -----------------------------------------------------------------------------
Chapters
----------------------------------------------------------------------------- */
.all-chapters {
    margin-bottom: 20px;
}

.chapter-number {
    color: black;
    display: inline-block;
    width: 720px;
    text-decoration: none;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.chapter-number:hover {
    background-color: #FF85BA;
}