diff --git a/DiscordChatExporter.Core/Discord/Data/Attachment.cs b/DiscordChatExporter.Core/Discord/Data/Attachment.cs
index 799b344..d46e52e 100644
--- a/DiscordChatExporter.Core/Discord/Data/Attachment.cs
+++ b/DiscordChatExporter.Core/Discord/Data/Attachment.cs
@@ -17,18 +17,19 @@ namespace DiscordChatExporter.Core.Discord.Data
 
         public string FileName { get; }
 
+        public string FileExtension => Path.GetExtension(FileName);
+
         public int? Width { get; }
 
         public int? Height { get; }
 
-        public bool IsImage => ImageFileExtensions.Contains(Path.GetExtension(FileName));
+        public bool IsImage => ImageFileExtensions.Contains(FileExtension);
 
-        public bool IsVideo => VideoFileExtensions.Contains(Path.GetExtension(FileName));
+        public bool IsVideo => VideoFileExtensions.Contains(FileExtension);
 
-        public bool IsAudio => AudioFileExtensions.Contains(Path.GetExtension(FileName));
+        public bool IsAudio => AudioFileExtensions.Contains(FileExtension);
 
-        public bool IsSpoiler =>
-            (IsImage || IsVideo || IsAudio) && FileName.StartsWith("SPOILER_", StringComparison.Ordinal);
+        public bool IsSpoiler => FileName.StartsWith("SPOILER_", StringComparison.Ordinal);
 
         public FileSize FileSize { get; }
 
diff --git a/DiscordChatExporter.Core/DiscordChatExporter.Core.csproj b/DiscordChatExporter.Core/DiscordChatExporter.Core.csproj
index b098924..9651a8f 100644
--- a/DiscordChatExporter.Core/DiscordChatExporter.Core.csproj
+++ b/DiscordChatExporter.Core/DiscordChatExporter.Core.csproj
@@ -12,10 +12,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <AdditionalFiles Include="Exporting\Writers\Html\PreambleTemplate.cshtml" IsRazorTemplate="true" />
-    <AdditionalFiles Include="Exporting\Writers\Html\PostambleTemplate.cshtml" IsRazorTemplate="true" />
-    <AdditionalFiles Include="Exporting\Writers\Html\MessageGroupTemplate.cshtml" IsRazorTemplate="true" />
-    <AdditionalFiles Include="Exporting\Writers\Html\StylesheetTemplate.cshtml" IsRazorTemplate="true" />
+    <AdditionalFiles Include="Exporting\Writers\Html\*.cshtml" IsRazorTemplate="true" />
   </ItemGroup>
 
 </Project>
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
index b4712ef..caf84ce 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
@@ -46,17 +46,17 @@
 }
 
 <div class="chatlog__message-group">
