:root {
    --titlefont: Rubik Mono One;
    --bodyfont: Bebas Neue;

    --fontsizeXXL: 40px;
    --fontsizeXL: 36px;
    --fontsizeL: 32px;
    --fontsizeM: 28px;
    --fontsizeS: 24px;
    --fontsizeXS: 20px;
    --fontsizeXXS: 16px;


    --primCol: #7E47D1;
    --secCol: #63E9BA;
    --dmbgCol: #121212;
    --dmsurColOne: #232323;
    --dmsurColTwo: #343434;
    --dmsurColThr: #454545;
    --dmsurColFou: #565656;
    --dmerrorCol: #CF6679;
	--dmwarnCol: #CF8540;
	--dmcautCol: #CFCD66;

    --dmtextColHE: #ffffffe0;
    --dmtextColHME: #ffffffbb;
    --dmtextColME: #ffffff97;
    --dmtextColDIS: #ffffff55;


    --lmerrorCol: #B00020;
}

body {
    margin: 0;
    padding: 0;
}

a {
	text-decoration: none;
}

/* width */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--dmsurColOne);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--dmsurColTwo);
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--dmsurColThr);
}



.pagedivider {
	height: 3px;
	border-radius: 1px;
}



/* - New CSS - */
/* - - - Colours Section - - - */
/* - Brand Colours - */
.primbrandcolour {
	background-color: var(--primCol);
}
.secbrandcolour {
	background-color: var(--secCol);
}
/* - Brand Colours - */
.bgbase {
	background-color: var(--dmbgCol);
}
.bgsurcolone {
	background-color: var(--dmsurColOne);
}
.bgsurcoltwo {
	background-color: var(--dmsurColTwo);
}
.bgsurcolthr {
	background-color: var(--dmsurColThr);
}
.bgsurcolfou {
	background-color: var(--dmsurColFou);
}
/* - Banner Colours - */
.errorcol {
	background-color: var(--dmerrorCol);
}
.warncol {
	background-color: var(--dmwarnCol);
}
.cautcol {
	background-color: var(--dmcautCol);
}

