@charset "UTF-8";

/* © Maxence GUILLAUME — Guillom.com */

/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400;1,500&display=swap');

html {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
  scroll-behavior: smooth;
  /* background: url(../img/shapes.png) repeat fixed; */
}

*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  /* font-family: "Inter", sans-serif; */
  /* font-family: "Raleway", sans-serif; */
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  /* overflow-y: auto; */
  color: black;
  /* font-weight: 100; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* progress bar overlay */
  /* overflow: hidden; */

  noscript p {
    position: relative;
    top: -50px;
    color: red;
    background-color: yellow;
    padding: 10px 20px;
    font-size: 16px;
  }

  .bold {
    /* font-family: "Inter", sans-serif; */
    /* font-family: "Poppins", sans-serif; */
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    /* font-weight: 400; */
    /* font-weight: 500; */
    font-weight: 600;
  }

  #container {
    display: flex;
    align-items: flex-start;
    padding-bottom: 50px;

    .picto {
      position: relative;
      bottom: 3px;
      font-size: 16px;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    @media (max-width: 768px) {
      flex-direction: column;
      padding-bottom: 100px;
    }

    section#left {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      margin-top: 50px;
      margin-left: 50px;
      white-space: nowrap;

      hr:before {
        content: "";
        display: block;
        position: relative;
        height: 1px;
        background-color: #666666;
        max-width: 70%;
        margin: 30px 0 6px;
        /* left: 0; */
        /* opacity: 0.5; */
        text-align: center;
      }

      @media (min-width: 769px) {
        position: fixed;
      }

      @media (max-width: 768px) {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 40px;
        margin-left: 0;
        white-space: nowrap;
        text-align: center;
        width: 100%;
      }

      #logo {
        width: 50px;
        height: auto;
        transition: all ease .3s;

        &:hover {
          transform: scale(0.92);
        }
      }

      ul {
        margin-top: 40px;

        a {
          text-decoration: none;
          display: inline-block;
          color: black;
          transition: all ease 0.1s;

          &:hover {
            background-color: yellow;
            color: red !important;
            /* font-style: italic; */
            /* margin-left: 2px; */
          }
        }

        li {
          list-style-type: none;
          text-transform: capitalize;

          &.theme {
            font-style: italic;

            a {
              transition: all ease 0.1s;
            }

            a:hover {
              font-style: normal;
              /* margin-left: 2px; */
            }
          }

          &.title {
            margin-top: 25px;
          }

          &.arrow {
            /* 
            &::before {
              content: "»";
              content: "—";
              display: inline-block;
              padding-right: 5px;
              font-size: 10px;
              height: 0;
              line-height: 0;
              color: rgb(125 125 125);
              top: -1px;
              position: relative;
            } */

            &.bold a {
              color: black;
            }
          }
        }

        #copy {
          /* margin-top: 50px; */
          text-transform: none;

          &:before {
            content: "";
            display: block;
            /* position: relative; */
            width: 80%;
            height: 1px;
            /* color: blue; */
            background-color: #a8a8a8;
            margin-top: 20px;
            margin-bottom: 5px;
          }

          a {
            /* font-style: italic;
            color: #525252; */
            font-size: 13px;
          }
        }
      }
    }

    #shuffle {
      width: 1024px;
      height: 683px;
      margin-top: 150px;
      margin-left: 300px;
      /* border: 1px solid grey; */
      outline: 1px solid rgb(157 157 157);
      background-size: auto;
      background-repeat: no-repeat;
      /* background-attach  ment: fixed; */
      /* background-position: center; */
      box-shadow: 15px 15px 20px 0 #a8a5a5;
      /* position: relative;

      p {
        position: absolute;
        bottom: -50px;
        font-style: italic;
      } */

      @media (max-width: 768px) {
        width: 100%;
        height: 287px;
        margin-top: 20px;
        margin-left: 0;
        /* border: 1px solid grey; */
        outline: none;
        background-size: 100% 100%;
        /* background-repeat: no-repeat; */
        /* background-attachment: fixed; */
        /* background-position: center; */
        /* box-shadow: 15px 15px 20px 0 #a8a5a5; */
      }
    }

    #template {
      width: 1024px;
      min-height: 683px;
      margin-top: 140px;
      margin-left: 300px;
      /* padding-bottom: 50px; */
      /* border: 1px solid grey; */
      /* outline: 1px solid grey;
      background-size: auto;
      background-repeat: no-repeat; */
      /* background-attachment: fixed; */
      /* background-position: center; */
      /* box-shadow: 15px 15px 20px 0 #a8a5a5; */

      a {
        color: blue;

        &:hover {
          color: red;
          background-color: yellow;
          /* font-style: italic; */

        }
      }

      .site {
        font-style: italic;

        &:before {
          content: "";
          display: inline-block;
          /* position: relative; */
          width: 20px;
          height: 1px;
          background: #666666;
          vertical-align: middle;
          margin: 0 10px;
        }
      }

      img {
        outline: 1px solid rgb(130 130 130);
        /* box-shadow: 15px 15px 20px 0 #a8a5a5; */
      }

      hr:before {
        content: "";
        display: block;
        position: relative;
        height: 1px;
        background-color: #666666;
        max-width: 250px;
        margin: 25px 0;
        /* left: 0; */
        /* opacity: 0.6; */
      }

      h1 {
        /* line-height: 1; */
        margin-bottom: 30px;
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
      }

      #logoFooter {
        display: flex;
        flex-direction: row;
        align-items: center;
        line-height: 0;

        a {
          margin-left: auto;
          max-width: 35px;
          vertical-align: middle;
          transition: all ease .3s;

          &:hover {
            transform: scale(1.15)
          }

          img {
            outline: none;
          }
        }
      }

      @media (max-width: 768px) {
        max-width: 100%;
        min-height: 287px;
        margin: 50px auto 0;
        /* width: 100%; */
        /* overflow: hidden; */
        padding: 15px;
      }
    }
  }

  #gototop {
    position: fixed;
    /* bottom: -60px; */
    opacity: 0;
    /* bottom: 9%; */
    /* right: 20vw; */
    /* transform: translateX(50%); */
    right: calc(50% - 450px);
    /* z-index: 99; */
    outline: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50px;
    text-decoration: none;
    transition: all ease .3s;
  }

  #gototop>svg {
    /* fill: #373737; */
    vertical-align: middle;
    /* background: blue; */
  }

  #gototop:hover {
    /* bottom: 8.6% !important; */
    /* filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, .4)); */
    transform: scale(1.1);
  }

  @media (max-width: 768px) {

    #gototop {
      bottom: 20px;
      /* right: 50%; */
      filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, .1));
      /* margin: auto; */
      /* width: auto; */
      /* left: 50%; */
      right: 0;
      left: 50%;
      transform: translate(-50%, 50%);
    }

    #gototop:hover {
      transform: translate(-50%, 50%);
    }

  }
}

/* fin body */