html, body { background-color: #fcfcfc; }

div#container { padding: 50px; margin-top: 160px; }

a, a:hover, a:visited, a:focus { color: #1a0e3a; text-decoration: none; }

a.nav-link, a.nav-link:hover, a.nav-link:visited, a.nav-link:focus { color: #1a0e3a; text-decoration: none; }

div#about { padding: 240px; padding-top: 150px; padding-bottom: 150px; color: black; }

code.language-plaintext, code.highlighter-rouge { color: gray; }

img { width: 100%; }

div.sketchfab-embed-wrapper { width: 100%; }

iframe { width: 100%; }

.highlight { background-color: #272822; }

.highlight .hll { background-color: #49483e; }

.highlight .c { color: #a8a38d; }

.highlight .err { color: #960050; background-color: #1e0010; }

.highlight .k { color: #66d9ef; }

.highlight .l { color: #ae81ff; }

.highlight .n { color: #f8f8f2; }

.highlight .o { color: #f92672; }

.highlight .p { color: #f8f8f2; }

.highlight .cm, .highlight .cp, .highlight .c1, .highlight .cs { color: #a8a38d; }

.highlight .ge { font-style: italic; }

.highlight .gs { font-weight: bold; }

.highlight .kc, .highlight .kd { color: #66d9ef; }

.highlight .kn { color: #f92672; }

.highlight .kp, .highlight .kr, .highlight .kt { color: #66d9ef; }

.highlight .ld { color: #e6db74; }

.highlight .m { color: #ae81ff; }

.highlight .s { color: #e6db74; }

.highlight .na { color: #a6e22e; }

.highlight .nb { color: #f8f8f2; }

.highlight .nc { color: #a6e22e; }

.highlight .no { color: #66d9ef; }

.highlight .nd { color: #a6e22e; }

.highlight .ni { color: #f8f8f2; }

.highlight .ne, .highlight .nf { color: #a6e22e; }

.highlight .nl, .highlight .nn { color: #f8f8f2; }

.highlight .nx { color: #a6e22e; }

.highlight .py { color: #f8f8f2; }

.highlight .nt { color: #f92672; }

.highlight .nv { color: #f8f8f2; }

.highlight .ow { color: #f92672; }

.highlight .w { color: #f8f8f2; }

.highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo { color: #ae81ff; }

.highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2 { color: #e6db74; }

.highlight .se { color: #ae81ff; }

.highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { color: #e6db74; }

.highlight .bp, .highlight .vc, .highlight .vg, .highlight .vi { color: #f8f8f2; }

.highlight .il { color: #ae81ff; }

.highlight .gu { color: #75715e; }

.highlight .gd { color: #f92672; }

.highlight .gi { color: #a6e22e; }

code { background-color: "#282C34"; color: whitesmoke; }

pre { background-color: "#282C34"; color: whitesmoke; }

div.highlighter-rouge { margin-bottom: 15px; }

div.highlight { padding: 20px; border-radius: 4px; }

img#logo { width: 230px; }

.card-wrapper { margin: 10px; width: 100%; }

.card-body { height: 10em; }

.blog-post { text-align: justify; }

footer { text-align: center; padding-bottom: 15px; }

.post-picture { width: 100%; }

.title { padding: 20px; }

.image-container { position: relative; display: inline-block; }

.image-container img { display: block; width: 100%; /* Adjust as needed */ height: auto; }

.image-container .title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.75); /* White with 50% opacity */ color: #000; /* Text color, adjust as needed */ display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }

.image-container:hover .title { opacity: 1; }

/* Define the keyframes for the flip animation */
@keyframes flip { 0% { transform: scaleX(1);
    /* Start with normal scale */ }
  50% { transform: scaleX(0);
    /* Flip the image horizontally */ }
  100% { transform: scaleX(1);
    /* Return to normal scale */ } }

/* Apply the flip animation to the image */
.flip-image { animation: flip 1s ease-in-out; /* Smooth transition over 1 second */ }

/* Hide the image initially, then show it when the animation ends */
.flip-image.hide { display: none; }

/* Show the image after the animation ends */
.flip-image.show { display: block; }

/* Media queries for different screen sizes */
@media screen and (max-width: 768px) { /* Adjust animation for smaller screens */ .flip-image { animation-duration: 0.5s; /* Shorter duration for smaller screens */ } }

@media screen and (min-width: 1200px) { /* Adjust animation for larger screens */ .flip-image { animation-duration: 1.5s; /* Longer duration for larger screens */ } }

/*# sourceMappingURL=styles.css.map */