html {
color: white;
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: monospace;
margin: 20px;
}
/* Menu Burger */
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked+.menu__btn>span {
transform: rotate(45deg);
}
#menu__toggle:checked+.menu__btn>span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked+.menu__btn>span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked~.menu__box {
left: 0 !important;
}
.menu__btn {
position: fixed;
width: 25px;
height: 25px;
cursor: pointer;
z-index: 1;
left: 25px;
}
.menu__btn>span,
.menu__btn>span::before,
.menu__btn>span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: skyblue;
transition-duration: .25s;
}
.menu__btn>span::before {
content: '';
top: -8px;
}
.menu__btn>span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: absolute;
top: 0px;
left: -100%;
width: 250px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: black;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
}
.menu__item {
display: block;
padding: 12px 50px;
color: white;
font-family: monospace;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: gray;
}
/* Fin Menu Burger */
/* Clock */
footer {
height: 60px;
font-size: 15px;
display: flex;
justify-content: space-around;
}
/* Fin Clock */
/* En-tête */
.logo {
width: 75px;
height: 75px;
}
.header {
display: flex;
align-items: center;
justify-content: center;
}
.title {
display: flex;
width: 700px;
justify-content: center;
text-decoration: underline;
text-underline-position: under;
text-decoration-color: skyblue;
}
@media all and (max-width: 950px) {
h1 {
font-size: 20px;
}
.logo {
width: 50px;
height: 50px;
}
}
@media all and (min-width: 1250px) {
.logo {
width: 125px;
height: 125px;
}
h1 {
font-size: 40px;
}
.menu__btn {
top: 53px;
}
}
/* Fin En-tête */
/* Contenu */
p {
padding: 10px;
font-size: 15px;
flex: 2;
}
@media all and (max-width: 950px) {
p {
font-size: 10px;
}
}
h2 {
display: flex;
justify-content: center;
}
/* Fin Contenu */
/* Bordures */
p,
img:not(.logo) {
border-width: 2px;
border-color: white;
border-style: solid;
border-radius: 6px;
}
/* Fin Bordures */
/* Alignement */
.content {
display: flex;
gap: 10px;
align-content: space-around;
flex-grow: 2;
align-items: center;
}
.content_ppmd {
display: flex;
flex-direction: column;
gap: 10px;
flex-grow: 2;
align-content: space-around;
align-items: center;
max-width: 800px;
}
@media all and (max-width: 950px) {
.content {
flex-wrap: wrap;
flex-direction: column;
}
#m2k_mq {
flex-direction: column-reverse;
}
.content_ppmd {
max-width: 800px;
}
}
/* Fin Alignement */
/* Images */
img {
max-height: 600px;
}
#m2k_profil,
#armada_fanart,
#armada_profil,
#hbox_logo,
#hbox_fanart {
max-height: 400px;
max-width: 400px;
}
#marth_falco {
max-height: 500px;
max-width: 800px;
}
/* Changement de dimension pour certains objets - Mode Mobile */
@media all and (max-width: 1250px) {
img {
max-height: 373px;
}
#m2k_profil,
#armada_fanart,
#armada_profil,
#hbox_logo,
#hbox_profil,
#hbox_fanart {
max-width: 300px;
max-height: 300px;
}
#marth_falco {
max-height: 250px;
max-width: 400px;
}
.content_ppmd {
max-width: 500px;
}
/* Alignement spécial pour PPMD */
#ppmd_special {
flex-direction: column;
}
/* Changement de dimension pour certains objets */
@media all and (max-width: 1400px) {
#hbox_profil {
max-height: 400px;
max-width: 400px;
}
.content_ppmd,
#marth_falco {
max-width: 600px;
}
}
/* Fin Images */
.butterfly {
height: 50px;
width: 50px;
}
}