* {
	box-sizing: border-box;
	image-rendering: pixelated; 
	image-rendering: crisp-edges;
	list-style-type: none;
	text-decoration: none;
}

body {
	max-width: 960px;
	margin: 0 auto;
	background-color: #000000;
	transform: scale(2);
	transform-origin: top;
	overflow: hidden;
	background-size: 1920px;
	background-repeat: no-repeat;
    background-position: center top;
	background-image: url("image/background_border_anim.gif");
}
footer {
	position: relative;
	width: 100%;
	height: 50px;
	margin-top: 12px;
}

#boot-screen {
	max-width: 960px;
	position: fixed;
	top: -40px;
	z-index: 9999;

}

#boot-gif {
	width: 100%;
	object-fit: cover;
}
		
.top {
	position: relative;
	width: 100%;
	height: 54px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0px;
	box-sizing: content-box;
	background-image: url("image/header_bc.png");
}

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

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

.back-button {
	position: relative;
	top: -3px;
	left: -220px;
	width: 124px;
	height: 10px;
}

.header-item {
	position: relative;
	margin-left: 15px;
	left: 225px;
	top: -3px;
	width: 60px;
	height: 10px;
}


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

.header-item:hover .icon.normal {
	opacity: 0;
}

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

.back-button:hover .icon.normal {
	opacity: 0;
}

.back-button:hover .icon.hover {
	opacity: 1;
}

/* PASSIVE BLINK */
@keyframes blink {
    0%, 100%   { opacity: 1; }
    50%, 50%  { opacity: 0; }
    100%, 0% { opacity: 1; }
}

.header-item.flicker .icon.flicker-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    z-index: 2;
    animation: blink 0.6s step-end infinite;
}

.header-item:hover .icon.normal {
    opacity: 0;
}

.header-item:hover .icon.flicker-img {
    opacity: 1;
    animation: none;
}
/* >>> HEADER <<< */

/*  ALBUMS GRID  */
.albums-grid-2025 {
	width: 960px;
	height: 487px;
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 19px 169px;
	margin-top: 31px;
	margin-left: 8px;
	gap: 14px 0;
}

.albums-grid-2024 {
	width: 960px;
	height: 255px;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 19px 268px;
	margin-top: 9px;
	margin-left: 10px;
}

.albums-grid-2023 {
	width: 960px;
	height: 255px;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 19px 268px;
	margin-top: 9px;
	margin-left: 10px;
}

.albums-grid-2020 {
	width: 960px;
	height: 487px;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 19px 268px;
	margin-top: 9px;
	margin-left: 10px;
	gap: 14px 0;
}

.albums-grid-2019 {
	width: 960px;
	height: 255px;
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 19px 169px;
	margin-top: 9px;
	margin-left: 8px;
}

.albums-grid-2018 {
	width: 960px;
	height: 255px;
    display: inline-grid;
    grid-template-columns: repeat(1, 1fr);
    padding: 19px 170px;
	margin-top: 9px;
	margin-left: 214px;
}

.album {
	position: absolute;
	object-fit: cover;
}

.album-card {
	position: relative;
	width: 192px;
	height: 212pxs;
}

.album.normal {
	opacity: 1;
}
		
.album.hover {
	opacity: 0;
}

.album-card:hover .album.normal {
	opacity: 0;
}

.album-card:hover .album.hover {
	opacity: 1;
}

/*  >>> ALBUMS GRID <<<  */