@charset "utf-8";
.soul {
	text-align: center;
	max-width: 90%;
	margin: auto;
	header, footer {
		background-color: lightgray;
		color: black;
		padding: 10px;
		margin-top: 10px;
		margin-bottom: 12px;
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
}
.menu {
	text-align: center;
	background-color: lightgray;
	color: black;
	padding: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
img {
	max-width: 100%;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	margin: auto;
	text-align: center;
}
.blog {
	max-width: 90%;
	margin: auto;
}
p, a {
	font-size: 16pt;
	text-decoration: none;
}
center {
	margin-bottom: 25px;
}
* {
	font-family: Arial;
}
@media (min-width: 720px) {
	.soul {
		max-width: 50%;
	}
	.blog {
		max-width: 70%;
	}
}
@media (min-width: 1200px) {
	.soul {
		max-width: 50%;
	}
}
@media (min-width: 1920px) {
	.soul {
		max-width: 30%;
	}
}
/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        background:	azure;
        color: black;
    }
	.menu {
		background-color: lightblue;
		box-shadow: none;
	}
	.soul {
		header, footer {
			background-color: lightblue;
			box-shadow: none;
		}
	}
	main {
		img {
			box-shadow: none;
		}
	}
	.blog {
		main {
			background-color: whitesmoke;
			padding: 15px;
		}
		img {
			box-shadow: none;
		}
	}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        background: DimGray;
        color: LightGray;
    }
    a {
	    color: DeepSkyBlue;
    }
    a:visited {
	    color: Plum;
    }
	.soul {
		a {
			color: blueviolet;
		}
		a:visited {
			color: darkcyan;
		}
	}
	.menu {
		a {
			color: blueviolet;
		}
		a:visited {
			color: darkcyan;
		}
	}
	.blog {
		main {
			background-color: chocolate;
			padding: 15px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
		}
	}
}
.vk, .ig {
	max-width: 40%;
	box-shadow: none;
}
    .side-menu {
        position: fixed;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: rgba(18, 18, 18, 0.2);
        padding: 10px;
        border-radius: 12px;
        z-index: 1000;
    }
    .side-menu a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 40px;
        background: lightblue;
        border-radius: 50%;
        transition: background 0.3s;
        color: white;
        text-decoration: none;
    }
    .side-menu a:hover {
        background: brown;
    }
    @media (max-width: 768px) {
        .side-menu {
            display: none;
        }
}