+    @{/* Referenced message */}
     @if (Model.MessageGroup.Reference is not null)
     {
-        <div class="chatlog__reference-symbol">
-        </div>
+        <div class="chatlog__reference-symbol"></div>
         <div class="chatlog__reference">
             @if (Model.MessageGroup.ReferencedMessage is not null)
             {
-                <img loading="lazy" class="chatlog__reference-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.ReferencedMessage.Author.AvatarUrl)" alt="Avatar">
+                <img class="chatlog__reference-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.ReferencedMessage.Author.AvatarUrl)" alt="Avatar" loading="lazy">
                 <span class="chatlog__reference-name" title="@Model.MessageGroup.ReferencedMessage.Author.FullName" style="@referencedUserColorStyle">@referencedUserNick</span>
-                <div class="chatlog__reference-link" onclick="scrollToMessage(event, '@Model.MessageGroup.ReferencedMessage.Id')">
-                    <span class="chatlog__reference-content">
+                <div class="chatlog__reference-content">
+                    <span class="chatlog__reference-link" onclick="scrollToMessage(event, '@Model.MessageGroup.ReferencedMessage.Id')">
                         @if (!string.IsNullOrWhiteSpace(Model.MessageGroup.ReferencedMessage.Content))
                         {
                             @Raw(FormatEmbedMarkdown(Model.MessageGroup.ReferencedMessage.Content))
@@ -81,30 +81,37 @@
             }
         </div>
     }
+
+    @{/* Avatar */}
     <div class="chatlog__author-avatar-container">
-        <img loading="lazy" class="chatlog__author-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.Author.AvatarUrl)" alt="Avatar">
+        <img class="chatlog__author-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.Author.AvatarUrl)" alt="Avatar" loading="lazy">
     </div>
+
     <div class="chatlog__messages">
+        @{/* Author name */}
         <span class="chatlog__author-name" title="@Model.MessageGroup.Author.FullName" data-user-id="@Model.MessageGroup.Author.Id" style="@userColorStyle">@userNick</span>
 
+        @{/* Bot tag */}
         @if (Model.MessageGroup.Author.IsBot)
         {
             <span class="chatlog__bot-tag">BOT</span>
         }
 
+        @{/* Message timestamp */}
         <span class="chatlog__timestamp">@FormatDate(Model.MessageGroup.Timestamp)</span>
 
+        @{/* Messages in a group */}
         @foreach (var message in Model.MessageGroup.Messages)
         {
-            var isPinnedStyle = message.IsPinned ? "chatlog__message--pinned" : null;
-
-            <div class="chatlog__message @isPinnedStyle" data-message-id="@message.Id" id="message-@message.Id" title="Message sent: @FormatDate(message.Timestamp)">
+            <div class="chatlog__message @(message.IsPinned ? "chatlog__message--pinned" : null)" data-message-id="@message.Id" id="message-@message.Id" title="Message sent: @FormatDate(message.Timestamp)">
                 @if (!string.IsNullOrWhiteSpace(message.Content) || message.EditedTimestamp is not null)
                 {
                     <div class="chatlog__content">
                         <div class="markdown">
+                            @{/* Message content */}
                             <span class="preserve-whitespace">@Raw(FormatMarkdown(message.Content))</span>
 
+                            @{/* Edit timestamp */}
                             @if (message.EditedTimestamp is not null)
                             {
                                 <span class="chatlog__edited-timestamp" title="@FormatDate(message.EditedTimestamp.Value)">(edited)</span>
@@ -113,62 +120,64 @@
                     </div>
                 }
 
+                @{/* Attachments */}
                 @foreach (var attachment in message.Attachments)
                 {
-                    <div class="chatlog__attachment">
-                        <div class="@(attachment.IsSpoiler ? "spoiler spoiler--hidden" : "")" onclick="@(attachment.IsSpoiler ? "showSpoiler(event, this)" : "")">
-                            <div class="@(attachment.IsSpoiler ? "spoiler-image" : "")">
-                                @if (attachment.IsImage)
-                                {
+                    <div class="chatlog__attachment @(attachment.IsSpoiler ? "chatlog__attachment--hidden" : "")" onclick="@(attachment.IsSpoiler ? "showSpoiler(event, this)" : "")">
+                        @{/* Spoiler caption */}
+                        @if (attachment.IsSpoiler)
+                        {
+                            <div class="chatlog__attachment-spoiler-caption">SPOILER</div>
+                        }
+
+                        @{/* Attachment preview */}
+                        @if (attachment.IsImage)
+                        {
+                            <a href="@await ResolveUrlAsync(attachment.Url)">
+                                <img class="chatlog__attachment-media" src="@await ResolveUrlAsync(attachment.Url)" alt="Image attachment" title="@($"Image: {attachment.FileName} ({attachment.FileSize})")" loading="lazy">
+                            </a>
+                        }
+                        else if (attachment.IsVideo)
+                        {
+                            <video class="chatlog__attachment-media" controls>
+                                <source src="@await ResolveUrlAsync(attachment.Url)" alt="Video attachment" title="@($"Video: {attachment.FileName} ({attachment.FileSize})")">
+                            </video>
+                        }
+                        else if (attachment.IsAudio)
+                        {
+                            <audio class="chatlog__attachment-media" controls>
+                                <source src="@await ResolveUrlAsync(attachment.Url)" alt="Audio attachment" title="@($"Audio: {attachment.FileName} ({attachment.FileSize})")">
+                            </audio>
+                        }
+                        else
+                        {
+                            <div class="chatlog__attachment-generic">
+                                <svg class="chatlog__attachment-generic-icon">
+                                    <use href="#icon-attachment" />
+                                </svg>
+                                <div class="chatlog__attachment-generic-name">
                                     <a href="@await ResolveUrlAsync(attachment.Url)">
-                                        <img loading="lazy" class="chatlog__attachment-thumbnail" src="@await ResolveUrlAsync(attachment.Url)" alt="Image attachment" title="@($"Image: {attachment.FileName} ({attachment.FileSize})")">
+                                        @attachment.FileName
                                     </a>
-                                }
-                                else if (attachment.IsVideo)
-                                {
-                                    <video controls class="chatlog__attachment-thumbnail">
-                                        <source src="@await ResolveUrlAsync(attachment.Url)" alt="Video attachment" title="@($"Video: {attachment.FileName} ({attachment.FileSize})")">
-                                    </video>
-                                }
-                                else if (attachment.IsAudio)
-                                {
-                                    <audio controls class="chatlog__attachment-thumbnail">
-                                        <source src="@await ResolveUrlAsync(attachment.Url)" alt="Audio attachment" title="@($"Audio: {attachment.FileName} ({attachment.FileSize})")">
-                                    </audio>
-                                }
-                                else
-                                {
-                                    <div class="chatlog__attachment-container">
-                                        <svg class="chatlog__attachment-icon" viewBox="0 0 720 960">
-                                            <path class="a"/>
-                                            <path class="b"/>
-                                            <path class="c"/>
-                                            <path class="d"/>
-                                        </svg>
-                                        <div class="chatlog__attachment-filename">
-                                            <a href="@await ResolveUrlAsync(attachment.Url)">
-                                                @attachment.FileName
-                                            </a>
-                                        </div>
-                                        <div class="chatlog__attachment-filesize">
-                                            @attachment.FileSize
-                                        </div>
-                                    </div>
-                                }
+                                </div>
+                                <div class="chatlog__attachment-generic-size">
+                                    @attachment.FileSize
+                                </div>
                             </div>
-                        </div>
+                        }
                     </div>
                 }
 
+                @{/* Embeds */}
                 @foreach (var embed in message.Embeds)
                 {
                     var youTubeVideo = embed.TryGetYouTubeVideo();
 
                     <div class="chatlog__embed">
+                        @{/* Color pill */}
                         @if (embed.Color is not null)
                         {
-                            var embedColorStyle = $"background-color: rgba({embed.Color?.R},{embed.Color?.G},{embed.Color?.B},{embed.Color?.A})";
-                            <div class="chatlog__embed-color-pill" style="@embedColorStyle"></div>
+                            <div class="chatlog__embed-color-pill" style="background-color: rgba(@embed.Color?.R,@embed.Color?.G,@embed.Color?.B,@embed.Color?.A)"></div>
                         }
                         else
                         {
@@ -178,12 +187,13 @@
                         <div class="chatlog__embed-content-container">
                             <div class="chatlog__embed-content">
                                 <div class="chatlog__embed-text">
+                                    @{/* Embed author */}
                                     @if (embed.Author is not null)
                                     {
                                         <div class="chatlog__embed-author">
                                             @if (!string.IsNullOrWhiteSpace(embed.Author.IconUrl))
                                             {
-                                                <img loading="lazy" class="chatlog__embed-author-icon" src="@await ResolveUrlAsync(embed.Author.IconProxyUrl ?? embed.Author.IconUrl)" alt="Author icon">
+                                                <img class="chatlog__embed-author-icon" src="@await ResolveUrlAsync(embed.Author.IconProxyUrl ?? embed.Author.IconUrl)" alt="Author icon" loading="lazy">
                                             }
 
                                             @if (!string.IsNullOrWhiteSpace(embed.Author.Name))
@@ -202,6 +212,7 @@
                                         </div>
                                     }
 
+                                    @{/* Embed title */}
                                     @if (!string.IsNullOrWhiteSpace(embed.Title))
                                     {
                                         <div class="chatlog__embed-title">
@@ -218,6 +229,7 @@
                                         </div>
                                     }
 
+                                    @{/* Embed description (with special casing for YouTube videos) */}
                                     @if (youTubeVideo is not null)
                                     {
                                         <div class="chatlog__embed-youtube-container">
@@ -231,14 +243,13 @@
                                         </div>
                                     }
 
+                                    @{/* Embed fields */}
                                     @if (embed.Fields.Any())
                                     {
                                         <div class="chatlog__embed-fields">
                                             @foreach (var field in embed.Fields)
                                             {
-                                                var isInlineStyle = field.IsInline ? "chatlog__embed-field--inline" : null;
-
-                                                <div class="chatlog__embed-field @isInlineStyle">
+                                                <div class="chatlog__embed-field @(field.IsInline ? "chatlog__embed-field--inline" : null)">
                                                     @if (!string.IsNullOrWhiteSpace(field.Name))
                                                     {
                                                         <div class="chatlog__embed-field-name">
@@ -258,34 +269,39 @@
                                     }
                                 </div>
 
+                                @{/* Embed content (not shown for YouTube videos) */}
                                 @if (embed.Thumbnail is not null && !string.IsNullOrWhiteSpace(embed.Thumbnail.Url) && youTubeVideo is null)
                                 {
                                     <div class="chatlog__embed-thumbnail-container">
                                         <a class="chatlog__embed-thumbnail-link" href="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)">
-                                            <img loading="lazy" class="chatlog__embed-thumbnail" src="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)" alt="Thumbnail">
+                                            <img class="chatlog__embed-thumbnail" src="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)" alt="Thumbnail" loading="lazy">
                                         </a>
                                     </div>
                                 }
                             </div>
 
+                            @{/* Embed image */}
                             @if (embed.Image is not null && !string.IsNullOrWhiteSpace(embed.Image.Url))
                             {
                                 <div class="chatlog__embed-image-container">
                                     <a class="chatlog__embed-image-link" href="@await ResolveUrlAsync(embed.Image.ProxyUrl ?? embed.Image.Url)">
-                                        <img loading="lazy" class="chatlog__embed-image" src="@await ResolveUrlAsync(embed.Image.ProxyUrl ?? embed.Image.Url)" alt="Image">
+                                        <img class="chatlog__embed-image" src="@await ResolveUrlAsync(embed.Image.ProxyUrl ?? embed.Image.Url)" alt="Image" loading="lazy">
                                     </a>
                                 </div>
                             }
 
+                            @{/* Embed footer & icon */}
                             @if (embed.Footer is not null || embed.Timestamp is not null)
                             {
                                 <div class="chatlog__embed-footer">
+                                    @{/* Footer icon */}
                                     @if (!string.IsNullOrWhiteSpace(embed.Footer?.IconUrl))
                                     {
-                                        <img loading="lazy" class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconProxyUrl ?? embed.Footer.IconUrl)" alt="Footer icon">
+                                        <img class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconProxyUrl ?? embed.Footer.IconUrl)" alt="Footer icon" loading="lazy">
                                     }
 
                                     <span class="chatlog__embed-footer-text">
+                                        @{/* Footer text */}
                                         @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text))
                                         {
                                             @embed.Footer.Text
@@ -296,6 +312,7 @@
                                             @(" • ")
                                         }
 
+                                        @{/* Embed timestamp */}
                                         @if (embed.Timestamp is not null)
                                         {
                                             @FormatDate(embed.Timestamp.Value)
@@ -307,13 +324,14 @@
                     </div>
                 }
 
+                @{/* Message reactions */}
                 @if (message.Reactions.Any())
                 {
                     <div class="chatlog__reactions">
                         @foreach (var reaction in message.Reactions)
                         {
                             <div class="chatlog__reaction" title="@reaction.Emoji.Code">
-                                <img loading="lazy" class="emoji emoji--small" alt="@reaction.Emoji.Name" src="@await ResolveUrlAsync(reaction.Emoji.ImageUrl)">
+                                <img class="emoji emoji--small" alt="@reaction.Emoji.Name" src="@await ResolveUrlAsync(reaction.Emoji.ImageUrl)" loading="lazy">
                                 <span class="chatlog__reaction-count">@reaction.Count</span>
                             </div>
                         }
@@ -322,4 +340,4 @@
             </div>
         }
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/PostambleTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/PostambleTemplate.cshtml
index a35ac47..fc4638a 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/PostambleTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/PostambleTemplate.cshtml
@@ -1,6 +1,7 @@
 @namespace DiscordChatExporter.Core.Exporting.Writers.Html
 @inherits MiniRazor.TemplateBase<PostambleTemplateContext>
 
+@{/* Close elements opened by preamble */}
 </div>
 
 <div class="postamble">
diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
index 640ec47..a61009a 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
@@ -5,6 +5,11 @@
 @inherits MiniRazor.TemplateBase<PreambleTemplateContext>
 
 @{
+    string Themed(string darkVariant, string lightVariant) =>
+        string.Equals(Model.ThemeName, "Dark", StringComparison.OrdinalIgnoreCase)
+            ? darkVariant
+            : lightVariant;
+
     string FormatDate(DateTimeOffset date) => Model.ExportContext.FormatDate(date);
 
     ValueTask<string> ResolveUrlAsync(string url) => Model.ExportContext.ResolveMediaUrlAsync(url);
@@ -18,8 +23,591 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
 
-    @{ await StylesheetTemplate.RenderAsync(Output, Model); }
+    @{/* Styling */}
+    <style>
+        @@font-face {
+            font-family: Whitney;
+            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-300.woff);
+            font-weight: 300;
+        }
+
+        @@font-face {
+            font-family: Whitney;
+            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-400.woff);
+            font-weight: 400;
+        }
+
+        @@font-face {
+            font-family: Whitney;
+            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-500.woff);
+            font-weight: 500;
+        }
+
+        @@font-face {
+            font-family: Whitney;
+            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-600.woff);
+            font-weight: 600;
+        }
+
+        @@font-face {
+            font-family: Whitney;
+            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-700.woff);
+            font-weight: 700;
+        }
+
+        body {
+            background-color: @Themed("#36393e", "#ffffff");
+            color: @Themed("#dcddde", "#23262a");
+            font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-size: 17px;
+            font-weight: @Themed("400", "500");
+        }
+
+        a {
+            color: @Themed("#00aff4", "#0068e0");
+            text-decoration: none;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        img {
+            object-fit: contain;
+        }
+
+        .markdown {
+            max-width: 100%;
+            line-height: 1.3;
+            overflow-wrap: break-word;
+        }
+
+        .preserve-whitespace {
+            white-space: pre-wrap;
+        }
+
+        .spoiler-text {
+            background-color: @Themed("rgba(255, 255, 255, 0.1)", "rgba(0, 0, 0, 0.1)");
+            border-radius: 3px;
+        }
+
+        .spoiler-text--hidden {
+            cursor: pointer;
+            background-color: @Themed("#202225", "#b9bbbe");
+            color: rgba(0, 0, 0, 0);
+        }
+
+        .spoiler-text--hidden:hover {
+            background-color: @Themed("rgba(32, 34, 37, 0.8)", "rgba(185, 187, 190, 0.8)");
+        }
+
+        .spoiler-text--hidden::selection {
+            color: rgba(0, 0, 0, 0);
+        }
+
+        .quote {
+            margin: 0.1em 0;
+            padding-left: 0.6em;
+            border-left: 4px solid @Themed("#4f545c", "#c7ccd1");
+            border-radius: 3px;
+        }
+
+        .pre {
+            background-color: @Themed("#2f3136", "#f9f9f9");
+            font-family: "Consolas", "Courier New", Courier, monospace;
+        }
+
+        .pre--multiline {
+            margin-top: 0.25em;
+            padding: 0.5em;
+            border: 2px solid @Themed("#282b30", "#f3f3f3");
+            border-radius: 5px;
+            color: @Themed("#b9bbbe", "#657b83");
+        }
+
+        @{/* Override Highlight.js styles with a higher specificity selector */}
+        .pre--multiline.hljs {
+            background-color: @Themed("#2f3136", "#f9f9f9");
+            color: @Themed("#b9bbbe", "#657b83");
+        }
+
+        .pre--inline {
+            padding: 2px;
+            border-radius: 3px;
+            font-size: 0.85em;
+        }
+
+        .mention {
+            border-radius: 3px;
+            padding: 0 2px;
+            color: #7289da;
+            background: rgba(114, 137, 218, .1);
+            font-weight: 500;
+        }
+
+        .emoji {
+            width: 1.325em;
+            height: 1.325em;
+            margin: 0 0.06em;
+            vertical-align: -0.4em;
+        }
+
+        .emoji--small {
+            width: 1em;
+            height: 1em;
+        }
+
+        .emoji--large {
+            width: 2.8em;
+            height: 2.8em;
+        }
+
+        .preamble {
+            display: grid;
+            margin: 0 0.3em 0.6em 0.3em;
+            max-width: 100%;
+            grid-template-columns: auto 1fr;
+        }
+
+        .preamble__guild-icon-container {
+            grid-column: 1;
+        }
+
+        .preamble__guild-icon {
+            max-width: 88px;
+            max-height: 88px;
+        }
+
+        .preamble__entries-container {
+            grid-column: 2;
+            margin-left: 0.6em;
+        }
+
+        .preamble__entry {
+            font-size: 1.4em;
+            color: @Themed("#ffffff", "#2f3136");
+        }
+
+        .preamble__entry--small {
+            font-size: 1em;
+        }
+
+        .chatlog {
+            max-width: 100%;
+        }
+
+        .chatlog__message-group {
+            display: grid;
+            margin: 0 0.6em;
+            padding: 0.9em 0;
+            border-top: 1px solid @Themed("rgba(255, 255, 255, 0.1)", "#eceeef");
+            grid-template-columns: auto 1fr;
+        }
+
+        .chatlog__reference-symbol {
+            grid-column: 1;
+            border-left: 2px solid @Themed("#4f545c", "#c7ccd1");
+            border-top: 2px solid @Themed("#4f545c", "#c7ccd1");
+            border-radius: 8px 0 0 0;
+            margin-left: 16px;
+            margin-top: 8px;
+        }
+
+        .chatlog__reference {
+            display: flex;
+            grid-column: 2;
+            margin-left: 1.2em;
+            margin-bottom: 0.25em;
+            font-size: 0.875em;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            align-items: center;
+            color: @Themed("#b5b6b8", "#5f5f60");
+        }
+
+        .chatlog__reference-avatar {
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            margin-right: 0.25em;
+        }
+
+        .chatlog__reference-name {
+            margin-right: 0.25em;
+            font-weight: 600;
+        }
+
+        .chatlog__reference-content {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .chatlog__reference-content a:hover {
+            text-decoration: none;
+        }
+
+        .chatlog__reference-link {
+            cursor: pointer;
+            color: @Themed("#b5b6b8", "#5f5f60");
+        }
+
+        .chatlog__reference-link * {
+            display: inline;
+            pointer-events: none;
+        }
+
+        .chatlog__reference-link:hover {
+            color: @Themed("#ffffff", "#2f3136");
+        }
+
+        .chatlog__reference-link:hover *:not(.spoiler-text) {
+            color: @Themed("#ffffff", "#2f3136");
+        }
+
+        .chatlog__reference-edited-timestamp {
+            margin-left: 0.25em;
+            font-size: 0.8em;
+            color: @Themed("rgba(255, 255, 255, 0.2)", "#747f8d");
+        }
+
+        .chatlog__author-avatar-container {
+            grid-column: 1;
+            width: 40px;
+            height: 40px;
+        }
+
+        .chatlog__author-avatar {
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+        }
+
+        .chatlog__messages {
+            grid-column: 2;
+            margin-left: 1.2em;
+            min-width: 50%;
+        }
+
+        .chatlog__author-name {
+            font-weight: @Themed("500", "600");
+            color: @Themed("#ffffff", "#2f3136");
+        }
+
+        .chatlog__timestamp {
+            margin-left: 0.3em;
+            font-size: 0.75em;
+            color: @Themed("rgba(255, 255, 255, 0.2)", "#747f8d");
+        }
+
+        .chatlog__message {
+            padding: 0.1em 0.3em;
+            margin: 0 -0.3em;
+            background-color: transparent;
+            transition: background-color 1s ease;
+        }
+
+        .chatlog__message--highlighted {
+            background-color: @Themed("rgba(114, 137, 218, 0.2)", "rgba(114, 137, 218, 0.2)");
+        }
 
+        .chatlog__message--pinned {
+            background-color: @Themed("rgba(249, 168, 37, 0.05)", "rgba(249, 168, 37, 0.05)");
+        }
+
+        .chatlog__content {
+            font-size: 0.95em;
+            word-wrap: break-word;
+        }
+
+        .chatlog__edited-timestamp {
+            margin-left: 0.15em;
+            font-size: 0.8em;
+        }
+
+        .chatlog__attachment {
+            display: inline-block;
+            position: relative;
+            margin-top: 0.3em;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+
+        .chatlog__attachment--hidden {
+            cursor: pointer;
+            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+        }
+
+        .chatlog__attachment--hidden * {
+            pointer-events: none;
+        }
+
+        .chatlog__attachment-spoiler-caption {
+            display: none;
+            z-index: 999;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            padding: 0.4em 0.8em;
+            background-color: rgba(0, 0, 0, 0.9);
+            border-radius: 20px;
+            color: #dcddde;
+            font-size: 0.9em;
+            font-weight: 600;
+            letter-spacing: 0.05em;
+        }
+
+        .chatlog__attachment--hidden .chatlog__attachment-spoiler-caption {
+            display: block;
+        }
+
+        .chatlog__attachment--hidden:hover .chatlog__attachment-spoiler-caption {
+            color: #fff;
+        }
+
+        .chatlog__attachment-media {
+            vertical-align: top;
+            max-width: 45vw;
+            max-height: 500px;
+            border-radius: 3px;
+        }
+
+        .chatlog__attachment--hidden .chatlog__attachment-media {
+            filter: blur(44px);
+        }
+
+        .chatlog__attachment-generic {
+            width: 100%;
+            max-width: 520px;
+            height: 40px;
+            padding: 10px;
+            background-color: @Themed("#2f3136", "#f2f3f5");
+            border: 1px solid @Themed("#292b2f", "#ebedef");
+            border-radius: 3px;
+            overflow: hidden;
+        }
+
+        .chatlog__attachment--hidden .chatlog__attachment-generic {
+            filter: blur(44px);
+        }
+
+        .chatlog__attachment-generic-icon {
+            float: left;
+            width: 30px;
+            height: 100%;
+            margin-right: 10px;
+        }
+
+        .chatlog__attachment-generic-size {
+            color: #72767d;
+            font-size: 12px;
+        }
+
+        .chatlog__attachment-generic-name {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .chatlog__edited-timestamp {
+            color: @Themed("rgba(255, 255, 255, 0.2)", "#747f8d");
+        }
+
+        .chatlog__embed {
+            display: flex;
+            margin-top: 0.3em;
+            max-width: 520px;
+        }
+
+        .chatlog__embed-color-pill {
+            flex-shrink: 0;
+            width: 0.25em;
+            border-top-left-radius: 3px;
+            border-bottom-left-radius: 3px;
+        }
+
+        .chatlog__embed-color-pill--default {
+            background-color: @Themed("#202225", "rgba(227, 229, 232, 1)");
+        }
+
+        .chatlog__embed-content-container {
+            display: flex;
+            flex-direction: column;
+            padding: 0.5em 0.6em;
+            background-color: @Themed("rgba(46, 48, 54, 0.3)", "rgba(249, 249, 249, 0.3)");
+            border: 1px solid @Themed("rgba(46, 48, 54, 0.6)", "rgba(204, 204, 204, 0.3)");
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+        }
+
+        .chatlog__embed-content {
+            display: flex;
+            width: 100%;
+        }
+
+        .chatlog__embed-text {
+            flex: 1;
+        }
+
+        .chatlog__embed-author {
+            display: flex;
+            margin-bottom: 0.3em;
+            align-items: center;
+        }
+
+        .chatlog__embed-author-icon {
+            margin-right: 0.5em;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+        }
+
+        .chatlog__embed-author-name {
+            font-size: 0.875em;
+            font-weight: 600;
+            color: @Themed("#ffffff", "#4f545c")
+        }
+
+        .chatlog__embed-author-name-link {
+            color: @Themed("#ffffff", "#4f545c");
+        }
+
+        .chatlog__embed-title {
+            margin-bottom: 0.2em;
+            font-size: 0.875em;
+            font-weight: 600;
+            color: @Themed("#ffffff", "#4f545c");
+        }
+
+        .chatlog__embed-description {
+            font-weight: 500;
+            font-size: 0.85em;
+            color: @Themed("#dcddde", "#2e3338");
+        }
+
+        .chatlog__embed-fields {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        .chatlog__embed-field {
+            flex: 0;
+            min-width: 100%;
+            max-width: 506px;
+            padding-top: 0.6em;
+            font-size: 0.875em;
+        }
+
+        .chatlog__embed-field--inline {
+            flex: 1;
+            flex-basis: auto;
+            min-width: 150px;
+        }
+
+        .chatlog__embed-field-name {
+            margin-bottom: 0.2em;
+            font-weight: 600;
+            color: @Themed("#ffffff", "#36393e");
+        }
+
+        .chatlog__embed-field-value {
+            font-weight: 500;
+            color: @Themed("#dcddde", "#2e3338");
+        }
+
+        .chatlog__embed-thumbnail {
+            flex: 0;
+            margin-left: 1.2em;
+            max-width: 80px;
+            max-height: 80px;
+            border-radius: 3px;
+        }
+
+        .chatlog__embed-image-container {
+            margin-top: 0.6em;
+        }
+
+        .chatlog__embed-image {
+            max-width: 500px;
+            max-height: 400px;
+            border-radius: 3px;
+        }
+
+        .chatlog__embed-footer {
+            margin-top: 0.6em;
+            color: @Themed("#dcddde", "#2e3338");
+        }
+
+        .chatlog__embed-footer-icon {
+            margin-right: 0.2em;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            vertical-align: middle;
+        }
+
+        .chatlog__embed-footer-text {
+            vertical-align: middle;
+            font-size: 0.75em;
+            font-weight: 500;
+        }
+
+        .chatlog__embed-youtube-container {
+            margin-top: 0.6em;
+        }
+
+        .chatlog__embed-youtube {
+            border: 0;
+            border-radius: 3px;
+        }
+
+        .chatlog__reactions {
+            display: flex;
+        }
+
+        .chatlog__reaction {
+            display: flex;
+            align-items: center;
+            margin: 0.35em 0.1em 0.1em 0.1em;
+            padding: 0.2em 0.35em;
+            background-color: @Themed("rgba(255, 255, 255, 0.05)", "rgba(79, 84, 92, 0.06)");
+            border-radius: 3px;
+        }
+
+        .chatlog__reaction-count {
+            min-width: 9px;
+            margin-left: 0.35em;
+            font-size: 0.875em;
+            color: @Themed("rgba(255, 255, 255, 0.3)", "#747f8d");
+        }
+
+        .chatlog__bot-tag {
+            position: relative;
+            top: -.2em;
+            margin-left: 0.3em;
+            padding: 0.05em 0.3em;
+            border-radius: 3px;
+            vertical-align: middle;
+            line-height: 1.3;
+            background: #5865F2;
+            color: #ffffff;
+            font-size: 0.625em;
+            font-weight: 500;
+        }
+
+        .postamble {
+            margin: 1.4em 0.3em 0.6em 0.3em;
+            padding: 1em;
+            border-top: 1px solid @Themed("rgba(255, 255, 255, 0.1)", "#eceeef");
+        }
+
+        .postamble__entry {
+            color: @Themed("#ffffff", "#2f3136");
+        }
+    </style>
+
+    @{/* Syntax highlighting */}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/solarized-@(Model.ThemeName.ToLowerInvariant()).min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
     <script>
@@ -28,6 +616,7 @@
         });
     </script>
 
+    @{/* Scripts */}
     <script>
         function scrollToMessage(event, id) {
             var element = document.getElementById('message-' + id);
@@ -49,18 +638,32 @@
         }
 
         function showSpoiler(event, element) {
-            if (element && element.classList.contains('spoiler--hidden')) {
+            if (element && element.classList.contains('spoiler-text--hidden')) {
                 event.preventDefault();
-                element.classList.remove('spoiler--hidden');
+                element.classList.remove('spoiler-text--hidden');
+            }
+            if (element && element.classList.contains('chatlog__attachment--hidden')) {
+                event.preventDefault();
+                element.classList.remove('chatlog__attachment--hidden');
             }
         }
     </script>
+
+    @{/* Icons */}
+    <svg style="display: none">
+        <symbol id="icon-attachment" viewBox="0 0 720 960">
+            <path fill="#f4f5fb" d="M50,935a25,25,0,0,1-25-25V50A25,25,0,0,1,50,25H519.6L695,201.32V910a25,25,0,0,1-25,25Z" />
+            <path fill="#7789c4" d="M509.21,50,670,211.63V910H50V50H509.21M530,0H50A50,50,0,0,0,0,50V910a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50h0V191Z" />
+            <path fill="#f4f5fb" d="M530,215a25,25,0,0,1-25-25V50a25,25,0,0,1,16.23-23.41L693.41,198.77A25,25,0,0,1,670,215Z" />
+            <path fill="#7789c4" d="M530,70.71,649.29,190H530V70.71M530,0a50,50,0,0,0-50,50V190a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50Z" />
+        </symbol>
+    </svg>
 </head>
 <body>
 
 <div class="preamble">
     <div class="preamble__guild-icon-container">
-        <img loading="lazy" class="preamble__guild-icon" src="@await ResolveUrlAsync(Model.ExportContext.Request.Guild.IconUrl)" alt="Guild icon">
+        <img class="preamble__guild-icon" src="@await ResolveUrlAsync(Model.ExportContext.Request.Guild.IconUrl)" alt="Guild icon" loading="lazy">
     </div>
     <div class="preamble__entries-container">
         <div class="preamble__entry">@Model.ExportContext.Request.Guild.Name</div>
@@ -91,4 +694,5 @@
     </div>
 </div>
 
+@{/* Preamble cuts off at this point */}
 <div class="chatlog">
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/StylesheetTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/StylesheetTemplate.cshtml
deleted file mode 100644
index 8b638bd..0000000
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/StylesheetTemplate.cshtml
+++ /dev/null
@@ -1,596 +0,0 @@
-@using System
-
-@namespace DiscordChatExporter.Core.Exporting.Writers.Html
-@inherits MiniRazor.TemplateBase<PreambleTemplateContext>
-
-@{
-    string Themed(string darkVariant, string lightVariant) =>
-        string.Equals(Model.ThemeName, "Dark", StringComparison.OrdinalIgnoreCase)
-            ? darkVariant
-            : lightVariant;
-}
-
-<style>
-    @@font-face {
-        font-family: Whitney;
-        src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-300.woff);
-        font-weight: 300;
-    }
-
-    @@font-face {
-        font-family: Whitney;
-        src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-400.woff);
-        font-weight: 400;
-    }
-
-    @@font-face {
-        font-family: Whitney;
-        src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-500.woff);
-        font-weight: 500;
-    }
-
-    @@font-face {
-        font-family: Whitney;
-        src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-600.woff);
-        font-weight: 600;
-    }
-
-    @@font-face {
-        font-family: Whitney;
-        src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-700.woff);
-        font-weight: 700;
-    }
-
-    body {
-        background-color: @Themed("#36393e", "#ffffff");
-        color: @Themed("#dcddde", "#23262a");
-        font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-size: 17px;
-        font-weight: @Themed("400", "500");
-    }
-
-    a {
-        color: @Themed("#00aff4", "#0068e0");
-        text-decoration: none;
-    }
-
-    a:hover {
-        text-decoration: underline;
-    }
-
-    img {
-        object-fit: contain;
-    }
-
-    .markdown {
-        max-width: 100%;
-        line-height: 1.3;
-        overflow-wrap: break-word;
-    }
-
-    .preserve-whitespace {
-        white-space: pre-wrap;
-    }
-
-    .spoiler {
-        display: inline-block;
-    }
-
-    .spoiler--hidden {
-        cursor: pointer;
-    }
-
-    .spoiler-text {
-        background-color: @Themed("rgba(255, 255, 255, 0.1)", "rgba(0, 0, 0, 0.1)");
-        border-radius: 3px;
-    }
-
-    .spoiler--hidden .spoiler-text {
-        background-color: @Themed("#202225", "#b9bbbe");
-        color: rgba(0, 0, 0, 0);
-    }
-
-    .spoiler--hidden:hover .spoiler-text {
-        background-color: @Themed("rgba(32, 34, 37, 0.8)", "rgba(185, 187, 190, 0.8)");
-    }
-
-    .spoiler--hidden .spoiler-text::selection {
-        color: rgba(0, 0, 0, 0);
-    }
-
-    .spoiler-image {
-        position: relative;
-        overflow: hidden;
-        border-radius: 3px;
-    }
-
-    .spoiler--hidden .spoiler-image {
-        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-    }
-
-    .spoiler--hidden .spoiler-image * {
-        filter: blur(44px);
-    }
-
-    .spoiler--hidden .spoiler-image:after {
-        content: "SPOILER";
-        color: #dcddde;
-        background-color: rgba(0, 0, 0, 0.6);
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        font-weight: 600;
-        padding: 100%;
-        border-radius: 20px;
-        letter-spacing: 0.05em;
-        font-size: 0.9em;
-    }
-
-    .spoiler--hidden:hover .spoiler-image:after {
-        color: #fff;
-        background-color: rgba(0, 0, 0, 0.9);
-    }
-
-    .quote {
-        margin: 0.1em 0;
-        padding-left: 0.6em;
-        border-left: 4px solid @Themed("#4f545c", "#c7ccd1");
-        border-radius: 3px;
-    }
-
-    .pre {
-        background-color: @Themed("#2f3136", "#f9f9f9") !important;
-        font-family: "Consolas", "Courier New", Courier, monospace;
-    }
-
-    .pre--multiline {
-        margin-top: 0.25em;
-        padding: 0.5em;
-        border: 2px solid @Themed("#282b30", "#f3f3f3") !important;
-        border-radius: 5px;
-        color: @Themed("#b9bbbe", "#657b83") !important;
-    }
-
-    .pre--inline {
-        padding: 2px;
-        border-radius: 3px;
-        font-size: 0.85em;
-    }
-
-    .mention {
-        border-radius: 3px;
-        padding: 0 2px;
-        color: #7289da;
-        background: rgba(114, 137, 218, .1);
-        font-weight: 500;
-    }
-
-    .emoji {
-        width: 1.325em;
-        height: 1.325em;
-        margin: 0 0.06em;
-        vertical-align: -0.4em;
-    }
-
-    .emoji--small {
-        width: 1em;
-        height: 1em;
-    }
-
-    .emoji--large {
-        width: 2.8em;
-        height: 2.8em;
-    }
-
-    .preamble {
-        display: grid;
-        margin: 0 0.3em 0.6em 0.3em;
-        max-width: 100%;
-        grid-template-columns: auto 1fr;
-    }
-
-    .preamble__guild-icon-container {
-        grid-column: 1;
-    }
-
-    .preamble__guild-icon {
-        max-width: 88px;
-        max-height: 88px;
-    }
-
-    .preamble__entries-container {
-        grid-column: 2;
-        margin-left: 0.6em;
-    }
-
-    .preamble__entry {
-        font-size: 1.4em;
-        color: @Themed("#ffffff", "#2f3136");
-    }
-
-    .preamble__entry--small {
-        font-size: 1em;
-    }
-
-    .chatlog {
-        max-width: 100%;
-    }
-
-    .chatlog__message-group {
-        display: grid;
-        margin: 0 0.6em;
-        padding: 0.9em 0;
-        border-top: 1px solid @Themed("rgba(255, 255, 255, 0.1)", "#eceeef");
-        grid-template-columns: auto 1fr;
-    }
-
-    .chatlog__reference-symbol {
-        grid-column: 1;
-        border: 2px 0 0 2px solid @Themed("#4f545c", "#c7ccd1");
-        border-radius: 8px 0 0 0;
-        margin-left: 16px;
-        margin-top: 8px;
-    }
-
-    .chatlog__reference {
-        display: flex;
-        grid-column: 2;
-        margin-left: 1.2em;
-        margin-bottom: 0.25em;
-        font-size: 0.875em;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        align-items: center;
-        color: @Themed("#b5b6b8", "#5f5f60");
-    }
-
-    .chatlog__reference-avatar {
-        border-radius: 50%;
-        height: 16px;
-        width: 16px;
-        margin-right: 0.25em;
-    }
-
-    .chatlog__reference-name {
-        margin-right: 0.25em;
-        font-weight: 600;
-    }
-
-    .chatlog__reference-link {
-        flex-grow: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        cursor: pointer;
-        color: @Themed("#b5b6b8", "#5f5f60");
-    }
-
-    .chatlog__reference-link:hover {
-        color: @Themed("#ffffff", "#2f3136");
-    }
-
-    .chatlog__reference-content>* {
-        display: inline;
-        pointer-events: none;
-    }
-
-    .chatlog__reference-content>a:hover {
-        text-decoration: none;
-    }
-
-    .chatlog__reference-edited-timestamp {
-        margin-left: 0.25em;
-        font-size: 0.8em;
-        color: @Themed("rgba(255, 255, 255, 0.2)", "#747f8d");
-    }
-
-    .chatlog__author-avatar-container {
-        grid-column: 1;
-        width: 40px;
-        height: 40px;
-    }
-
-    .chatlog__author-avatar {
-        border-radius: 50%;
-        height: 40px;
-        width: 40px;
-    }
-
-    .chatlog__messages {
-        grid-column: 2;
-        margin-left: 1.2em;
-        min-width: 50%;
-    }
-
-    .chatlog__author-name {
-        font-weight: @Themed("500", "600");
-        color: @Themed("#ffffff", "#2f3136");
-    }
-
-    .chatlog__timestamp {
-        margin-left: 0.3em;
-        font-size: 0.75em;
-        color: @Themed("rgba(255, 255, 255, 0.2)", "#747f8d");
-    }
-
-    .chatlog__message {
-        padding: 0.1em 0.3em;
-        margin: 0 -0.3em;
-        background-color: transparent;
-        transition: background-color 1s ease;
-    }
-
-    .chatlog__message--highlighted {
-        background-color: @Themed("rgba(114, 137, 218, 0.2)", "rgba(114, 137, 218, 0.2)") !important;
-    }
-
-    .chatlog__message--pinned {
-        background-color: @Themed("rgba(249, 168, 37, 0.05)", "rgba(249, 168, 37, 0.05)");
-    }
-
-    .chatlog__content {
-        font-size: 0.95em;
-        word-wrap: break-word;
-    }
-
-    .chatlog__edited-timestamp {
-        margin-left: 0.15em;
-        font-size: 0.8em;
-    }
-
-    .chatlog__attachment {
-        margin-top: 0.3em;
-    }
-
-    .chatlog__attachment-thumbnail {
-        vertical-align: top;
-        max-width: 45vw;
-        max-height: 500px;
-        border-radius: 3px;
-    }
-
-    .chatlog__attachment-container {
-        height: 40px;
-        width: 100%;
-        max-width: 520px;
-        padding: 10px;
-        background-color: @Themed("#2f3136", "#f2f3f5");
-        border: 1px solid @Themed("#292b2f", "#ebedef");
-        border-radius: 3px;
-        overflow: hidden;
-    }
-
-    .chatlog__attachment-icon {
-        float: left;
-        height: 100%;
-        margin-right: 10px;
-    }
-
-    .chatlog__attachment-icon>.a {
-        fill: #f4f5fb;
-        d: path("M50,935a25,25,0,0,1-25-25V50A25,25,0,0,1,50,25H519.6L695,201.32V910a25,25,0,0,1-25,25Z");
-    }
-
-    .chatlog__attachment-icon>.b {
-        fill: #7789c4;
-        d: path("M509.21,50,670,211.63V910H50V50H509.21M530,0H50A50,50,0,0,0,0,50V910a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50h0V191Z");
-    }
-
-    .chatlog__attachment-icon>.c {
-        fill: #f4f5fb;
-        d: path("M530,215a25,25,0,0,1-25-25V50a25,25,0,0,1,16.23-23.41L693.41,198.77A25,25,0,0,1,670,215Z");
-    }
-
-    .chatlog__attachment-icon>.d {
-        fill: #7789c4;
-        d: path("M530,70.71,649.29,190H530V70.71M530,0a50,50,0,0,0-50,50V190a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50Z");
-    }
-
-    .chatlog__attachment-filesize {
-        color: #72767d;
-        font-size: 12px;
-    }
-
-    .chatlog__attachment-filename {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    .chatlog__edited-timestamp {
-        color: @Themed("rgba(255, 255, 255, 0.2)", "#747f8d");
-    }
-
-    .chatlog__embed {
-        display: flex;
-        margin-top: 0.3em;
-        max-width: 520px;
-    }
-
-    .chatlog__embed-color-pill {
-        flex-shrink: 0;
-        width: 0.25em;
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-    }
-
-    .chatlog__embed-color-pill--default {
-        background-color: @Themed("#202225", "rgba(227, 229, 232, 1)");
-    }
-
-    .chatlog__embed-content-container {
-        display: flex;
-        flex-direction: column;
-        padding: 0.5em 0.6em;
-        background-color: @Themed("rgba(46, 48, 54, 0.3)", "rgba(249, 249, 249, 0.3)");
-        border: 1px solid @Themed("rgba(46, 48, 54, 0.6)", "rgba(204, 204, 204, 0.3)");
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-    }
-
-    .chatlog__embed-content {
-        display: flex;
-        width: 100%;
-    }
-
-    .chatlog__embed-text {
-        flex: 1;
-    }
-
-    .chatlog__embed-author {
-        display: flex;
-        margin-bottom: 0.3em;
-        align-items: center;
-    }
-
-    .chatlog__embed-author-icon {
-        margin-right: 0.5em;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-    }
-
-    .chatlog__embed-author-name {
-        font-size: 0.875em;
-        font-weight: 600;
-        color: @Themed("#ffffff", "#4f545c")
-    }
-
-    .chatlog__embed-author-name-link {
-        color: @Themed("#ffffff", "#4f545c");
-    }
-
-    .chatlog__embed-title {
-        margin-bottom: 0.2em;
-        font-size: 0.875em;
-        font-weight: 600;
-        color: @Themed("#ffffff", "#4f545c");
-    }
-
-    .chatlog__embed-description {
-        font-weight: 500;
-        font-size: 0.85em;
-        color: @Themed("#dcddde", "#2e3338");
-    }
-
-    .chatlog__embed-fields {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .chatlog__embed-field {
-        flex: 0;
-        min-width: 100%;
-        max-width: 506px;
-        padding-top: 0.6em;
-        font-size: 0.875em;
-    }
-
-    .chatlog__embed-field--inline {
-        flex: 1;
-        flex-basis: auto;
-        min-width: 150px;
-    }
-
-    .chatlog__embed-field-name {
-        margin-bottom: 0.2em;
-        font-weight: 600;
-        color: @Themed("#ffffff", "#36393e");
-    }
-
-    .chatlog__embed-field-value {
-        font-weight: 500;
-        color: @Themed("#dcddde", "#2e3338");
-    }
-
-    .chatlog__embed-thumbnail {
-        flex: 0;
-        margin-left: 1.2em;
-        max-width: 80px;
-        max-height: 80px;
-        border-radius: 3px;
-    }
-
-    .chatlog__embed-image-container {
-        margin-top: 0.6em;
-    }
-
-    .chatlog__embed-image {
-        max-width: 500px;
-        max-height: 400px;
-        border-radius: 3px;
-    }
-
-    .chatlog__embed-footer {
-        margin-top: 0.6em;
-        color: @Themed("#dcddde", "#2e3338");
-    }
-
-    .chatlog__embed-footer-icon {
-        margin-right: 0.2em;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        vertical-align: middle;
-    }
-
-    .chatlog__embed-footer-text {
-        vertical-align: middle;
-        font-size: 0.75em;
-        font-weight: 500;
-    }
-
-    .chatlog__embed-youtube-container {
-        margin-top: 0.6em;
-    }
-
-    .chatlog__embed-youtube {
-        border: 0;
-        border-radius: 3px;
-    }
-
-    .chatlog__reactions {
-        display: flex;
-    }
-
-    .chatlog__reaction {
-        display: flex;
-        align-items: center;
-        margin: 0.35em 0.1em 0.1em 0.1em;
-        padding: 0.2em 0.35em;
-        background-color: @Themed("rgba(255, 255, 255, 0.05)", "rgba(79, 84, 92, 0.06)");
-        border-radius: 3px;
-    }
-
-    .chatlog__reaction-count {
-        min-width: 9px;
-        margin-left: 0.35em;
-        font-size: 0.875em;
-        color: @Themed("rgba(255, 255, 255, 0.3)", "#747f8d");
-    }
-
-    .chatlog__bot-tag {
-        position: relative;
-        top: -.2em;
-        margin-left: 0.3em;
-        padding: 0.05em 0.3em;
-        border-radius: 3px;
-        vertical-align: middle;
-        line-height: 1.3;
-        background: #5865F2;
-        color: #ffffff;
-        font-size: 0.625em;
-        font-weight: 500;
-    }
-
-    .postamble {
-        margin: 1.4em 0.3em 0.6em 0.3em;
-        padding: 1em;
-        border-top: 1px solid @Themed("rgba(255, 255, 255, 0.1)", "#eceeef");
-    }
-
-    .postamble__entry {
-        color: @Themed("#ffffff", "#2f3136");
-    }
-</style>
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Exporting/Writers/MarkdownVisitors/HtmlMarkdownVisitor.cs b/DiscordChatExporter.Core/Exporting/Writers/MarkdownVisitors/HtmlMarkdownVisitor.cs
index 9f122e4..f6e1776 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/MarkdownVisitors/HtmlMarkdownVisitor.cs
+++ b/DiscordChatExporter.Core/Exporting/Writers/MarkdownVisitors/HtmlMarkdownVisitor.cs
@@ -39,7 +39,7 @@ namespace DiscordChatExporter.Core.Exporting.Writers.MarkdownVisitors
                 TextFormatting.Underline => ("<u>", "</u>"),
                 TextFormatting.Strikethrough => ("<s>", "</s>"),
                 TextFormatting.Spoiler => (
-                    "<span class=\"spoiler spoiler--hidden\" onclick=\"showSpoiler(event, this)\"><span class=\"spoiler-text\">", "</span></span>"),
+                    "<span class=\"spoiler-text spoiler-text--hidden\" onclick=\"showSpoiler(event, this)\">", "</span>"),
                 TextFormatting.Quote => ("<div class=\"quote\">", "</div>"),
                 _ => throw new ArgumentOutOfRangeException(nameof(formatted.Formatting))
             };
@@ -179,4 +179,4 @@ namespace DiscordChatExporter.Core.Exporting.Writers.MarkdownVisitors
             return buffer.ToString();
         }
     }
-}
+}
\ No newline at end of file