@import "../composants_custom/aside_custom/style/style.css";

:root {
    --bg-color: rgba(255, 255,255, 0.7);
    --text-color: #7f2538;
    --link-color: #7f2538;
    --hover-link-color: hsl(var(--second-color), 35%, 25%);
}

body {
	background-image: url("../imgs_custom/fond_site_mobile.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	margin: 0;
}

#page {
    display: grid;
    max-width: 80vw;
    width: 80vw;
    margin: auto;
    grid-template-columns: 20vw 58vw;
    grid-template-rows: 14.5vw auto 14.5vw;
    grid-gap: 0vw 2vw;
}

header {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

aside {
    background: var(--bg-color);
    border-radius
    grid-row: 2 / 4;
    grid-column: 1 / 2;
}

main {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

footer {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}

@media screen and (max-width: 1920px) {
	body {
		background-image: url("../imgs_custom/fond_site_4'3.jpg");
	}
}

@media screen and (min-width: 1920px) {
	body {
		background-image: url("../imgs_custom/fond_site.jpg");
	}
}