@import"https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Fredericka+the+Great&family=Henny+Penny&display=swap";*{margin:0;padding:0;list-style:none}body{overflow:hidden}figure{width:100%;height:100vh;position:relative}figure .cameraBtns{position:absolute;max-width:100vw;justify-content:space-between;top:7vh;right:10vw;display:flex;z-index:5;gap:60px}figure .cameraBtns li{font:italic 20px/1 Architects Daughter;color:#222;cursor:pointer;transition:.5s}figure .cameraBtns li.on{transform:scale(1.3);color:#000}figure .txt article{position:absolute;right:10vw;top:30vh;opacity:1;transition:.5s}figure .txt article h2{font: italic 9vw/1 Henny Penny;color:#444}figure .txt article h2.on span{opacity:1;transform:scale(1)}figure .txt article h2 span{display:inline-block;opacity:0;transform:scale(3);transition-duration:.5s;transition-timing-function:cubic-bezier(.48,-.69,.53,1.59)}figure .txt article:nth-of-type(1){right:10vw;top:30vh}figure .txt article:nth-of-type(2){right:10vw;top:30vh}figure .txt article:nth-of-type(3){left:10vw;bottom:15vh}figure .txt article:nth-of-type(4){left:10vw;bottom:15vh}figure .txt article:nth-of-type(5){left:10vw;bottom:15vh}figure .txt article:nth-of-type(6){right:5vw;top:30vh}figure .colorPicker{position:absolute;bottom:10vh;right:10vw;z-index:2;display:flex;gap:20px;align-items:center}figure .colorPicker li{width:50px;height:50px;border-radius:50%;border:2px solid #444;cursor:pointer;transition:.5s;position:relative}figure .colorPicker li:hover{transform:scale(1.2);border-color:#000}figure .colorPicker li.on{transform:scale(1.3);border-color:#000;border-width:3px}figure .colorPicker #colorPicker{width:50px;height:50px;border-radius:50%;border:2px solid #333;cursor:pointer;overflow:hidden;transition:.5s;opacity:.9}figure .colorPicker #colorPicker::-webkit-color-swatch-wrapper{padding:0}figure .colorPicker #colorPicker::-webkit-color-swatch{border:none;border-radius:50%}figure .colorPicker #colorPicker::-moz-color-swatch{border:none;border-radius:50%}figure .colorPicker #colorPicker:hover{transform:scale(1.2);border-color:#000;opacity:1}@media screen and (max-width:1399px){figure .cameraBtns{right:5vw;gap:unset}figure .cameraBtns li{font-size:18px}figure .colorPicker{right:5vw}figure .colorPicker li,figure .colorPicker #colorPicker{width:45px;height:45px}}@media screen and (max-width:899px){figure .cameraBtns{top:11vh;left:5vw}figure .cameraBtns li{font-size:16px}figure .colorPicker{bottom:5vh;right:50%;transform:translate(50%);gap:12px}figure .colorPicker li,figure .colorPicker #colorPicker{width:40px;height:40px}}@media screen and (max-width:599px){figure .colorPicker{bottom:3vh;gap:10px}figure .colorPicker li,figure .colorPicker #colorPicker{width:35px;height:35px}}