:root{
    --main-bg-color: #00ffff;
}


body
{
    background-color: var(--main-bg-color);
    font-family: "Nunito", "Verdana",sans-serif;
}
a:visited, a, p
{
  color:white;
  text-decoration: none;
  margin: .5em;
  padding: .5em;
}
a:hover{
  text-shadow: .2em .2em 3px black;
}
#home:hover{
  color:cyan;
}
#maths:hover{
  color:red;
}
#physique:hover{
  color:lime;
}
#musique:hover{
  color:pink;
}
#electronique:hover{
  color:yellow;
}
#stas:hover{
  color:orange;
}
#login:hover{
  text-shadow: none;
}
#upload:hover{
  color:black;
  text-shadow: 0 0 5px white;
}

header
{
  margin: 10px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-around;
  border: .1em solid black;
  border-radius: .5em;
  background-color: #2f2f2f
}

h1{
  border: .1em solid black;
  border-radius: .2em;
  margin: auto;
  text-align: center;
}

p{
  text-align: justify;
}

form
{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: stretch;
}

form input{
  background-color: #333;
  color: #ccc;
  margin: .2em;
  border-radius: 2em;
}

#deco{
  flex-direction: row;
  flex-wrap: wrap;
}

article{
  margin: .5em;
  padding: 2em;
  background-color: #4f4f4f;
  border-radius: 1em;
}

article form{
  margin: .5em 5em .5em 5em;
  padding: .5em;
}

.upForm{
  display: flex;
  flex-direction: row-reverse;
}

li{
  display: flex;
  flex-direction: row;
  align-items: center;
}

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