* {
	image-rendering: pixelated; 
	image-rendering: crisp-edges;
	list-style-type: none;
	
}

@font-face {
	font-family: 'MF Font Base';
	src: url('font/MF Font Base.woff2') format('woff2');
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'MFPlayerControl';
	src: url('font/MFPlayerControl.woff2') format('woff2');
	font-style: normal;
	font-display: swap;
}

@font-face {	
	font-family: 'MF Terminal';
	src: url('font/MF Terminal.woff2') format('woff2');
	font-style: normal;
	font-display: swap;
}

body {
	max-width: 960px;
	margin: 0 auto;
    font-family: 'MF Font Base', sans-serif;
	background-color: #000000;
	transform: scale(2);
	transform-origin: top;
	overflow-x: hidden;
	background-size: contain;
    background-position: center top;
}

a {
	text-decoration: none;
}

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-family: 'Arial', sans-serif;
	-webkit-font-smoothing: none;
	color: #3348ba;
}

.logo {
	box-sizing: content-box;
	width: 100%;
	height: 490px;
	background-image: url("main-image/logo1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 960px 490px;
}

.container-music {
	box-sizing: content-box;
	width: 100%;
	height: 540px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'arial', sans-serif; 
	background-image: url("main-image/container_music_bacground.gif");
	background-repeat: no-repeat;
	background-position: center;

}

.menu-title {
	position: absolute;
	margin: 0px -624px 312px 0px;
	width: 196px;
	height: 50px;
	text-decoration: none;
}

.titlemusic-wrapper {
	position: relative;
	height: 100%;
}

.albums-cover {
	position: absolute;
	margin: 0px 110px -52px -256px;
	height: 400px;
}

.main-image {
	height: 400px;
}

.menu-container {
	position: absolute;
	margin: 0px -542px -58px 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0px;
}

.menu-item {
	position: relative;
	width: 196px;
	height: 20px;
}

.icon-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

 /* BUTTON ANIMATION */
.icon.normal {
	opacity: 1;
}
		
.icon.hover {
	opacity: 0;
}
		
.menu-item:hover .icon.normal {
	opacity: 0;
}

.menu-item:hover .icon.hover {
	opacity: 1;
}

 /* TITLE MUSIC ANIMATION */
.titlemusic.normal {
	opacity: 1;
}
		
.titlemusic.hover {
	opacity: 0;
}
		
.menu-title:hover .icon.normal {
	opacity: 0;
}

.menu-title:hover .icon.hover {
	opacity: 1;
}

.container-story {
	height: 540px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content-monitor {
	position: absolute;
	margin: 32px 0 0 40px;
	width: 635px;
	height: 270px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.monitor {
	width: 960px;
	height: 540px;
	z-index:1;
}

.monitor-gif {
	width: 635px;
	height: 270px;
	image-rendering: pixelated;
}

.story-title {
	position: absolute;
	margin: -376px 0 0 -384px;
	z-index: 3;
}

.titlestory-wrapper {
	position: center;
	width: 196px;
	height: 50px;
}	

 /* TITLE STORY ANIMATION */
.titlestory.normal {
	opacity: 1;
}
		
.titlestory.hover {
	opacity: 0;
}
		
.story-title:hover .icon.normal {
	opacity: 0;
}

.story-title:hover .icon.hover {
	opacity: 1;
}

.containter-news {
	box-sizing: content-box;
	width: 100%;
	height: 540px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("main-image/container_news.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size:  960px;
}

.news-title {
	position: absolute;
	margin: -418px 0 0 0px;
	z-index: 3;
}

.titlenews-wrapper {
	position: center;
	width: 196px;
	height: 50px;
}	

/* TITLE NEWS ANIMATION */
.titlenews.normal {
	opacity: 1;
}
		
.titlenews.hover {
	opacity: 0;
}
		
.news-title:hover .icon.normal {
	opacity: 0;
}

.news-title:hover .icon.hover {
	opacity: 1;
}

.news-block1 {
	background-image: url("main-image/container_news.png");
}