@import url("common.css");

/* les variables */
:root{
/* couleur linear-gradient(141deg, rgba(255, 255, 255, .01) 17.3%, #F3F6FF 78.21%) */ 
--coul1:#209CDC;
--coul1_0:#45b5ec;
--coul2:#000000;
--coul2_0:#1d1a1a;
--coul3:#404041;
--coul3_0:#5d5c5e;
--coul4:#f1f1f2;
--coul4_0:#FFFFFF;

/* couleurs transparentes */
--tcoul1:rgba(32, 156, 220,.2);
--tcoul1_0:rgba(69, 181, 236,.2);
--tcoul2:rgba(0, 0, 0,.2);
--tcoul2_0:rgba(29, 26, 26,.2);
--tcoul3:rgba(64, 64, 65,.2);
--tcoul3_0:rgba(93, 92, 94,.2);
--tcoul4:rgba(241, 241, 242,.2);
--tcoul4_0:rgba(255, 255, 255,.2);

--bgcoul-sb-item:rgba(255,255,255,.2);
--bgcoul-sb-link:none;
--bgcoul-sb-link-hover:rgba(255,255,255,.2);
--bgcoul-container-caption:rgba(69, 181, 236,.2);

  /* les degrades */
  --linear-gradient-coul1:linear-gradient(130deg, var(--coul1) 17.3%, var(--coul1_0) 78.21%);
  --linear-gradient-coul1_0:linear-gradient(130deg, var(--coul1_0) 17.3%, var(--coul1) 78.21%);
  --linear-gradient-coul2:linear-gradient(130deg, var(--coul2) 17.3%, var(--coul2_0) 78.21%);
  --linear-gradient-coul2_0:linear-gradient(130deg, var(--coul2_0) 17.3%, var(--coul2) 78.21%);
  --linear-gradient-coul4:linear-gradient(130deg, var(--coul4) 17.3%, var(--coul4_0) 78.21%);
  --linear-gradient-coul4_0:linear-gradient(130deg, var(--coul4_0) 17.3%, var(--coul4) 78.21%);
  --mtblock-gradient:linear-gradient(180deg, rgba(107, 0, 0, 0.00) 35.56%, rgba(0, 0, 0, 0.5) 95.3%);
  --mtblock-hover-gradient:linear-gradient(180deg, rgba(0, 0, 0, 0.30) 35.56%, rgba(0, 0, 0, 0.5)  95.3%);
  
/* font */
/* --font1:'Roboto'; */
--font1:'Montserrat', sans-serif;
--font2:'Agdasima', sans-serif;

/* box-shadow */
--bs1: 0px 0px 2px rgba(0,0,0,.2);
--bs2:  0px 0px 5px rgba(0,0,0,.1);
}


body {
  width: 100% !important;
  font-family: var(--font1) !important;
  animation: smoothPulse 20s infinite ease-in-out;
}

@keyframes smoothPulse {
  0% {
      background: radial-gradient(circle at center, 
          #209CDC 10%, 
          #45b5ec 30%, 
          #209CDC 50%, 
          #45b5ec 70%, 
          #209CDC 90%);
      background-size: 100% 100%;
  }
  50% {
      background: radial-gradient(circle at center, 
          #209CDC 20%, 
          #45b5ec 40%, 
          #209CDC 60%, 
          #45b5ec 80%, 
          #209CDC 100%);
      background-size: 110% 110%;
  }
  100% {
      background: radial-gradient(circle at center, 
          #209CDC 10%, 
          #45b5ec 30%, 
          #209CDC 50%, 
          #45b5ec 70%, 
          #209CDC 90%);
      background-size: 100% 100%;
  }
}

/* guest-header */
/* .guest-header{
  width: 96% !important;
  height: 70px !important;
  margin: 0px 0px 0px auto !important;
} */

/* guestSideBar */
/* .guest-sidebar{
  width: 4%;
  height: 100vh !important;
  z-index: 500;
} */

/* .guest-sidebar-open{
  width: 15%;
  height: 100vh !important;
} */

/* guestMain */
/* .guest-main{
  width: 96% !important;
  height: calc(100vh - 70px) !important;
  margin: 0px 0px 0px auto !important;
} */