/* ==========================================================================
   LOCAL FONT LOADING (Bypasses all CORB and CSP Blocks)
   ========================================================================== */
@font-face {
    font-family: 'Platypi';
    src: url('Platypi-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800; /* Supports the entire weight range locally */
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   DESIGN CONTROLS
   ========================================================================== */
:root {
    /* TO CHANGE THE WEIGHT: Switch between 700 and 800 here */
    --highlight-weight: 800;

    /* Font Sizes */
    --highlight1-size: 14px;
    --highlight2-size: 14px;
    --highlight3-size: 14px;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.update-date {
    position: fixed;
    bottom: 11px;
    left: 11px;
    font-size: 11px;
    color: #555;
    font-family: sans-serif; /* Standard fallback to avoid font errors */
    z-index: 1000;
}

/* Body Styling */
body {
    font-family: sans-serif;
    font-weight: 500;
    color: #333;
    line-height: 1.6;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    padding: 0 100px;
}

/* Logo */
.logo {
    position: absolute;
    top: 41px;
    left: 21px;
    z-index: 10;
}

.logo img {
    width: 135px;
    height: auto;
}

/* Main container */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    height: 100%;
}

/* Dot Styling */
.dot {
    font-size: 38px;
    margin-bottom: 0px;
}

/* Content Styling */
.content {
    max-width: 900px;
    text-align: left;
    padding-top: 10px;
}

/* Center content in the middle */
body .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Paragraph Styling */
.content p {
    font-size: 14px;
    margin-bottom: 20px;
}

/* ==========================================================================
   HIGHLIGHTS (Points directly to your locally hosted font file)
   ========================================================================== */
.highlight1, .highlight2, .highlight3 {
    font-family: 'Platypi', serif !important;
    font-style: italic !important;
    font-synthesis: none !important;
    
    font-weight: var(--highlight-weight) !important;
    font-variation-settings: "wght" var(--highlight-weight), "ital" 1 !important;
}

.highlight1 { 
    color: #ea6a15; 
    font-size: var(--highlight1-size) !important;
}

.highlight2 { 
    color: #10a24b; 
    font-size: var(--highlight2-size) !important;
}

.highlight3 { 
    color: #970F74; 
    font-size: var(--highlight3-size) !important;
}

.highlight4 {
    color: #FF9933;
}

/* Email link */
a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #0000FF;
}

/* Responsive Design */
@media (min-width: 768px) {
    .logo { left: 60px; }
}

@media (max-width: 1024px) {
    body { padding: 0 50px; }
    .content { padding-top: 200px; }
}

@media (max-width: 768px) {
    .logo img { width: 100px; }
    body { padding: 0 20px; }
    .content { padding-top: 180px; }
    .content p { font-size: 16px; }
}

@media (max-width: 480px) {
    .logo { left: 11px; }
    .logo img { width: 100px; }
    body { padding: 0 10px; }
    .content { padding-top: 160px; }
    .content p { font-size: 14px; }
}