:root{font-size:1rem}body{height:100vh;width:100vw;margin:0}@property --direc{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.bg{height:100vh;width:100vw;background-image:conic-gradient(from var(--direc),#ff9aa2,#ffb7b2,#ffdac1,#e2f0cb,#a2e4ff,#c9afff,#ffb7b2,#ff9aa2);animation:rotate 10s linear infinite;z-index:-1}.container{height:100vh;width:100vw;backdrop-filter:blur(100px);-webkit-backdrop-filter:blur(100px);overflow:hidden;display:flex}@keyframes rotate{to{--direc: 360deg}}.flex-center{display:flex;align-items:center;justify-content:center}.col-center{display:flex;flex-direction:column;align-items:center;justify-content:center}.footer{position:absolute;bottom:0;font-size:.8rem;color:#fff;Mix-blend-mode:difference;display:flex;align-items:center;justify-content:center;width:100vw}.footer a{margin-left:1rem;color:#fff;Mix-blend-mode:difference}.left-view{height:100%;width:72%}.company-name{color:#fff;font-size:3rem;font-weight:600;letter-spacing:.5rem;Mix-blend-mode:difference}.company-title{color:#fff;font-size:2rem;font-weight:600;letter-spacing:.5rem;Mix-blend-mode:difference}.right-view{height:100%;width:28%;background-color:#0003;display:flex;flex-direction:column}.right-view .video-view{height:40%}.right-view .video-view video{border-radius:10px}.right-view .option-view{height:60%}.cards{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px;width:250px}.cards .red{background-color:#f43f5e}.cards .blue{background-color:#3b82f6}.cards .green{background-color:#22c55e}.cards .card{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;width:250px;border-radius:10px;color:#fff;background-color:#fff3;cursor:pointer;transition:.4s}.cards .card p.tip{font-size:1em;font-weight:700}.cards .card p.second-text{font-size:.7em}.cards .card:hover{transform:scale(1.1)}.cards:hover>.card:not(:hover){filter:blur(10px);transform:scale(.9)}