body
{
    background: linear-gradient(135deg, #132D38 10%, #08151A 85%) no-repeat;
    background-size: 2000px 2000px;
    font-size: 0.8em;
}
h1
{
    font-family: 'Capriola', sans-serif;
    font-size: 10em;
    text-align: left;
    color: #1F7499;
}
p
{
    font-family: 'Capriola', sans-serif;
    font-size: inherit;
    line-height: 1.2em;
    text-align: left;
    color: #1F7499;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 4;
}
a:link
{
    font-size: inherit;
    text-decoration: none;
    color: inherit;
}
a:visited
{
    font-size: inherit;
    text-decoration: none;
    color: inherit;
}
a:hover
{
    font-size: inherit;
    text-decoration: none;
    color: #1F7499;
}
.gradient-text
{
    background-image: linear-gradient(170deg, #1F7499, #1A6382 35%, #175773 60%, #144C63 75%);
    background-clip: text;
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, 0.2);
}
.back2top
{
    z-index: 999;
    position: fixed;
    right: 10em;
    top: 25em;
    font-size: 2em;
    text-align: center;
    width: 2em;
    height: 2em;
    background-color: #144C6365;
    border-radius: 50%;
    filter: blur(10px);
}
#infos
{
    position: absolute;
    z-index: 14;
    top: 15em;
    right: 5em;
    font-family: 'Capriola', sans-serif;
    font-size: inherit;
    color: #144C63;
}
#titre1
{
    position: absolute;
    left: 30em;
}
#texte
{
    position: absolute;
    top: 51em;
    left: 43em;
    width: 40%;
}
#bulle
{
    position: absolute;
    z-index: 15;
    top: 20em;
    right: 20em;
    width: 20em;
    height: 18em;
    background-color: #144C6345;
    border-radius: 50%;
    filter: blur(10px);
}
#bulle2
{
    position: absolute;
    z-index: 15;
    top: 17em;
    right: 20em;
    width: 14em;
    height: 12em;
    background-color: #144C6345;
    border-radius: 50%;
    filter: blur(10px);
}
#bulle3
{
    position: absolute;
    z-index: 15;
    top: 50em;
    left: 4em;
    width: 14em;
    height: 12em;
    background-color: #144C6345;
    border-radius: 50%;
    filter: blur(10px);
}
#bulle4
{
    position: absolute;
    z-index: 15;
    top: 56em;
    left: 2em;
    width: 17em;
    height: 15em;
    background-color: #144C6345;
    border-radius: 50%;
    filter: blur(10px);
}
#bulle5
{
    position: absolute;
    z-index: 15;
    top: 65em;
    left: 9em;
    width: 6em;
    height: 6em;
    background-color: #144C6345;
    border-radius: 50%;
    filter: blur(10px);
}
#bulle6
{
    position: absolute;
    z-index: 15;
    top: 75em;
    right: 20em;
    width: 23em;
    height: 25em;
    background-color: #144C6320;
    border-radius: 50%;
    filter: blur(10px);
}
#escalier
{
    position: absolute;
    z-index: 25;
    top: -13em;
    left: -14em;
    width: 40em;
    height: 40em;
    border-radius: 50%;
    background: linear-gradient(250deg, #31505C 15%, #132D38 50%);
    filter: blur(20px);
}
#marche1
{
    position: absolute;
    z-index: 24;
    top: -1em;
    left: -7em;
    width: 35em;
    height: 35em;
    border-radius: 50%;
    background: linear-gradient(50deg, #31505C 15%, #132D38 50%);
    filter: blur(15px);
}
#marche2
{
    position: absolute;
    z-index: 23;
    top: 9em;
    left: -3em;
    width: 30em;
    height: 30em;
    border-radius: 50%;
    background: linear-gradient(250deg, #31505C 15%, #132D38 50%);
    filter: blur(10px);
}
#marche3
{
    position: absolute;
    z-index: 22;
    top: 19em;
    left: 3em;
    width: 25em;
    height: 25em;
    border-radius: 50%;
    background: linear-gradient(50deg, #31505C 15%, #132D38 50%);
    filter: blur(8px);
}
#marche4
{
    position: absolute;
    z-index: 21;
    top: 27em;
    left: 7em;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background: linear-gradient(250deg, #31505C 15%, #132D38 50%);
    filter: blur(6px);
}
#marche5
{
    position: absolute;
    z-index: 20;
    top: 35em;
    left: 12em;
    width: 15em;
    height: 15em;
    border-radius: 50%;
    background: linear-gradient(50deg, #31505C 15%, #132D38 50%);
    filter: blur(4px);
}
#marche6
{
    position: absolute;
    z-index: 19;
    top: 40em;
    left: 14.5em;
    width: 12em;
    height: 12em;
    border-radius: 50%;
    background: linear-gradient(250deg, #31505C 15%, #132D38 50%);
    filter: blur(4px);
}
#marche7
{
    position: absolute;
    z-index: 18;
    top: 44em;
    left: 17em;
    width: 10em;
    height: 10em;
    border-radius: 50%;
    background: linear-gradient(50deg, #31505C 15%, #132D38 50%);
    filter: blur(4px);
}
#marche8
{
    position: absolute;
    z-index: 17;
    top: 47em;
    left: 18em;
    width: 8em;
    height: 8em;
    border-radius: 50%;
    background: linear-gradient(250deg, #31505C 15%, #132D38 50%);
    filter: blur(4px);
}
#marche9
{
    position: absolute;
    z-index: 16;
    top: 50em;
    left: 20.7em;
    width: 6em;
    height: 6em;
    border-radius: 50%;
    background: linear-gradient(50deg, #31505C 15%, #132D38 50%);
    filter: blur(2px);
}
@media (max-width: 768px) {
.back2top
{
    right: 3em;
    top: 18em;
    width: 2em;
    height: 2em;
}
h1
{
    font-size: 4em;
}
p
{
    font-size: 1em;
    line-height: 1.2em;
}
a:link
{
    color: #1F7499;
}
a:visited
{
    color: #1F7499;
}
#infos
{
    z-index: 99;
    top: 6.5em;
    right: 2em;
    font-size: 0.8em;
}
#titre1
{
    z-index: 98;
    left: 5em;
}
#texte
{
    z-index: 97;
    top: 20em;
    left: 5em;
    width: 80%;
}
#bulle3
{
    top: 70em;
    background-color: #144C6310;
}
#bulle4
{
    top: 76em;
    background-color: #144C6320;
}
#bulle5
{
    top: 85em;
    background-color: #144C6320;
}
}