/* Font Face Declarations */
@font-face {
    font-family: Dokdo;
    src: url(fonts/Dokdo-Regular.ttf);
}
@font-face {
    font-family: Sister;
    src: url(fonts/LoveYaLikeASister-Regular.ttf);
}
@font-face {
    font-family: Nothing;
    src: url(fonts/BitcountPropSingle-VariableFont_CRSV\,ELSH\,ELXP\,slnt\,wght.ttf);
}
@font-face {
    font-family: compacta;
    src: url(fonts/compacta.ttf);
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Roboto Mono', monospace;
    background-color: rgb(0, 0, 0);
    color: white;
    min-height: 100vh;
    overflow-x: hidden;
    opacity: 0;
    animation: fadein 2s forwards;
}

@keyframes fadein {
    to { opacity: 1; }
}

/* Custom Scrollbar */
body::-webkit-scrollbar { width: 2px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background-color: white; border-radius: 20px; }
body::-webkit-scrollbar:hover { width: 6px; }

/* Typography */
span {
    color: #F6A400;
}

p {
    color: #FFFFFF;
    font-size: 25px;
    text-align: center;
    margin: 15px;
    max-width: 100%;
}

hr {
    border: 0;
    height: 1px;
    background-color: #FFFFFF;
    width: 80%;
    max-width: 600px;
    opacity: 0.3;
    margin: 0 auto;
}

a {
    color: #D74F6C;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover { color: #F6A400; }

figcaption { display: none; } /* Accessibility for screen readers */

/* Header & Navigation */
#home .heading1 {
    display: flex;
    justify-content: center;
    padding: 20px 10px;
    background-color: rgba(0, 0, 0, 0.75);
    width: 100%;
}

#parabola {
    width: 75vw;
    max-width: 300px;
    height: auto;
    margin-top: 100px;
    margin-bottom: 0;
}

.menu {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.menu a {
    font-size: 18px;
    padding: 5px 10px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.menu a:hover {
    color: #a480d9;
    transform: scale(1.1);
}
.menu a.active-link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


/* Content Sections */
#projects, #contacts, .blogs, #posts-container {
    margin-top: 20px;
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: black;
}

.blogs h1, #post-content-container h1 {
    font-size: 24.4px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
    color:#D74F6C;
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 20px;
}

.about p { font-size: 18px; width: 90%; text-align: center; }
.blogtext { font-size: 18px; text-align: center; font-weight: 300; }
#RefractionLogo { width: 75vw; max-width: 300px; height: auto; margin: 10px 0 20px 0; }
#RefractionLogo:hover { cursor: pointer; }

/* Iframe (YouTube) */
iframe {
    width: 100%;
    max-width: 350px;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 23px;
    border: none;
    margin: 15px;
}

/* Project Specific */
.firstproject {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 600px;
    padding: 20px;
}
.firstproject p { font-size: 18px; width: 80%; font-weight: 200; text-align: center; }
.firstproject img { width: 280px; max-width: 300px; }
#projects a h1 { color: #4F8ED7; margin: 30px 0 20px 0; font-weight: 600; }

/* Contact Specific */
.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
}
.contacth1 { font-size: 30px; font-family: 'Courier Prime', monospace; font-weight: 200; }
.contactext { font-size: 18px; width: 90%; }
.con1 { display: flex; flex-direction: column; font-size: 18px; gap: 7px; }

/* Style for the divider between posts on the homepage */
.post-divider {
    width: 70%;
    max-width: 700px; /* Match the content container width */
    margin: 40px auto; /* Add vertical spacing */
    border: 0;
    height: 1px;
    background-color: #FFFFFF;
    opacity: 0.2;
}

/* NEW styles for blog post previews */
.post-date {
    font-size: 12px !important; /* Use !important to override generic p styles if needed */
    margin: 0 0 20px 0 !important;
}

.post-preview-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    max-width: 500px; /* Control max size of the image container */
    margin-bottom: 20px;
    border-radius: 15px; /* Rounded corners for the container */
    overflow: hidden; /* Ensures the image respects the container's border radius */
}

.post-preview-image-container img {
    width: 100%;
    height: auto;
    display: block; /* Removes any bottom spacing on the image */
}

.read-more-link {
    display: inline-block; /* Allows for margin and better spacing */
    margin-top: 15px;
}


/* ========================================================= */
/* Media Queries for Tablet and Desktop Screens */
/* ========================================================= */

/* Tablets and Up (min-width: 768px) */
@media (min-width: 768px) {
    p { font-size: 28px; margin: 20px; }
    hr { width: 600px; }
    .menu { margin-top: 120px; gap: 25px; }
    .menu a { font-size: 24px; }
    #home .heading1 { margin: 160px auto 0 auto; padding: 40px 10px; max-width: 600px; }
    #parabola { width: 700px; max-width: 700px; margin-top: 0; }
    #RefractionLogo { width: 400px; max-width: 400px; }
    .blogs, #post-content-container { max-width: 600px; padding: 0; }
    .blogs h1, #post-content-container h1 { font-size: 30px; }
    iframe { max-width: 600px; }
    .firstproject { flex-direction: row; }
    #posts-container { margin-top: 0; }
}

/* Large Desktops (min-width: 1200px) */
@media (min-width: 1200px) {
    #home .heading1 { max-width: 700px; font-size: 80px; }
    #projects, #contacts, .blogs, #posts-container { max-width: 700px; }
    #posts-container { margin-top: 0; }
    #RefractionLogo { width: 450px; }
    #parabola { width: 600px; }
    .blogs h1, #post-content-container h1 { margin-top: 50px; }
    .firstproject { max-width: 700px; gap: 35px; }
    .firstproject p { font-size: 17px; max-width: 48%; }
    .blogtext { width: 88%; }
}