.story-form-container{z-index:10;width:100vw}.h1-story-form{margin:100px 0 20px;font-weight:700;font-size:55px;text-align:center}.story-form{display:flex;flex-direction:column;margin:0 auto 200px;border:1px solid var(--light-gray);border-radius:25px;background-color:var(--white);padding:30px;width:600px}.form-input-container{display:flex;flex-direction:column;margin-bottom:30px;font-size:17px;label{margin-bottom:10px}}.story-form-container input,.story-form-container textarea{transition:all .2s ease-out;border:1px solid var(--translucent-purple);border-radius:15px;background-color:var(--white-gray);padding:12px;&:focus{box-shadow:0 0 25px 2px rgba(188,97,254,.5)}&:focus-visible{outline:1px solid #9d14ff}}.btn-form{cursor:pointer;border-radius:35px;padding:20px 40px;width:100%;font-weight:700;font-size:17px}.form-btn-container{display:flex;flex-direction:row;justify-content:space-between;gap:20px}.btn-add-img{margin-bottom:30px}.btn-add-img,.btn-form-add-ambiance,.btn-form-add-effect{position:relative;border:1px solid var(--primary-text-color);color:var(--primary-text-color);&:hover{background-color:var(--primary-text-color);color:var(--white)}&.chosen{position:relative;transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,rgb(34,34,34),rgb(110,110,110) 51%,rgb(34,34,34));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}}.effect-preview{display:flex;flex-direction:row}.effect-preview:hover{background:linear-gradient(90deg,rgba(142,16,231,1),rgba(220,130,255,1) 51%,rgba(142,16,231,1));&:hover{background-position:100% 100%}}.effect-preview:hover .effect-preview-placeholder{display:block}.effect-preview-placeholder{display:none}.ambiance-icon{position:absolute;left:0;padding-left:20px}.story-form-hr{margin:30px 0;color:var(--light-gray)}.btn-form-continue{position:relative;transition:background-position .6s ease;background:linear-gradient(90deg,rgba(142,16,231,1),rgba(220,130,255,1) 51%,rgba(142,16,231,1));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}&:disabled{cursor:not-allowed;border:1px solid var(--light-gray);background:transparent;color:var(--light-gray)}}.btn-form-continue.greyed-out{position:relative;border:1px solid var(--light-gray);background-color:transparent;color:var(--light-gray)}.popup-container{position:absolute;top:0;left:0;z-index:10;backdrop-filter:blur(5px);background-color:rgba(0,0,0,.288);width:100vw;height:200vh}.storyform-popup.popup-banner{position:relative;z-index:11;margin:110px auto;border:1px solid var(--translucent-purple);border-radius:35;background-color:var(--white);padding:28px;width:800px;height:auto;h2{margin:20px 0 40px;font-weight:700;font-size:30px;text-align:center}}.storyform-popup.popup-ambiance,.storyform-popup.popup-effect{position:relative;z-index:11;margin:250px auto;border:1px solid var(--translucent-purple);border-radius:35;background-color:var(--white);padding:28px;width:800px;height:auto;h2{margin:20px 0 40px;font-weight:700;font-size:30px;text-align:center}}.storyform-popup-ambiance,.storyform-popup-effet{position:fixed;top:300px;left:50%;transform:translateX(-50%);z-index:11;border:1px solid var(--translucent-purple);border-radius:35;background-color:var(--white);padding:28px;width:800px;height:auto;h2{margin:20px 0 40px;font-weight:700;font-size:30px;text-align:center}}.banners-container-1{height:400px;overflow-y:scroll;overflow-x:hidden;padding-right:15px}.banners-container-2{overflow:visible;padding:5px}.banners-container::-webkit-scrollbar{width:12px}.banners-container::-webkit-scrollbar-track{margin-left:30px;border-radius:25px;background:#f1f1f1}.banners-container::-webkit-scrollbar-thumb{border:3px solid #f1f1f1;border-radius:6px;background-color:var(--light-purple)}.banners-container::-webkit-scrollbar-thumb:hover{background-color:var(--purple)}.btn-popup{transition:background-position .6s ease;cursor:pointer;border-radius:35px;background:linear-gradient(90deg,rgb(34,34,34),rgb(110,110,110) 51%,rgb(34,34,34));background-position:0 100%;background-size:200% 100%;padding:20px 40px;width:100%;color:var(--white);font-weight:700;font-size:17px;&:hover{background-position:100% 100%}}.popup-banner-hr{margin:50px 0;color:var(--light-gray)}.banner-grid{display:grid;grid-template-columns:repeat(3,1fr);border-radius:5px;width:100%;height:auto;gap:10px;.img-wrapper{border-radius:5px;overflow:hidden;&.active{outline:2px solid var(--primary-text-color);outline-offset:3px}}img{transition:all .3s;cursor:pointer;border-radius:5px;width:100%;height:170px;overflow:hidden;object-fit:cover;&:hover{transform:scale(1.1)}}}.popup-close-icon{position:absolute;top:0;right:0;padding:20px}.ambiance-list{display:flex;flex-direction:column}.ambiance-button{display:flex;justify-content:space-between;align-items:center;transition:all .3s;cursor:pointer;margin:5px;border:1px solid var(--translucent-purple);border-radius:25px;padding:30px;width:100%;height:40px;font-weight:500}.ambiance-horreur:hover{transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(77,0,0,.75) 51%,rgba(0,0,0,.75));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.ambiance-horreur.active-1{transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,rgba(0,0,0,1),rgba(77,0,0,1) 51%,rgba(0,0,0,1));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.ambiance-magique:hover{transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,rgba(124,0,173,.75),rgba(210,152,233,75.329) 51%,rgba(124,0,173,.75));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.ambiance-magique.active-2{transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,#7c00adff,#d298e9ff 51%,#7c00adff);background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.ambiance-medieval:hover{transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,rgba(133,133,133,.6),rgba(255,202,178,.6) 51%,rgba(133,133,133,.6));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.ambiance-medieval.active-3{transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,#858585ff,#ffcab2ff 51%,#858585ff);background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.effect-preview:hover{transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,rgba(124,0,173,.75),rgba(210,152,233,.75) 51%,rgba(124,0,173,.75));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.effect-preview.active{transition:background-position .6s ease;border:1px solid var(--white);background:linear-gradient(90deg,rgba(124,0,173,1),rgba(210,152,233,1) 51%,rgba(124,0,173,1));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.user-images-label{margin-bottom:10px;font-weight:700}.upload-error{color:#d22}