@font-face{
  font-family: 'Ambiant';
  font-style: normal;
  src: url('../fonts/AmbiantVariableGX.ttf') format("truetype-variations");
  font-variation-settings: "srif" 1 100;
  }

    :root {
        /*COLORS*/
        --color-1:  #B29286; /*DARK*/
        --color-2: #99ccff; /*LIGHT GREY*/
        --color-3: #ccff33 ; /*LIGHT BLUE*/
        --color-4: #333333; /*GREEN*/
      
    
   
        --main-padding:20px;
        --main-font-weight: 400;
        --h1:4vw;
        --h2:2.5vw;
        --h3:18px;
        --h4:22px;
        --text:16px;
        --line-height-title:1;
        --line-height-text:1;
        --mainFont: 'Ambiant'
      }
  
  
  *, *::before, *::after {
    box-sizing: border-box;
    outline: none;
  }
  
  h1, h2, h3, h4, h5, h6, p {
    margin: 0px 0;
    font-weight: var(--main-font-weight);
    font-family: var(--mainFont);
   
    
  }

  h1 {
      font-size: var(--h1);
      text-align: center;
  }



  @keyframes ambiant {
    0% {
      font-variation-settings: "srif" 0;
      font-size: 2.5vw;
      line-height: 1;
      width:100vw;
      padding: 10px 7.05vw 0 7.05vw;
    }
    60% {
      font-variation-settings: "srif" 200;
    letter-spacing: 0.1;
      font-size: 2.5vw;
      line-height: 1;
      width:100vw;
      padding: 10px 2.4vw 0 2.4vw;

    }
    
    100% {
      font-variation-settings: "srif" 0;
      font-size: 2.5vw;
      line-height: 1;
     
      width:100vw;
      padding: 10px 7.05vw 0 7.05vw;
    }

  }
  
  @keyframes ambiantIn {
    0% {
      font-variation-settings: "srif" 0;
      font-size: 2.5vw;
      line-height: 1;
      width:100vw;
      padding: 10px 7.05vw 0 7.05vw;
    }
    50% {
      font-variation-settings: "srif" 200;
    letter-spacing: 0.1;
      font-size: 2.5vw;
      line-height: 1;
      width:100vw;
      padding: 10px 2.4vw 0 2.4vw;

    }

    100% {
      font-variation-settings: "srif" 0;
      font-size: 2.5vw;
      line-height: 1;
      width:100vw;
      padding: 10px 7.05vw 0 7.05vw;
    }
    
  
  }
  
 
  @keyframes ambiantOut {
    0% {
      font-variation-settings: "srif" 0;
      font-size: 2.5vw;
      line-height: 1;
      width:100vw;
      padding: 10px 7.05vw 0 7.05vw;
    }
    50% {
      font-variation-settings: "srif" 200;
    letter-spacing: 0.1;
      font-size: 2.5vw;
      line-height: 1;
      width:100vw;
      padding: 10px 2.4vw 0 2.4vw;

    }

    100% {
      font-variation-settings: "srif" 0;
      font-size: 2.5vw;
      line-height: 1;
      width:100vw;
      padding: 10px 7.05vw 0 7.05vw;
    }
    
  
  }

  .animationIn{
    animation-name: ambiantIn ;
    animation-duration: 10s;
  
    -webkit-animation: ambiantIn 10.0s forwards;
    animation: ambiantIn 10.0s forwards;
    animation-iteration-count: 2;
  
   
}
  
.animationOut {
  animation-name: ambiantOut ;
    animation-duration: 10s;
   
    -webkit-animation: ambiantOut 10.0s forwards; 
    animation: ambiantOut 10.0s forwards;
    animation-iteration-count: 2;
}


  .variableText {
  
    font-variation-settings: "srif" 0;
    animation: ambiant 10000ms infinite forwards;
    /* animation-iteration-count: 2; */
  }
  
  body {
    margin: 0;
    padding: 0;
    background-color: var(--color-2);
    color: var(--color-1);
    font-family: var(--mainFont);
    font-weight: var(--main-font-weight);
    /* background:url("../img/drawing-bg-10.gif"); */
    width:12000px;
    height:12000px;
    background-size: 12000px 12000px;
    background-repeat: no-repeat;
    top:0;
    left:0;
    background-position: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
   
  }


  body::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  
  .wrapper {
      
      display: flex;
      justify-content: center;
     
      align-items: center;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
       user-select: none; /* Non-prefixed version, currently
      supported by Chrome, Edge, Opera and Firefox */
  }

  input:active, input, #msg-input, #msg-input:active {
    outline: none;
    border: none;
   
    border-radius: 60px;
    font-weight: var(--main-font-weight);
    font-family: var(--mainFont);
  
    }


button {
  font-weight: var(--main-font-weight);
  font-family: var(--mainFont);
    border:none;
    border-radius: 0;

    color:var(--color-1);

    font-size: var(--h2);
    cursor: pointer;
  
    border-radius: 108px;
    background-color: var(--color-3);
    width:108px;
    height:108px;
}

input {
  font-weight: var(--main-font-weight);
  font-family: var(--mainFont);
    color: var(--color-1);
    font-size: var(--h2);
  
   height:108px;
    color: var(--color-4);
    text-align:center;
  }
  
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--color-4);

    font-size: var(--h2);
   
    text-align:center;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: var(--color-4);
 

    font-size: var(--h2);
    text-align:center;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: var(--color-4);
    font-size: var(--h2);
    padding-bottom: 20px;
  
  }
  :-moz-placeholder { /* Firefox 18- */
    color: var(--color-4);
  
    font-size: var(--h2);
  
  
  }


  img {
    background: #F1F1FA;
    width: 3000px;
    height: 3000px;
    display: block;
   float: left;
    border: 0;

  }

  .img-wrapper {
width: 12000px;
height: 12000px;
position: absolute;
top:0;
left:0;
z-index: -10;

  }

  .audioPlayer {
    position:fixed;
    top:0;
    left:0;
  }
    
    audio {display:none;}