@font-face {
  font-family: "Zalando";
  src: url(webfonts/Zalando.woff2);
}

@font-face {
  font-family: "Laica";
  src: url(webfonts/ABCLaicaEdu-Regular.woff2);
}


/*Customisation */
body {
    background-color: black;
    font-family:"Zalando";
    font-weight: 400;
    color: rgb(255, 255, 255);
}

a, 
a:visited {
    color: rgb(0, 208, 255);
    text-decoration: none;
}

/* TYPOGRAPHY */
 h1, 
 h2, 
 h3, 
 h4, 
 h5, 
 h6 {
    font-family: "Zalando";
    text-transform: uppercase;
    color: white;
 }

 h1 {
    font-size: clamp(1.5rem, -4.7rem + 20.8vw, 3rem);
 }

/* STRUCTURE */
.site-header {
    background-color: black;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid white;
    /* inverser menu et logo */
    /* flex-direction: row-reverse; */
}

.home .site-header {
    border-bottom: 0;
}

.site-main {
    background-color: black;
    padding:0;
}

.site-footer {
    background-color: black;
    color: white;
    padding: 1rem;
    font-size: 0.6rem;
    
}

/* HEADER */
.site-description {
    display: none;
}

p.site-title {
    font-size: 2rem;
    margin: 0;
}

.site-title a {
    font-family: "Zalando";
    color: white;
    /* text-transform: uppercase; */
    position: relative;
    display: inline-block;
}

/* Logo */
.site-title a {
    display: block;
    width: 70px;
    height: 70px;
    background: url(images/logo-aariciaogay.svg) no-repeat center center;
    background-size: contain;
    text-indent: -5000px;
    font-size: 1rem;



}

/* NAVIGATION */
.main-navigation {
    width: auto;
}

.main-navigation li {
    margin-left: 1em;
}


.main-navigation li a {
    color: white;
    display: inline-block;
    padding: 1em;
    transition: all 0.3s ease-in-out;
    font-family: "Zalando";
    text-transform: uppercase;

}

.main-navigation li a:hover {
    /* background-color: tomato; */
    color: black;
    background-color: white;
    border-radius: 45%;
}

/* MENU BURGER */
.menu-toggle {
    background: url(images/icone-burger-off.svg) no-repeat center center transparent;
    background-size: contain;
    width: 50px;
    height: 50px;
    text-indent: -5000px;
    border: 0;
    position: absolute;
    top: 25px;
    right: 20px;
    /* positionnement de la croix au premier plan */
    z-index: 1000; 
}

.toggled .menu-toggle {
    background-image: url(images/icone-burger-on.svg);
    position: fixed;
}

.main-navigation.toggled ul {
    background-color: chartreuse;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.main-navigation.toggled ul li{
    margin: 0rem 0;
    padding: 0;
}

.main-navigation.toggled ul li a {
    font-size: 1.3rem;
}

/* HOMEPAGE */
.home .entry-header {
    display: none;
}


/*ARCHIVES*/
.works-grid {
    background-color: black;
    border-top: 1px solid white;
    border-left: 1px solid white;
}


.work-sizer,
.work-item {
  width: calc(33.333% - 1px);
  box-sizing: border-box;
  float: left;
}

.work-item {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}


.works-grid article {
    background-color: black;
    margin-bottom: 0rem;
    position: relative;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

.works-grid article h4 {
    position: absolute;
    left: 50%;
    top : 50%;
    text-align: center;
    transform: translate(-50%, 50%);
    margin: 0;
    opacity: 0;
    transition : all 0.3s ease-in-out;
}

.works-grid article img {
    transition : all 0.3s ease-in-out;
    width: 100%;
    display: block;
}

.works-grid article a:hover h4 {
    opacity: 10;
    /* transform: scale(1.1) translate(-50%, 50%); */
}

.works-grid article a:hover img {
    opacity: 0.5;
}

/* logo travaux */
.archive .page-header {
    display: none;
}


/* FORMULAIRE */
input {
    max-width: 100%;
}


/* RESPONSIVE */

@media (max-width: 990px) { /* tablette */

    body {
        background-color: yellow;
    }
    .works-grid article {
    width: 50%;
    }
}

@media (max-width: 600px) { /* mobile */

    body {
        background-color: violet;
    }
    .works-grid article {
    width: 100%;
    }
}