@font-face {
    font-family: 'BigNoodleTitling';
    src: url('./fonts/big_noodle_titling.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ArielNarrow7';
    src: url('./fonts/arial_narrow_7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'F25BankPrinter';
    src: url('./fonts/F25_Bank_Printer.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


* { 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
} 



body {
    background: url('./BackgroundPattern.png') repeat top left, #E4E4E4;
    justify-items: center;
}


h1   {
	font-family: 'BigNoodleTitling', sans-serif;
	color: #080808;
	font-size: 64px;
	font-weight: normal;
}


p, li, input, span    {
	color: #080808;
	font-size: 30px;
	font-family: 'ArielNarrow7', sans-serif;
}


#top-section {
	padding-top: 55px;
	padding-right: 150px;
	padding-left: 150px;
	width: 100%;
	display: flex;
	justify-content:left
}


#main-title {
	font-size: 128px;
	background:#8c63eb;
	padding: 0px 10px 0px 10px;
	text-align: left;
	display: inline-block;
}

#top-right-container {
	width: auto;
	margin-left: auto;
	margin-right:auto;
}

#top-right-text {
	justify-content: center;
}

#top-right-container p {
	font-size: 48px;
}



#second-section {
	padding-top: 50px;
	display: flex;
	padding-right: 150px;
	padding-left: 150px;
	width: 100%;
}

#descriptors {
	margin-right: auto;
}

#descriptors span {
	font-family: 'F25BankPrinter', serif;
	text-align: left;
}

#descriptors .key {
	margin-right: auto;
}

#descriptors .value {
	margin-left: auto;
	background-color: #bbbaf1;
	padding: 0px 4px 0px 4px;
}

#descriptors div {
    display: flex;
    gap: 50px;
	padding-top: 10px;
}

#preview {
	margin-left: auto;
	margin-right: auto;
}

#preview-title {
	font-size: 40px;
	background-color: #fff45e;
	padding: 0px 6px 0px 6px;
	margin-bottom: 10px;
}

.preview-details {
	font-family: 'F25BankPrinter', serif;
	font-size: 18px;
}

#preview-video-container {
	margin-top: 10px;
	min-width: 616px;
	max-width: 616px;
	min-height: 496px;
	max-height: 496px;
	background-image: url('VideoBackground.png');

	display: flex;
    justify-content: center;
    align-items: center;
}

#preview span {
	background-color: #bbbaf1;
	padding: 0px 4px 0px 4px;
}

#more-details {
	margin-left: auto;
}

#more-details p {
	text-align: left;
	margin-top: 10px;
}

#more-details .keyword {
	background-color: #bbbaf1;
	padding: 0px 5px 0px 5px;
}

#more-details .platform {
	background-color: #f8f29b;
	padding: 0px 5px 0px 5px;
}