/* CSS ABCDécoration */

/* ------------------------------- */
/* 1. Variables                    */
/* ------------------------------- */

:root
{
--color-primary: teal;
}


/* ------------------------------- */
/* 2. Imports                      */
/* ------------------------------- */

@font-face
{
font-family: 'Source Sans';
font-style: normal;
font-weight: 400;
src: url('../themes/abcdecoration/assets/fonts/SourceSans3-Regular.woff2') format('woff2');
}

@font-face
{
font-family: 'Source Sans';
font-style: normal;
font-weight: 700;
src: url('../themes/abcdecoration/assets/fonts/SourceSans3-Bold.woff2') format('woff2');
}

@font-face
{
font-family: 'Icons';
font-style: normal;
src: url('../themes/abcdecoration/assets/fonts/Icons.woff2') format('woff2');
}


/* ------------------------------- */
/* 3. Règles responsive            */
/* ------------------------------- */

@media (min-width: 1280px)
{
    html
    {
    font-size: 20px;
    }

    div.nav-inner, div.classic-inner, div.footer-inner
    {
    width: 1280px;
    margin: 0px auto;
    }

    section.banner
    {
    min-height: 700px;
    }

    section.smallbanner
    {
    height: 300px;
    }
}

@media (max-width: 1279px)
{
    html
    {
    font-size: 30px;
    }

    div.nav-inner, div.classic-inner, div.footer-inner
    {
    width: 100%;
    margin: 0px;
    }

    div.classic-inner
    {
    padding-inline: 1em;
    }

    section.banner
    {
    min-height: 35vh;
    }

    section.smallbanner
    {
    height: 300px;
    }
}


/* ------------------------------- */
/* 4. Structure                    */
/* ------------------------------- */

*
{
box-sizing: border-box;
}

html, body
{
min-height: 100%;
margin: 0;
padding: 0;
font-family: "Source Sans", "Arial";
color: #101010;
}

body
{
display: flex;
flex-direction: column;
}

nav
{
height: 80px;
padding: 16px;
background-color: #1c1c1c;
color: white;
}

nav .name
{
font-size: 30px;
color: var(--color-primary);
}

nav img
{
height: 40px;
vertical-align: -8px;
margin-right: 8px;
}

nav a
{
text-decoration: none;
}

footer
{
height: 80px;
padding: 32px;
font-size: 20px;
background-color: #1c1c1c;
color: white;
}


/* ------------------------------- */
/* 5. Sections                     */
/* ------------------------------- */

section.banner, section.smallbanner
{
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("../themes/abcdecoration/assets/images/banner25.jpg");
background-size: cover;
}

div.classic-inner
{
padding-block: 2em;
}

section.classic2
{
background-color: #f2f2f2;
}


/* ------------------------------- */
/* 6. Inside sections              */
/* ------------------------------- */

h1
{
margin: 0;
font-size: 2.5rem;
text-align: center;
color: white;
text-shadow: 0px 0px 6px black;
}

h2
{
margin-bottom: 1.5em;
text-align: center;
}

/* Normalize the spacing at beginning of boxes */
div.classic-inner > h2:first-child,
div.classic-inner > p:first-child
{
margin-top: 0;
}

strong
{
color: var(--color-primary);
}

a, a:visited
{
color: var(--color-primary);
}

i
{
font-family: Icons;
font-style: normal;
}

p
{
line-height: 1.5;
letter-spacing: 0.02em;
}

img
{
max-width: 100%;
}

button
{
border: 2px solid var(--color-primary);
background-color: white;
padding: 0.5em;
font-weight: 700;
color: var(--color-primary);
cursor: pointer;
}

.centerbox
{
text-align: center;
}

.centerboxicon
{
font-size: 3rem;
color: var(--color-primary);
}


/* ------------------------------- */
/* 7. Carrousel                    */
/* ------------------------------- */

div.carrousel
{
display: flex;
flex-direction: row;
}

div.carrousel-left, div.carrousel-right
{
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 3em;
font-size: 40px;
cursor: pointer;
user-select: none;
}

div.carrousel-content
{
flex: 1 1;
}

div.carrousel-item
{
text-align: center;
padding: 0.5em;
}

div.carrousel-item img
{
max-width: 100%;
max-height: 80%;
}