*{
    padding:0;
    margin:0;
}

body
{
    min-height: 100vh;
    display:flex;
    flex-direction: column;
    /*background:#1a1a1d;*/
    background:#1a1a1d url("../img/bg.png");
    background-size: cover;
    background-position:center center;
    color: white;
    font-family: 'Roboto', sans-serif;
}

main{
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width:600px;
    min-width:600px;
    align-self: center;
}
main>section{
    width: 150%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 10px 0;
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 5px;
    display:flex;
    flex-direction: column;
    overflow: hidden;
}
main>section>*
{
    margin: 12px;
    margin-left: 20px;
    margin-right: 10px;
    width:calc(100% - 30px);
}

header{
    position:sticky;
    top:0;
    background: #1a1a1d;
    transition: .4s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 999;
}

footer{
    min-height: 100px;
    background:#353538;
    display:flex;
    align-items: center;
    justify-content: space-around;
}
footer a{
    text-decoration: none;
    color:gray;
}
footer a:hover{
    text-decoration: underline;
}

/*----------------------navbar---------------------------*/

nav
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    color:white;
    text-decoration: none;
}
nav>div{
    margin-right: 20px;
}
nav a:hover {
    text-decoration: underline;
}

ul{
    display: flex;
    min-width: 400px;
    width:50vw;
    justify-content: space-between;
    align-items: center;
}
.Roles{
    display: list-item;
    margin-bottom: 10px;
    list-style: none;
}
section a
{
    color:rgb(157, 130, 255);
    text-decoration: none;
}
section a:hover
{
    text-decoration: underline;
}



li{
    list-style-type: none;
    justify-content: center;
    text-align: center;
    font-size: 120%;
    text-shadow: #bb2bf8 1px 1px 10px;
}
.slider
{
    min-width: 100%;
    max-width: 100%;
    display:flex;
    min-height: fit-content;
    align-self: center;
    animation:slide 12.5s infinite linear;
}
.slider>*
{
    min-width: 50%;
    max-width: 50%;
    min-height:fit-content;
    max-height:fit-content;
}

@keyframes slide {
    0%
    {
        transform: translateX(0);
    }
    25%
    {
        transform: translateX(-50%);
    }
    50%
    {
        transform: translateX(-100%);
    }
    75%
    {
        transform: translateX(-150%);
    }
    100%
    {
        transform: translateX(-200%);
    }
}

#tsp
{
    width:auto;
    margin-left: 10px;
}

.deroulement
{
    display: flex;
    justify-content: center;
    align-items: center;
}

#deroulement
{
    display: list-item;
    max-width:90%;
    list-style:none;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow:#ffffff 0px 0px 40px;
}

#logo
{
    max-height: 95px;
    width:auto;
    margin-left:8px;
    margin-bottom:4px;
}

#countdown
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shiny
{
    background: linear-gradient(to right, #be39ca 0%, #6306b9 35% 65%, #af3bbe);
    align-items: center;
    text-align: center;
    font-size:larger;
    text-shadow: #8E44AD 3px 3px 15px;
}

.submit
{
    margin-top: 5px;
    padding: 2px 3px;
}

h1
{
    text-align: center;
    margin:10px;
    text-shadow: #8E44AD 1px 1px 10px;
    margin-bottom: 10px;
}

span
{
    font-size: large;
    font-weight: normal;
}

p
{
    font-size: 120%;
}

label
{
    margin-top: 10px;
}

input
{
    margin-top: 5px;
    font-weight:bold;
    margin-bottom:10px;
}

h2
{
    margin-bottom: 10px;
    text-shadow: #662c80 1px 1px 10px;
}

#formulaire
{
    background-color: #7b4ff3ff;
    color:#ffffff;
    text-shadow: #ffffff 0px 0px 20px;
    border-radius: 16px;
    border-style:none;
    align-self: center;
    max-width: 25%;
    font-weight: bolder;
    font-size: large;
    height: 50px;
}