@font-face {
    font-family: 'MonteCarlo-Regular';
    src: url('MonteCarlo-Regular.eot') format('eot'),
         url('MonteCarlo-Regular.woff') format('woff'),
         url('MonteCarlo-Regular.ttf') format('truetype'),
         url('MonteCarlo-Regular.svg') format('svg');
}
@font-face {
    font-family: 'SyneMono-Regular';
    src: url('SyneMono-Regular.eot') format('eot'),
         url('SyneMono-Regular.woff') format('woff'),
         url('SyneMono-Regular.ttf') format('truetype'),
         url('SyneMono-Regular.svg') format('svg');
}
h1
{
    font-family: 'MonteCarlo-Regular';
	font-size: 50px;
	text-align: center;
	color: black;
}
h2
{
	font-family: 'MonteCarlo-Regular';
	font-style: italic;
	font-size: 35px;
	color: purple
}
h2 
{
    border-bottom: 2px solid purple;
    padding-bottom: 5px;
}
h3
{
	font-family: 'MonteCarlo-Regular';
	font-style: italic;
	font-size: 45px;
	text-align: center;
	color: purple
}
p
{
	font-family: 'SyneMono-Regular';
	font-size: 20px;
	color: black;
}
img 
{
    display: block;
    margin-left: auto;
    width: 25%; 
}
img {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(128, 0, 128, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 15px;
    margin-bottom: 15px;
}

img:hover 
{
    transform: scale(1.04);
    box-shadow: 0 12px 30px rgba(128, 0, 128, 0.5);
}
body 
{
    background-color: #f9f3f9;
    margin: 0 auto;
    max-width: 900px;
    padding: 20px 40px;
}
#sommaire {
    background-color: #f0e0f0;
    border-left: 5px solid purple;
    border-radius: 8px;
    padding: 15px 25px;
    margin-bottom: 30px;
}

#sommaire ul li a {
    color: purple;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}

#sommaire ul li a:hover 
{
    color: #d400d4;
}