diff --git a/assets/styles/sections/pdf-viewer.scss b/assets/styles/sections/pdf-viewer.scss
new file mode 100644
index 0000000..2906fdc
--- /dev/null
+++ b/assets/styles/sections/pdf-viewer.scss
@@ -0,0 +1,41 @@
+.pdf-viewer {
+  canvas {
+    border: 1px solid black;
+    direction: ltr;
+    width: 100%;
+    height: auto;
+    display: none;
+  }
+  
+  .paginator {
+    display: none;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  
+  .loading-wrapper {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 350px;
+  }
+  
+  .loading {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    border: 3px solid #d2d0d0;;
+    border-radius: 50%;
+    border-top-color: #383838;
+    animation: spin 1s ease-in-out infinite;
+    -webkit-animation: spin 1s ease-in-out infinite;
+  }
+  
+  @keyframes spin {
+    to { -webkit-transform: rotate(360deg); }
+  }
+  @-webkit-keyframes spin {
+    to { -webkit-transform: rotate(360deg); }
+  }
+}
\ No newline at end of file
diff --git a/data/toha/styles.yml b/data/toha/styles.yml
index 69fb72c..69f231b 100644
--- a/data/toha/styles.yml
+++ b/data/toha/styles.yml
@@ -24,4 +24,8 @@ math:
   services:
     katex:
       styles:
-      - katex/dist/katex
\ No newline at end of file
+      - katex/dist/katex
+
+embedpdf:
+  styles:
+  - ./sections/pdf-viewer
\ No newline at end of file
diff --git a/layouts/shortcodes/embed-pdf.html b/layouts/shortcodes/embed-pdf.html
index 2847a15..8971d49 100755
--- a/layouts/shortcodes/embed-pdf.html
+++ b/layouts/shortcodes/embed-pdf.html
@@ -23,46 +23,3 @@
       <canvas class="pdf-canvas"></canvas>
   </div>
 </div>
-
-<!-- Finally, make the canvas more beautiful -->
-<style>
-.pdf-viewer canvas {
-  border: 1px solid black;
-  direction: ltr;
-  width: 100%;
-  height: auto;
-  display: none;
-}
-
-.pdf-viewer  .paginator {
-  display: none;
-  text-align: center;
-  margin-bottom: 10px;
-}
-
-.pdf-viewer .loading-wrapper {
-  display: none;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 350px;
-}
-
-.pdf-viewer .loading {
-  display: inline-block;
-  width: 50px;
-  height: 50px;
-  border: 3px solid #d2d0d0;;
-  border-radius: 50%;
-  border-top-color: #383838;
-  animation: spin 1s ease-in-out infinite;
-  -webkit-animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-  to { -webkit-transform: rotate(360deg); }
-}
-@-webkit-keyframes spin {
-  to { -webkit-transform: rotate(360deg); }
-}
-</style>