.titlebg {
color: var(--deepblue)
} 

 .title {
        background-image: url(https://assets-cdn.sums.su/RD/website-assets/Images/website-images/ORGANIC-RECTANGLE-DEEPBLUE.webp);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        text-align: center;
        max-width: 300px;
        color: var(--white);
        padding: 2.5rem;
		margin: 1rem 0;
    }

 .titletwo {
        background-image: url(https://assets-cdn.sums.su/RD/website-assets/Images/website-images/ORGANIC-RECTANGLE-DEEPBLUE.webp);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        text-align: center;
        max-width: 100px;
        color: var(--white);
        padding: 2.5rem;
		margin: 1rem 0;
    }

 #chapterLinks {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

body {
        margin: 0;
        padding: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Changa One', Calibri;
    }

    p {
        font-family: 'Kanit', Calibri;
        color: var(--deepblue);
    }

    a {
        font-family: 'Kanit', Calibri;
        font-weight: 500;
        color: var(--deepblue) !important;
    }

    a:hover {
        text-decoration: underline !important;
    }

 	.hide {
        display: none;
    }

    .visible, .show {
        display: block;
    }

    .g-center {
    display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
	}

	.g-btn {
	background-color: var(--yellow);	
	color: var(--deepblue);
	border: none;
	border-radius: 10px;
	padding: 0.5rem 1rem;
	text-decoration: none;
	margin: 1rem 0;
	}

	.g-btn:hover {
	transform: scale(103%);
	opacity: 95%;
	}

	.g-btn:active {
	transform: scale(95%);
	}

	.g-no-under {
	text-decoration: none; !important;
	}

	.margin-space {
		margin: 1rem 0;
	}


        :root {
        /* reading colours */
        --deepblue: #0d1d3b;
        --cerise: #ff1758;
        --yellow: #ffb411;
        --lightgrey: #ebebeb;
        --springGreen: #2ed28b;
        --seaBlue: #1eb9dc;
       --white: #FFFFFF;
        }


        .yellow {
        background-color: var(--yellow);
        border-radius: 10px;
        padding: 0.5rem;
		color: var(--deepblue)
        }

        .green {
        background-color: var(--springGreen);
        border-radius: 10px;
        padding: 0.5rem;
		color: var(--deepblue)
        }

        .blue {
        background-color: var(--seaBlue);
        border-radius: 10px;
        padding: 0.5rem;
		color: var(--deepblue)
        }
  
        .deepblue {
        background-color: var(--deepblue);
        color: var(--white);
        border-radius: 10px;
        padding: 0.5rem;
        }

        .deepblue-txt {
		color: var(--deepblue) !important;
		}

		.white-txt {
		color: var(--white) !important;
		}

    .yellowUnder {
        text-decoration: var(--yellow) underline;
    }

    .greenUnder {
        text-decoration: var(--springGreen) underline;
    }

    .blueUnder {
        text-decoration: var(--seaBlue) underline;
    }

 	.red {
        color: var(--cerise);
    }

    .bold {
        font-weight: 600;
    }

	button:hover{
		transform: scale(103%)
	}

 	.blueT {
        background-color: var(--deepblue);
        color: var(--white);
        padding: 0.5rem;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

 	.yellowTable {
        background-color: var(--yellow) !important;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .greenTable {
        background-color: var(--springGreen) !important;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .blueTable {
        background-color: var(--seaBlue) !important;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

 	.links {
        text-decoration: none;
    }

	.yellowOrganic {
  		background-image: url(https://assets-cdn.sums.su/RD/website-assets/Images/website-images/ORGANIC-RECTANGLE-AFTERGLOW.webp);
		color: var(--deepblue);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        padding: 3rem;
		max-width: 300px
	}

	.greenOrganic {
  		background-image: url(https://assets-cdn.sums.su/RD/website-assets/Images/website-images/ORGANIC-RECTANGLE-SPRING-GREEN.webp);
		color: var(--deepblue);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        padding: 3rem;
		max-width: 300px
	}

	.blueOrganic {
  		background-image: url(https://assets-cdn.sums.su/RD/website-assets/Images/website-images/ORGANIC-RECTANGLE-SEABLUE.webp);
		color: var(--deepblue);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        padding: 3rem;
		max-width: 300px
	}

	@media(max-width:767px) {
		.title {
		margin: 1rem auto;
	}

	.titleCustom {
		margin: 1rem auto;
		}
	}