/* --- 02. GLOBAL ELEMENTS --- */

/*
 * Le style des "grandes parties".
 * Cela permet de définir les différents éléments qui composeront la page totale
 *
 */

// A modifier pour customiser le style facilement :

$background-color: get-color("skyblue");
$sidebar-size:300px;
$max-size: 1600px;
$wrapper-padding: $baselinerem * 3;

// Mixins

@mixin container {
  max-width: $max-size;
  margin: auto;


  padding-left:$wrapper-padding/2;
  padding-right:$wrapper-padding/2;

  @include rwd(1300px) {
    padding-left:$wrapper-padding;
    padding-right:$wrapper-padding;
  }
}

@mixin row() {
  margin: auto;
}

@mixin row-grid() {
  @include row();

  @include xl {
    display: grid;
    grid-template-rows: auto;
    row-gap: $baselinerem;
    column-gap: $baselinerem * 2;
  }

}

/* 02.0 - Global page layout */

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

// the type of container we use for our theme system
.container-semifluid {
  @include container();
}


/* 02.1 - Wrapper et page totale */

#wrapper {
  flex: 1 0 auto;
  background: $background-color url('img/background.png') center bottom repeat-x;
}

#global-area {
  @include row-grid();
  &.index-layout {
    grid-template-columns: auto $sidebar-size;
    grid-template-areas: "main sidebar";
  }
}

/* 02.1 - Header */

#page-header {
  @include row();
}

header h1 {
    border-style:none !important;
    color:#FFF;
    font-weight:700;
    font-size:5.4rem;
    font-style:oblique;
    padding-bottom:0px;
    margin:auto;
    text-align:center;
    line-height: 7.5rem;
    margin-bottom: 1.5rem;
}

/* 02.2 - Main Area */

#page-main {
  max-width:100%;
}

/* 02.3 - Footer */

#page-footer {
  margin-top: $baselinerem;
  padding-bottom: $baselinerem;
  @include row();
}

/* social media */

ul.social {
    font-size:1.5em;
    padding:0;
    margin:auto;
    margin-bottom: $baselinerem;
    text-align:center;
  li {
    margin:0;
    list-style: none;
    display: inline;
    a {
      color:#FFFFFF;
      background-color:#000000;
      padding:0.3em;
      padding-left:0.36em;
      padding-right:0.36em;
      vertical-align:middle;
      border-radius:100%;
      &:hover {
        color:#000;
        background-color:#FFF
      }
    }
  }
}