html
{
height: 100%;
}
body {
height: 95%;
margin: 0;
padding: 0;
color: #FFFFFF;
background-color : black;
}
#conteneur
{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
vertical-align: middle;
margin-top: 2%;
}
#conteneur1
{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
vertical-align: middle;
margin-top: 1%;
}
#conteneur4
{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
vertical-align: middle;
margin-top: 8%;
}
#gpio {
font-style: italic;
font-size: 22px;
}
#titre
{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
vertical-align: middle;
margin-top: 10%;
font-style: italic;
font-size: 22px;
}
.element
{
margin: auto;
text-align: center;
}
#date
{
margin: auto;
text-align: center;
font-size : 200%;
}
#ephem{
text-align: center;
font-size : 100%;
font-family: sans-serif;
font-style: italic;
font-size: 130%;
}
#heure
{
margin: auto;
text-align: center;
font-size : 400%;
}
#serpent {
text-align: center;
font-style: italic;
font-size: 18px;
}
#serpent a {
color: grey;
padding: 20px 10px 10px 95px;
background: rgba(0,0,0,0.5) url(../img/serpent.png) no-repeat 5px 10px;
}
/* première étape */
#serpent a, #serpent a:hover, #serpent a:focus {
color: white;
animation-name: serpent; /* nom de l'animation */
animation-duration: 4s; /* temps de l'animation (4s) */
animation-iteration-count: infinite; /* nombre de boucles (infinie) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
/* deuxième étape */
@-moz-keyframes serpent {
0% {background:rgba(0,0,0,0.4) url(../img/serpent.png) no-repeat 5px 10px;}
50% {background:rgba(0,0,0,1) url(../img/serpent.png) no-repeat 40px 10px;}
100% {background:rgba(0,0,0,0.4) url(../img/serpent.png) no-repeat 5px 10px;}
}
@-webkit-keyframes serpent {
0% {background:rgba(0,0,0,0.4) url(../img/serpent.png) no-repeat 5px 10px;}
50% {background:rgba(0,0,0,1) url(../img/serpent.png) no-repeat 40px 10px;}
100% {background:rgba(0,0,0,0.4) url(../img/serpent.png) no-repeat 5px 10px;}
}
#pc {
text-align: center;
font-size: 18px;
font-style: italic;
}
#pc a {
color: grey;
padding: 15px 10px 10px 95px;
background: rgba(0,0,0,0.5) url(../img/pc.png) no-repeat 5px 10px;
}
/* première étape */
#pc a, #pc a:hover, #pc a:focus {
color: white;
animation-name: pc; /* nom de l'animation */
animation-duration: 4s; /* temps de l'animation (4s) */
animation-iteration-count: infinite; /* nombre de boucles (infinie) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
/* deuxième étape */
@-moz-keyframes pc {
0% {background:rgba(0,0,0,0.4) url(../img/pc.png) no-repeat 5px 10px;}
50% {background:rgba(0,0,0,1) url(../img/pc.png) no-repeat 40px 10px;}
100% {background:rgba(0,0,0,0.4) url(../img/pc.png) no-repeat 5px 10px;}
}
@-webkit-keyframes pc {
0% {background:rgba(0,0,0,0.4) url(../img/pc.png) no-repeat 5px 10px;}
50% {background:rgba(0,0,0,1) url(../img/pc.png) no-repeat 40px 10px;}
100% {background:rgba(0,0,0,0.4) url(../img/pc.png) no-repeat 5px 10px;}
}
table {
margin: auto;
text-align: center;
}
#histo {
padding: 10px 40px;
background: #81DAF5;
color: black;
font-size: 18px;
font-style: italic;
border-radius: 25pt;
}
#mainpage {
padding: 5px 40px;
background: #81DAF5;
color: black;
font-size: 18px;
font-style: italic;
border-radius: 25pt;
}
#manage {
padding: 10px 40px;
background: #81DAF5;
color: black;
font-size: 18px;
font-style: italic;
border-radius: 25pt;
}