/* CSS completo per il sito Malware House */

body {
	background-color: #000;
	color: #fff;
	font-family: Arial, sans-serif;
	background-image: linear-gradient(to bottom, #000000, #0a0a0a, #262626);
}

header {
	background-color: #b10303;
	padding: 20px;
	box-shadow: 0 5px 15px rgba(177, 3, 3, 0.5);
}

h1 {
	font-size: 48px;
	margin: 0;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

main {
	margin: 50px auto;
	max-width: 600px;
	text-align: center;
}

h2 {
	font-size: 36px;
	margin-bottom: 30px;
	text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3);
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	padding: 20px;
	background-color: #333;
	margin-bottom: 10px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

li:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

span {
	flex-grow: 1;
	font-size: 24px;
}

button {
	background-color: #007bff;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
	border: none;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	cursor: pointer;
	font-weight: bold;
}

button:hover {
	background-color: #0056b3;
	position: relative;
    top: -2px;
	box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}

footer {
	background-color: #b10303;
	padding: 20px;
	text-align: center;
	box-shadow: 0 -5px 15px rgba(177, 3, 3, 0.5);
}

.endline {
    font-family: sans-serif;
    font-size: 30px;
    color: #500000;
    text-shadow: 2px 2px #000000;
}

#change-song-btn {
	background-color: #f00;
}

#change-song-btn:hover {
	box-shadow: 2px 5px 15px rgba(222, 0, 0, 0.7);
}


.overgame {
    font-family: sans-serif;
    font-size: 30px;
    color: #0d0050;
    text-shadow: 2px 2px #4300de;
}

.lastview {
	font-family: sans-serif;
    font-size: 30px;
    color: #6c8310;
    text-shadow: 2px 2px #afdb02;
}

.lastview2 {
	font-family: sans-serif;
    font-size: 30px;
    color: #b10303;
    text-shadow: 2px 2px #500000;
}

.lastview3 {
	font-family: sans-serif;
    font-size: 30px;
    color: orangered;
    text-shadow: 2px 2px #000;
}

.lastview4 {
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    color: #590424;
    text-shadow: 2px 2px #3d0219;
}

.lastview5 {
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 45px;
    color: #9a9797;
    text-shadow: 2px 2px #767373;
}

.aresamigos {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    color: #000;
    text-shadow: 2px 2px #202020;
}

#aresAmigosOptions {
    margin-top: 10px;
}

.aresamigos-option {
    font-family: sans-serif;
    font-size: 30px;
    color: #014694;
    text-shadow: 1px 1px #032b59;
}

#toggleCollection {
    background-color: #4e9a06;
    color: #fff;
}

#toggleCollection:hover {
    background-color: #2e5c03;
    box-shadow: 0 5px 15px rgba(78, 154, 6, 0.4);
}

#toggleAresAmigos {
    background-color: #000;
    color: #fff;
    text-shadow: 1px 1px #202020;
    border: 1px solid #333;
}

#toggleAresAmigos:hover {
    background-color: #222;
    box-shadow: 2px 5px 15px rgba(29, 29, 29, 0.8);
}

.collection {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    color: #4e9a06;
    text-shadow: 2px 2px #2e5c03;
}

#lastViewCollection {
    margin-top: 10px;
}

#toggleCollection {
    background-color: #4e9a06;
}

#toggleCollection:hover {
    background-color: #2e5c03;
}

/* Nuovi stili per i pulsanti di AresAmigos */
.button-group {
    display: flex;
    gap: 10px;
}

.download-btn {
    background-color: #014694;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background-color: #0254b3;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(1, 70, 148, 0.4);
}

.citation-btn {
    background-color: #022042;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.citation-btn:hover {
    background-color: #0254b3;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(2, 32, 66, 0.4);
}

.header-download {
    position: absolute;
    top: 20px;
    right: 20px;
}

.header-download button {
    background-color: #444;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.header-download button:hover {
    background-color: #222;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}