/*
Theme Name: Yann Cielat Photographie
Author: Orianne Cielat
Description: A theme for photographers
Tested up to: 6.4.2
Requires PHP: 8.1
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ycphotographie
*/

/* FONTS */
@font-face {
    font-family: "Imbue";
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/Imbue_72pt-Thin.woff2') format('woff2');
}
@font-face {
    font-family: "Josefin Sans";
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/JosefinSans-Light.woff2') format('woff2');
}
@font-face {
    font-family: "Playfair Display";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/PlayfairDisplay-Medium.woff2') format('woff2');
}
@font-face {
    font-family: "Raleway";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/Raleway-Regular.woff2') format('woff2');
}
@font-face {
    font-family: "Raleway";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/Raleway-Medium.woff2') format('woff2');
}

:root {
    /* COLORS */
    --main-grey: #E7E7E7;
    /* FONTS */
    --title-font: 500 15px/1.4 'Imbue', serif; /* Titles fonts */
    --body-font: 500 18px/1.4 'Raleway', sans-serif; /* Expositions fonts */
    --photo-font: 500 15px/1.4 'Josefin Sans', sans-serif; /* Font on photos */
    --contact-font: 500 15px/1.4 'Playfair Display', serif; /* Font on photos */
}
/* RESET */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
ul, ol {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
    display: block;
    text-align: center;
}
img {
    width: 100%;
    vertical-align: bottom;
}
html { 
    font-size:100%;
}
body { 
    font: var(--body-font);
    color:#3b3b3b;
    background-color: #fff;
    overflow-x: hidden;
}
main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
section {
    /* Important for anchor position */
/*     padding-top: 35px !important; */
    max-width: 980px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
h1 {
    padding: 0 0 1.5rem;
    /* Important for anchor position */
    padding-top: 0;
    text-align: center;
    font-family: 'Imbue', serif;
    font-weight: 100;
    font-size: 3rem;
    letter-spacing: 3px;
}
h2 {
    font-weight: 600;
    font-size: 1.7rem;
}
.site_max_width {
    max-width: 1600px;
    width: 100%;
}
.contact_form_max_width {
    max-width: 845px;
    width: 100%;
}
/* Avoids "--internal-autofill-selected" style to be applied */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-transition: background-color 0s 600000s, color 0s 600000s !important;
    transition: background-color 0s 600000s, color 0s 600000s !important;
}
/* RESPONSIVE */
@media screen and (max-width: 1800px) {
    h1 {
        font-size: 3rem;
    }
}
@media screen and (max-width: 900px) {
    main {
        margin-top: 0;
    }
    h2 {
        font-weight: 600;
        font-size: 1.5rem;
    }
    section {
        padding: 0 .5rem;
/*         padding-top: 30px !important; */
    }
}
@media screen and (max-width: 480px) {
    h1 {
        font-size: 2.8rem;
    }
}