@property --gstart{syntax:"<percentage>";inherits:false;initial-value:72%}@property --gend{syntax:"<percentage>";inherits:false;initial-value:88%}@property --gangle{syntax:"<angle>";inherits:false;initial-value:130deg}section.wrapper-session{box-sizing:border-box;background:linear-gradient(var(--gangle), var(--base) var(--gstart), var(--lighter) 100%);flex-wrap:wrap;justify-content:center;align-items:center;width:100%;display:flex}section.wrapper-session.red{--base:#e74c3c;--lighter:#f1948a}section.wrapper-session.blue{--base:#3498db;--lighter:#85c1e9}section.wrapper-session.green{--base:#2ecc71;--lighter:#82e0aa}section.wrapper-session.yellow{--base:#f1c40f;--lighter:#f9e79f}section.wrapper-session.orange{--base:#e67e22;--lighter:#eb4e10}section.wrapper-session.purple{--base:#9b59b6;--lighter:#c39bd3}section.wrapper-session.pink{--base:#e91e63;--lighter:#f48fb1}section.wrapper-session.teal{--base:#1abc9c;--lighter:#76d7c4}section.wrapper-session.cyan{--base:#00bcd4;--lighter:#80deea}section.wrapper-session.grey{--base:#95a5a6;--lighter:#d5dbdb}section.wrapper-session.animated{animation:3s ease-in-out infinite alternate gradientShift}@keyframes gradientShift{0%{--gstart:80%;--gend:88%;--gangle:140deg}to{--gstart:50%;--gend:58%;--gangle:170deg}}