diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 87fd90a..a0e9358 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -14,6 +14,7 @@ function useQuery() {
 export default function Header({ mode }) {
   const [selectedCategory, setSelectedCategory] = useState("소설");
   const [onLogin, setOnLogin] = useState();
+  const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추가
   const query = useQuery();
   const navigate = useNavigate();
 
@@ -44,20 +45,24 @@ export default function Header({ mode }) {
       setOnLogin(false);
       navigate("/", { replace: true });
       return;
+    } else {
+      setOnLogin(true);
     }
+
+    setIsLoading(false); // 로딩 상태 완료
   }, []);
 
   function toCreate() {
     navigate("/create");
   }
 
-  function toList() {
-    navigate("/list");
+  if (isLoading) {
+    return <div></div>; // 로딩 중일 때 표시할 내용
   }
 
   return (
     <div id="header">
-      <div className="headerContainer">
+      <div className="header-headerContainer">
         <div>
           <img src={LogoImg} alt="logo" />
         </div>
@@ -65,13 +70,13 @@ export default function Header({ mode }) {
         {mode === 2 ? (
           <></>
         ) : (
-          <div className="searchContainer">
-            <input className="searchBox" placeholder="책 제목, 작가명" />
+          <div className="header-searchContainer">
+            <input className="header-searchBox" placeholder="책 제목, 작가명" />
             <img src={SearchImg} alt="search" />
           </div>
         )}
 
-        <div className="headerRight">
+        <div className="header-headerRight">
           {onLogin ? (
             <>
               <button
@@ -83,7 +88,11 @@ export default function Header({ mode }) {
                 책 발간하기
               </button>
               <div>
-                <img className="profile" src={ProfileImg} alt="profile" />
+                <img
+                  className="header-profile"
+                  src={ProfileImg}
+                  alt="profile"
+                />
               </div>
             </>
           ) : (
@@ -98,8 +107,8 @@ export default function Header({ mode }) {
           )}
         </div>
       </div>
-      <div className="categoryContainer">
-        <div className="category" id="upper-category">
+      <div className="header-categoryContainer">
+        <div className="header-category" id="upper-category">
           {Object.keys(categories).map((category) => (
             <button
               key={category}
@@ -111,7 +120,7 @@ export default function Header({ mode }) {
         </div>
         {/* 프로젝트 전체 페이지일 경우 보여줌 */}
         {mode === 1 ? (
-          <div className="category">
+          <div className="header-category">
             {categories[selectedCategory].map((option, index) => (
               <button key={index}>{option}</button>
             ))}
diff --git a/src/components/Write.jsx b/src/components/Write.jsx
index f4ef548..023bacd 100644
--- a/src/components/Write.jsx
+++ b/src/components/Write.jsx
@@ -302,7 +302,7 @@ export default function Write() {
 
   return (
     <div>
-      <div className="main-container">
+      <div className="main-write-container">
         <div
           className="editor-container editor-container_document-editor editor-container_include-style"
           ref={editorContainerRef}
diff --git a/src/pages/Create.jsx b/src/pages/Create.jsx
index 8e2f7eb..6af8bbb 100644
--- a/src/pages/Create.jsx
+++ b/src/pages/Create.jsx
@@ -1,4 +1,3 @@
-// 프로젝트 생성 페이지
 import { useState, useEffect } from "react";
 import "../styles/create.css";
 import ImgUpLoad from "../components/ImgUpLoad";
@@ -14,6 +13,7 @@ const categories = {
   드라마: ["가족", "모험", "사회", "정치"],
   기타: ["기타"],
 };
+
 export default function Create() {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
@@ -24,26 +24,23 @@ export default function Create() {
 
   const navigate = useNavigate();
 
-  // 카테고리
   const handleCategoryChange = (category, item) => {
     setSelectedCategories((prevSelectedCategories) => {
       const updatedCategories = {
         ...prevSelectedCategories,
-        [category]: item, // 각 카테고리에 대해 선택된 항목만 저장
+        [category]: item,
       };
       console.log(updatedCategories);
       return updatedCategories;
     });
   };
 
-  // 공개 여부
   const handleVisibilityChange = (event) => {
     const newVisibility = event.target.value;
     setVisibility(newVisibility);
     console.log(newVisibility);
   };
 
-  // 인원 수
   const handlePeople = (upDown) => {
     if (upDown === 1) {
       setPeople(people + 1);
@@ -58,71 +55,6 @@ export default function Create() {
     setImage(file);
   };
 
-  // form data
-  // useEffect(() => {
-  // const storedToken = localStorage.getItem("token");
-
-  // if (storedToken == null) {
-  //   // setOnLogin(false);
-  //   navigate("/", { replace: true });
-  //   return;
-  // }
-
-  // const handleSubmit = async (event) => {
-  //   event.preventDefault();
-
-  //   const value = [
-  //     {
-  //       name: `${title}`,
-  //       category: `${selectedCategories}`,
-  //       information: `${description}`,
-  //       isPublic: `${visibility}`,
-  //       maximumNumber: `${people}`,
-  //       isFinished: false,
-  //       isRecruit: true,
-  //     },
-  //   ];
-  //   const formData = new FormData();
-
-  //   console.log(event);
-  //   formData.append("file", image); // 'file'는 서버에서 이미지를 받는 필드명
-  //   formData.append(
-  //     "post",
-  //     new Blob([JSON.stringify(value)], {
-  //       type: "application/json",
-  //     })
-  //   );
-
-  //   console.log("FormData:", value);
-  //   for (let [key, value] of formData.entries()) {
-  //     console.log(`${key}: ${value}`);
-  //   }
-
-  //   try {
-  //     const response = await axios.post(
-  //       "https://likelion.info/project/add", // Replace with your API endpoint
-  //       formData,
-  //       {
-  //         headers: {
-  //           Authorization: `Bearer ${storedToken}`,
-  //           "Content-Type": "multipart/form-data",
-  //         },
-  //       }
-  //     );
-
-  //     if (response.status === 200) {
-  //       console.log("Post uploaded successfully");
-  //       alert("게시물 업로드 성공");
-  //       navigate("/"); // Navigate back to the library page after successful post
-  //     } else {
-  //       console.error("Error uploading post");
-  //     }
-  //   } catch (error) {
-  //     console.error("Error uploading post:", error);
-  //     navigate("/", { replace: true });
-  //   }
-  // };
-  // }, []);
   const storedToken = localStorage.getItem("token");
 
   if (storedToken == null) {
@@ -133,20 +65,22 @@ export default function Create() {
   const handleSubmit = async (event) => {
     event.preventDefault();
 
-    const value = [
-      {
-        name: title,
-        category: selectedCategories,
-        information: description,
-        isPublic: visibility === "true",
-        maximumNumber: people,
-        isFinished: false,
-        isRecruit: true,
-      },
-    ];
+    // selectedCategories 객체의 값만 추출하여 문자열로 변환
+    const categoriesString = Object.values(selectedCategories).join(", ");
 
+    const value = {
+      name: title,
+      category: categoriesString,
+      information: description,
+      isPublic: visibility === "공개",
+      maximumNumber: people,
+      isFinished: false,
+      isRecruit: true,
+    };
+
+    console.log(value);
     const formData = new FormData();
-    formData.append("file", image); // 'file'은 서버에서 이미지를 받는 필드명입니다
+    formData.append("file", image);
     formData.append(
       "post",
       new Blob([JSON.stringify(value)], {
@@ -156,7 +90,7 @@ export default function Create() {
 
     try {
       const response = await axios.post(
-        "https://likelion.info/project/add", // Replace with your API endpoint
+        "https://likelion.info/project/add",
         formData,
         {
           headers: {
@@ -168,20 +102,17 @@ export default function Create() {
 
       if (response.status === 200) {
         console.log("Post uploaded successfully");
-        alert("게시물 업로드 성공");
-        navigate("/"); // 성공적으로 업로드 후 라이브러리 페이지로 이동
+        // alert("게시물 업로드 성공");
+        navigate("/"); // 성공적으로 업로드 후 메인 페이지로 이동
       } else {
         console.error("Error uploading post");
       }
     } catch (error) {
       if (error.response) {
-        // 서버가 응답을 보냈지만 상태 코드가 2xx 범위가 아님
         console.error("Error response from server:", error.response);
       } else if (error.request) {
-        // 요청이 만들어졌지만 응답을 받지 못함
         console.error("No response received:", error.request);
       } else {
-        // 요청을 설정하는 도중에 오류가 발생함
         console.error("Error in setting up request:", error.message);
       }
       console.error("Error uploading post:", error);
@@ -191,29 +122,29 @@ export default function Create() {
   };
 
   return (
-    <div className="createContainer">
+    <div className="create-createContainer">
       <form onSubmit={handleSubmit}>
         <div id="pageTitle">책 발간</div>
-        <div className="menu">
+        <div className="create-menu">
           <div>책 제목 *</div>
           <input
             placeholder="책 제목을 입력해 주세요."
             value={title}
             onChange={(e) => setTitle(e.target.value)}
-          ></input>
+          />
         </div>
-        <div className="menu">
+        <div className="create-menu">
           <div>책 표지 이미지</div>
           <ImgUpLoad onImageUpload={handleImageUpload} />
         </div>
-        <div className="menu">
+        <div className="create-menu">
           <div>책 장르 *</div>
-          <div className="categoryContainer">
+          <div className="create-categoryContainer">
             {Object.keys(categories).map((category) => (
-              <div key={category} className="category">
+              <div key={category} className="create-category">
                 <div>{category}</div>
                 {categories[category].map((item) => (
-                  <div key={item} className="radio-item">
+                  <div key={item} className="create-radio-item">
                     <input
                       type="radio"
                       id={item}
@@ -227,18 +158,18 @@ export default function Create() {
             ))}
           </div>
         </div>
-        <div className="menu">
+        <div className="create-menu">
           <div>책 소개 *</div>
           <input
             placeholder="책 소개를 입력해 주세요."
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-          ></input>
+          />
         </div>
-        <div className="menu">
+        <div className="create-menu">
           <div>책 공개 여부</div>
           <div>
-            <div className="radio-item">
+            <div className="create-radio-item">
               <input
                 type="radio"
                 id="public"
@@ -249,7 +180,7 @@ export default function Create() {
               />
               <label htmlFor="public">공개</label>
             </div>
-            <div className="radio-item">
+            <div className="create-radio-item">
               <input
                 type="radio"
                 id="private"
@@ -262,9 +193,9 @@ export default function Create() {
             </div>
           </div>
         </div>
-        <div className="menu">
+        <div className="create-menu">
           <div>작가 정원 *</div>
-          <div className="peopleNum">
+          <div className="create-peopleNum">
             <div onClick={() => handlePeople(-1)}>-</div>
             <div>{people}</div>
             <div onClick={() => handlePeople(+1)}>+</div>
@@ -275,5 +206,3 @@ export default function Create() {
     </div>
   );
 }
-
-// 카테고리 최대 개수?
diff --git a/src/pages/Mainpage.jsx b/src/pages/Mainpage.jsx
index 632dc3e..7e17e45 100644
--- a/src/pages/Mainpage.jsx
+++ b/src/pages/Mainpage.jsx
@@ -1,44 +1,69 @@
 import Header from "../components/Header";
 import Slide from "../components/Slide";
+import { useNavigate } from "react-router-dom";
 import "../styles/mainpage.css";
 
 export default function Mainpage() {
+  const navigate = useNavigate();
+
+  function toList() {
+    navigate("/list");
+  }
+
   return (
-    <div className="main">
+    <div className="main-page">
       <Header />
-      <div className="main-container">
-        <div className="section" id="best-book">
-          <div className="section-above" id="best-above">
+      <div className="main-page-container">
+        <div className="main-section" id="best-book">
+          <div className="main-section-above" id="best-above">
             베스트 책
           </div>
-          <div className="slide-container">
+          <div className="main-slide-container">
             <Slide mode={1} />
           </div>
         </div>
-        <div className="section">
-          <div className="section-above">
+        <div className="main-section">
+          <div className="main-section-above">
             <div>함께 책 만들 작가 모집</div>
-            <div>더보기</div>
+            <div
+              onClick={() => {
+                toList();
+              }}
+            >
+              더보기
+            </div>
           </div>
-          <div className="slide-container">
+          <div className="main-slide-container">
             <Slide mode={0} />
           </div>
         </div>
-        <div className="section">
-          <div className="section-above">
+        <div className="main-section">
+          <div className="main-section-above">
             <div>완결된 책</div>
-            <div>더보기</div>
+            <div
+              onClick={() => {
+                toList();
+              }}
+            >
+              더보기
+            </div>
           </div>
-          <div className="slide-container">
+          <div className="main-slide-container">
             <Slide mode={0} />
           </div>
         </div>
-        <div className="section">
-          <div className="section-above">
+        <div className="main-section">
+          <div className="main-section-above">
             <div>진행 중인 책</div>
-            <div>더보기</div>
+            <div
+              onClick={() => {
+                toList();
+              }}
+            >
+              더보기
+            </div>
           </div>
-          <div className="slide-container">
+          <div className="main-slide-container">
             <Slide mode={0} />
           </div>
         </div>
diff --git a/src/pages/project/List.jsx b/src/pages/project/List.jsx
index 018a2eb..6c3881a 100644
--- a/src/pages/project/List.jsx
+++ b/src/pages/project/List.jsx
@@ -39,10 +39,10 @@ export default function List() {
     setDropdown(event.target.value);
   };
   return (
-    <div className="main-container">
+    <div className="main-list-container">
       <Header mode={1} />
-      <div className="grid-container">
-        <div className="dropdown-container">
+      <div className="list-grid-container">
+        <div className="list-dropdown-container">
           <select value={dropdown} onChange={handleSelectChange}>
             <option value="option1">모집 중</option>
             <option value="option2">완결</option>
@@ -56,7 +56,7 @@ export default function List() {
                 className="list-img"
                 style={{ backgroundImage: `url(${image.src})` }}
               >
-                <div className="img-inner">
+                <div className="list-img-inner">
                   <div>{image.title}</div>
                 </div>
               </div>
diff --git a/src/styles/create.css b/src/styles/create.css
index 9949543..dd48472 100644
--- a/src/styles/create.css
+++ b/src/styles/create.css
@@ -1,9 +1,9 @@
-.createContainer {
+.create-createContainer {
   margin: 60px 132px;
   min-width: 700px;
 }
 
-.menu {
+.create-menu {
   margin-bottom: 80px;
 }
 
@@ -11,24 +11,19 @@
   margin-bottom: 107px;
 }
 
-.categoryContainer {
+.create-categoryContainer {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 
-.category {
-  width: 15%;
-}
-
-.radio-item {
+.create-radio-item {
   display: flex;
   align-items: center;
-
   margin: 12px 0px;
 }
 
-.peopleNum {
+.create-peopleNum {
   display: flex;
   align-items: center;
 }
diff --git a/src/styles/header.css b/src/styles/header.css
index a04f10b..0770427 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -5,7 +5,7 @@
   width: 100%;
 }
 
-.headerContainer {
+.header-headerContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -13,7 +13,7 @@
   margin-bottom: 40px;
 }
 
-.searchContainer {
+.header-searchContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -26,7 +26,7 @@
   height: 40px;
 }
 
-.headerRight {
+.header-headerRight {
   display: flex;
   align-items: center;
 }
@@ -39,7 +39,7 @@
   cursor: pointer;
 }
 
-.searchBox {
+.header-searchBox {
   border: none;
   outline: none;
   width: 80%;
@@ -49,21 +49,22 @@ img {
   cursor: pointer;
 }
 
-.categoryContainer {
+.header-categoryContainer {
   display: flex;
   flex-direction: column;
-
   width: 100%;
 }
 
-.categoryContainer button {
+.header-categoryContainer button {
   border: none;
   background-color: white;
 }
 
-.category {
+.header-category {
   display: flex;
   justify-content: space-evenly;
+
+  width: 100%;
 }
 
 #upper-category {
diff --git a/src/styles/list.css b/src/styles/list.css
index b507f97..5f9cdbe 100644
--- a/src/styles/list.css
+++ b/src/styles/list.css
@@ -1,17 +1,17 @@
-.main-container {
+.main-list-container {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.grid-container {
+.list-grid-container {
   display: flex;
   flex-direction: column;
 
   width: 80%;
 }
 
-.dropdown-container {
+.list-dropdown-container {
   display: flex;
   flex-direction: row-reverse;
 }
@@ -36,6 +36,3 @@
 
   display: flex;
 }
-
-.img-inner {
-}
diff --git a/src/styles/mainpage.css b/src/styles/mainpage.css
index 50d431f..0110f2e 100644
--- a/src/styles/mainpage.css
+++ b/src/styles/mainpage.css
@@ -1,4 +1,4 @@
-.main {
+.main-page {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -6,7 +6,7 @@
   min-width: 800px;
 }
 
-.main-container {
+.main-page-container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -14,17 +14,12 @@
   width: 100%;
 }
 
-.slide-container {
-  width: 100%;
-  height: 300px;
-}
-
-.section {
+.main-section {
   width: 100%;
   max-width: 90%;
 }
 
-.section-above {
+.main-section-above {
   display: flex;
   justify-content: space-between;
   padding: 0 35px;
diff --git a/src/styles/slide.css b/src/styles/slide.css
index 38ac596..7092cb6 100644
--- a/src/styles/slide.css
+++ b/src/styles/slide.css
@@ -1,6 +1,8 @@
 .slide-container {
   display: flex;
   align-items: center;
+  width: 100%;
+  height: 300px;
 }
 
 .swiper {
diff --git a/src/styles/write.css b/src/styles/write.css
index 453bc0d..9b53b9c 100644
--- a/src/styles/write.css
+++ b/src/styles/write.css
@@ -1,210 +1,214 @@
-@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
 @media print {
-	body {
-		margin: 0 !important;
-	}
+  body {
+    margin: 0 !important;
+  }
 }
 
-.main-container {
-	--ckeditor5-preview-height: 700px;
-	font-family: 'Lato';
-	width: fit-content;
-	margin-left: auto;
-	margin-right: auto;
+.main-write-container {
+  --ckeditor5-preview-height: 700px;
+  font-family: "Lato";
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .ck-content {
-	font-family: 'Lato';
-	line-height: 1.6;
-	word-break: break-word;
+  font-family: "Lato";
+  line-height: 1.6;
+  word-break: break-word;
 }
 
 .editor-container__editor-wrapper {
-	display: flex;
-	width: fit-content;
+  display: flex;
+  width: fit-content;
 }
 
 .editor-container_document-editor {
-	border: 1px solid var(--ck-color-base-border);
+  border: 1px solid var(--ck-color-base-border);
 }
 
 .editor-container_document-editor .editor-container__toolbar {
-	display: flex;
-	position: relative;
-	box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
+  display: flex;
+  position: relative;
+  box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
 }
 
 .editor-container_document-editor .editor-container__toolbar > .ck.ck-toolbar {
-	flex-grow: 1;
-	width: 0;
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-	border-top: 0;
-	border-left: 0;
-	border-right: 0;
+  flex-grow: 1;
+  width: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
-.editor-container_document-editor .editor-container__menu-bar > .ck.ck-menu-bar {
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-	border-top: 0;
-	border-left: 0;
-	border-right: 0;
+.editor-container_document-editor
+  .editor-container__menu-bar
+  > .ck.ck-menu-bar {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .editor-container_document-editor .editor-container__editor-wrapper {
-	max-height: var(--ckeditor5-preview-height);
-	min-height: var(--ckeditor5-preview-height);
-	overflow-y: scroll;
-	background: var(--ck-color-base-foreground);
+  max-height: var(--ckeditor5-preview-height);
+  min-height: var(--ckeditor5-preview-height);
+  overflow-y: scroll;
+  background: var(--ck-color-base-foreground);
 }
 
 .editor-container_document-editor .editor-container__editor {
-	margin-top: 28px;
-	margin-bottom: 28px;
-	height: 100%;
-}
-
-.editor-container_document-editor .editor-container__editor .ck.ck-editor__editable {
-	box-sizing: border-box;
-	min-width: calc(210mm + 2px);
-	max-width: calc(210mm + 2px);
-	min-height: 297mm;
-	height: fit-content;
-	padding: 20mm 12mm;
-	border: 1px hsl(0, 0%, 82.7%) solid;
-	background: hsl(0, 0%, 100%);
-	box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
-	flex: 1 1 auto;
-	margin-left: 72px;
-	margin-right: 72px;
+  margin-top: 28px;
+  margin-bottom: 28px;
+  height: 100%;
+}
+
+.editor-container_document-editor
+  .editor-container__editor
+  .ck.ck-editor__editable {
+  box-sizing: border-box;
+  min-width: calc(210mm + 2px);
+  max-width: calc(210mm + 2px);
+  min-height: 297mm;
+  height: fit-content;
+  padding: 20mm 12mm;
+  border: 1px hsl(0, 0%, 82.7%) solid;
+  background: hsl(0, 0%, 100%);
+  box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
+  flex: 1 1 auto;
+  margin-left: 72px;
+  margin-right: 72px;
 }
 
 .ck-content h3.category {
-	font-family: 'Oswald';
-	font-size: 20px;
-	font-weight: bold;
-	color: #555;
-	letter-spacing: 10px;
-	margin: 0;
-	padding: 0;
+  font-family: "Oswald";
+  font-size: 20px;
+  font-weight: bold;
+  color: #555;
+  letter-spacing: 10px;
+  margin: 0;
+  padding: 0;
 }
 
 .ck-content h2.document-title {
-	font-family: 'Oswald';
-	font-size: 50px;
-	font-weight: bold;
-	margin: 0;
-	padding: 0;
-	border: 0;
+  font-family: "Oswald";
+  font-size: 50px;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  border: 0;
 }
 
 .ck-content h3.document-subtitle {
-	font-family: 'Oswald';
-	font-size: 20px;
-	color: #555;
-	margin: 0 0 1em;
-	font-weight: bold;
-	padding: 0;
+  font-family: "Oswald";
+  font-size: 20px;
+  color: #555;
+  margin: 0 0 1em;
+  font-weight: bold;
+  padding: 0;
 }
 
 .ck-content p.info-box {
-	--background-size: 30px;
-	--background-color: #e91e63;
-	padding: 1.2em 2em;
-	border: 1px solid var(--background-color);
-	background: linear-gradient(
-			135deg,
-			var(--background-color) 0%,
-			var(--background-color) var(--background-size),
-			transparent var(--background-size)
-		),
-		linear-gradient(
-			135deg,
-			transparent calc(100% - var(--background-size)),
-			var(--background-color) calc(100% - var(--background-size)),
-			var(--background-color)
-		);
-	border-radius: 10px;
-	margin: 1.5em 2em;
-	box-shadow: 5px 5px 0 #ffe6ef;
+  --background-size: 30px;
+  --background-color: #e91e63;
+  padding: 1.2em 2em;
+  border: 1px solid var(--background-color);
+  background: linear-gradient(
+      135deg,
+      var(--background-color) 0%,
+      var(--background-color) var(--background-size),
+      transparent var(--background-size)
+    ),
+    linear-gradient(
+      135deg,
+      transparent calc(100% - var(--background-size)),
+      var(--background-color) calc(100% - var(--background-size)),
+      var(--background-color)
+    );
+  border-radius: 10px;
+  margin: 1.5em 2em;
+  box-shadow: 5px 5px 0 #ffe6ef;
 }
 
 .ck-content blockquote.side-quote {
-	font-family: 'Oswald';
-	font-style: normal;
-	float: right;
-	width: 35%;
-	position: relative;
-	border: 0;
-	overflow: visible;
-	z-index: 1;
-	margin-left: 1em;
+  font-family: "Oswald";
+  font-style: normal;
+  float: right;
+  width: 35%;
+  position: relative;
+  border: 0;
+  overflow: visible;
+  z-index: 1;
+  margin-left: 1em;
 }
 
 .ck-content blockquote.side-quote::before {
-	content: '“';
-	position: absolute;
-	top: -37px;
-	left: -10px;
-	display: block;
-	font-size: 200px;
-	color: #e7e7e7;
-	z-index: -1;
-	line-height: 1;
+  content: "“";
+  position: absolute;
+  top: -37px;
+  left: -10px;
+  display: block;
+  font-size: 200px;
+  color: #e7e7e7;
+  z-index: -1;
+  line-height: 1;
 }
 
 .ck-content blockquote.side-quote p {
-	font-size: 2em;
-	line-height: 1;
+  font-size: 2em;
+  line-height: 1;
 }
 
 .ck-content blockquote.side-quote p:last-child:not(:first-child) {
-	font-size: 1.3em;
-	text-align: right;
-	color: #555;
+  font-size: 1.3em;
+  text-align: right;
+  color: #555;
 }
 
 .ck-content span.marker {
-	background: yellow;
+  background: yellow;
 }
 
 .ck-content span.spoiler {
-	background: #000;
-	color: #000;
+  background: #000;
+  color: #000;
 }
 
 .ck-content span.spoiler:hover {
-	background: #000;
-	color: #fff;
+  background: #000;
+  color: #fff;
 }
 
 .ck-content pre.fancy-code {
-	border: 0;
-	margin-left: 2em;
-	margin-right: 2em;
-	border-radius: 10px;
+  border: 0;
+  margin-left: 2em;
+  margin-right: 2em;
+  border-radius: 10px;
 }
 
 .ck-content pre.fancy-code::before {
-	content: '';
-	display: block;
-	height: 13px;
-	background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
-	margin-bottom: 8px;
-	background-repeat: no-repeat;
+  content: "";
+  display: block;
+  height: 13px;
+  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
+  margin-bottom: 8px;
+  background-repeat: no-repeat;
 }
 
 .ck-content pre.fancy-code-dark {
-	background: #272822;
-	color: #fff;
-	box-shadow: 5px 5px 0 #0000001f;
+  background: #272822;
+  color: #fff;
+  box-shadow: 5px 5px 0 #0000001f;
 }
 
 .ck-content pre.fancy-code-bright {
-	background: #dddfe0;
-	color: #000;
-	box-shadow: 5px 5px 0 #b3b3b3;
+  background: #dddfe0;
+  color: #000;
+  box-shadow: 5px 5px 0 #b3b3b3;
 }