/* - - - Font Styling Section - - - */
/* - Font Families - */
.titlefont {
	font-family: Rubik Mono One;
}
.bodyfont {
	font-family: Bebas Neue;
}
/* - Font Colors - */
.font90 {
	color: #ffffffD3;
}
.font80 {
	color: #ffffffB7;
}
.font60 {
	color: #ffffff85;
}
.font40 {
	color: #ffffff54;
}
/* - Font Formatting - */
.header1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 74px;
}
.header2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
}
.header3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.header4 {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
.paragraph {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}
/* - Text Alignments - */
.textalignl {
	text-align: left;
}
.textalignc {
	text-align: center;
}
.textalignr {
	text-align: right;
}

/* - - - Container Formatting Section - - - */
/* - Container Flex - */
.flex {
	display: flex;
}
.flexcolumn {
	flex-direction: column;
}
.flexrow {
	flex-direction: row;
}
/* - Container Flex Item Alignments - */
.alignitemsstretch {
	align-items: stretch;
}
.alignitemscenter {
	align-items: center;
}
.alignitemsstart {
	align-items: start;
}
.alignitemsend {
	align-items: end;
}
/* - Container Flex Content Alignments - */
.justifycontentstart {
	justify-content: start;
}
.justifycontentcenter {
	justify-content: center;
}
.justifycontentspacebetween {
	justify-content: space-between;
}
.justifycontentspacearound {
	justify-content: space-around;
}
/* - Container Widths - */
.width100 {
	width: 100%;
}
.width90 {
	width: 90%;
}
.width80 {
	width: 80%;
}
.width70 {
	width: 70%;
}
.width60 {
	width: 60%;
}
.width50 {
	width: 50%;
}
.width40 {
	width: 40%;
}
.width30 {
	width: 30%;
}
.width20 {
	width: 20%;
}
.width10 {
	width: 10%;
}
/* - Max Width Percentage - */
.maxwidth5p {
	max-width: 5%;
}
.maxwidth10p {
	max-width: 10%;
}
.maxwidth15p {
	max-width: 15%;
}
.maxwidth20p {
	max-width: 20%;
}
.maxwidth25p {
	max-width: 25%;
}
.maxwidth30p {
	max-width: 30%;
}
.maxwidth35p {
	max-width: 35%;
}
.maxwidth40p {
	max-width: 40%;
}
.maxwidth45p {
	max-width: 45%;
}
.maxwidth50p {
	max-width: 50%;
}
.maxwidth55p {
	max-width: 55%;
}
.maxwidth60p {
	max-width: 60%;
}
.maxwidth65p {
	max-width: 65%;
}
.maxwidth70p {
	max-width: 70%;
}
.maxwidth75p {
	max-width: 75%;
}
.maxwidth80p {
	max-width: 80%;
}
.maxwidth85p {
	max-width: 85%;
}
.maxwidth90p {
	max-width: 90%;
}
.maxwidth95p {
	max-width: 95%;
}
.maxwidth100p {
	max-width: 100%;
}
/* - Margin Top - */
.margintop4 {
	margin-top: 4px;
}
.margintop8 {
	margin-top: 8px;
}
.margintop12 {
	margin-top: 12px;
}
.margintop16 {
	margin-top: 16px;
}
.margintop20 {
	margin-top: 20px;
}
.margintop24 {
	margin-top: 24px;
}
.margintop28 {
	margin-top: 28px;
}
.margintop32 {
	margin-top: 32px;
}
.margintop36 {
	margin-top: 36px;
}
.margintop40 {
	margin-top: 40px;
}
.margintop44 {
	margin-top: 44px;
}
.margintop48 {
	margin-top: 48px;
}
.margintop52 {
	margin-top: 52px;
}
.margintop56 {
	margin-top: 56px;
}
.margintop60 {
	margin-top: 60px;
}
.margintop64 {
	margin-top: 64px;
}
.margintop68 {
	margin-top: 68px;
}
/* - Margin Right - */
.marginright4 {
	margin-right: 4px;
}
.marginright8 {
	margin-right: 8px;
}
.marginright12 {
	margin-right: 12px;
}
.marginright16 {
	margin-right: 16px;
}
.marginright20 {
	margin-right: 20px;
}
.marginright24 {
	margin-right: 24px;
}
.marginright28 {
	margin-right: 28px;
}
.marginright32 {
	margin-right: 32px;
}
.marginright36 {
	margin-right: 36px;
}
.marginright40 {
	margin-right: 40px;
}
.marginright44 {
	margin-right: 44px;
}
.marginright48 {
	margin-right: 48px;
}
.marginright52 {
	margin-right: 52px;
}
.marginright56 {
	margin-right: 56px;
}
.marginright60 {
	margin-right: 60px;
}
.marginright64 {
	margin-right: 64px;
}
/* - Margin Bottom - */
.marginbottom4 {
	margin-bottom: 4px;
}
.marginbottom8 {
	margin-bottom: 8px;
}
.marginbottom12 {
	margin-bottom: 12px;
}
.marginbottom16 {
	margin-bottom: 16px;
}
.marginbottom20 {
	margin-bottom: 20px;
}
.marginbottom24 {
	margin-bottom: 24px;
}
.marginbottom28 {
	margin-bottom: 28px;
}
.marginbottom32 {
	margin-bottom: 32px;
}
.marginbottom36 {
	margin-bottom: 36px;
}
.marginbottom40 {
	margin-bottom: 40px;
}
.marginbottom44 {
	margin-bottom: 44px;
}
.marginbottom48 {
	margin-bottom: 48px;
}
.marginbottom52 {
	margin-bottom: 52px;
}
.marginbottom56 {
	margin-bottom: 56px;
}
.marginbottom60 {
	margin-bottom: 60px;
}
.marginbottom64 {
	margin-bottom: 64px;
}
.marginbottom68 {
	margin-bottom: 68px;
}
/* - Margin Left - */
.marginleft-62 {
	margin-left: -62px;
}
.marginleftauto {
	margin-left: auto;
}
.marginleft4 {
	margin-left: 4px;
}
.marginleft8 {
	margin-left: 8px;
}
.marginleft12 {
	margin-left: 12px;
}
.marginleft16 {
	margin-left: 16px;
}
.marginleft20 {
	margin-left: 20px;
}
.marginleft24 {
	margin-left: 24px;
}
.marginleft28 {
	margin-left: 28px;
}
.marginleft32 {
	margin-left: 32px;
}
.marginleft36 {
	margin-left: 36px;
}
.marginleft40 {
	margin-left: 40px;
}
.marginleft44 {
	margin-left: 44px;
}
.marginleft48 {
	margin-left: 48px;
}
.marginleft52 {
	margin-left: 52px;
}
.marginleft56 {
	margin-left: 56px;
}
.marginleft60 {
	margin-left: 60px;
}
.marginleft64 {
	margin-left: 64px;
}
/* - Primary Containers - */






/* - Legacy CSS - */
.page {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--dmbgCol);
}

.herocontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 640px;
    background-color: var(--dmsurColTwo);
	position: relative;
	overflow: hidden;
}

.herocontainer img {
	height: 100%;
	display: block;}

.herocontainertext {
	position: absolute;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, #000 5%, #0000);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.herotext {
    display: flex;
    align-items: center;
    text-transform: capitalize;
    color: var(--dmtextColHE);
    font-family: var(--titlefont);
    font-size: var(--fontsizeXXL);
	margin-left: 5vw;
}

.herotext-mobile {
	display: none;
}

.herosubtext {
    display: flex;
    align-items: center;
    text-transform: capitalize;
    color: var(--dmtextColME);
    font-family: var(--titlefont);
    font-size: var(--fontsizeM);
	margin-left: 5vw;
}

.purpletext {
    color: var(--primCol);
}





.latestproductssectioncontainer {
    display: flex;
    flex-direction: column;
}

.latestproductstitlecontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.latestproductstitle {
    position: relative;
    display: inline-block;

    font-family: var(--titlefont);
    font-size: var(--fontsizeXL);
    color: var(--dmtextColHE);
    margin: 70px 0px 30px 0px;
}

.latestproductimage {
    width: 100%;
    height: auto;
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #121212FF 0%, #121212FF 5%, #12121200 100%);
    color: white; /* text color */
    text-align: center;

	z-index: 1;
}

.latestproductcontainerwrapper {
    overflow: auto;
}

.latestproductcontainer {
    display: flex;
}

.latestproducttile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 352px;
    min-width: 352px;
    height: 476px;
    color: var(--dmtextColHE);
    filter: saturate(40%);

    transition-duration: 0.4s;
}

.latestproductreleasedate {
    font-family: var(--bodyfont);
    font-size: var(--fontsizeXS);
    margin-top: 100px;
    color: var(--dmtextColME);

    transition-duration: 0.4s;
}

.latestproductsetcreatorname {
    font-family: var(--titlefont);
    text-align: center;
    font-size: var(--fontsizeS);
    color: var(--dmtextColHME);
}

.latestproductsetname {
    font-family: var(--titlefont);
    text-align: center;
    font-size: var(--fontsizeL);
    word-spacing: -10px;
    margin-top: 4px;
}

.latestproductloreshort {
    font-family: var(--bodyfont);
    font-size: var(--fontsizeXXS);
    text-align: center;
    width: 80%;
    margin-top: 12px;

    word-wrap: break-word;
}

.latestproductbutton {
    border-style: none;
    border-radius: 1em;
    padding: 4px 20px;
    font-size: var(--fontsizeXS);
    font-family: var(--bodyfont);
    background-color: #ffffff00;
    color: #12121200;
    margin-top: auto;
    margin-bottom: 36px;

    transition-duration: 0.4s;
}

.latestproductform {
	margin-top: auto;
}

.latestproducttile:hover {
    filter: saturate(100%);
}

.latestproducttile:hover .latestproductreleasedate {
    margin-top: 60px;
}

.latestproducttile:hover .latestproductbutton {
    background-color: var(--dmtextColDIS);
    color: var(--dmbgCol);
    margin-bottom: 44px;
}









.mailinglistsignupsection {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 640px;
    background-color: var(--dmbgCol);
	overflow: hidden;
}

.mailinglistimagecontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: 100%;
    width: 50%;
}

.indexlatestnews {
	max-width: 100%;
	height: auto;
}

.mailinglistsignupcontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 50%;
}

.mailinglistbody {
    margin: 8px 0px 32px 0px;
}

.mailinglistemail {
    border-radius: 5em;
    border-style: none;
    margin-right: -36px;
	width: 368px;
	height: 30px;
    padding: 4px 0px 4px 12px;
  	color: var(--dmsurColFou);

	transition-duration: 0.4s;
}

.mailinglistemail:focus {
	box-shadow: 0px 0px 8px 4px rgba(126,71,209,0.75);
	outline: none; /* Optional: Remove the default outline */
}