/* ===== FONTS ===== */
@font-face {
   font-family: 'Roboto Serif';
   src: url('fonts/Roboto_Serif/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.ttf') format('truetype');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Roboto Serif';
   src: url('fonts/Roboto_Serif/RobotoSerif-Italic-VariableFont_GRAD,opsz,wdth,wght.ttf') format('truetype');
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
}

/* ===== CSS VARIABLES ===== */
:root {
   --text-color: #333;
   --background-color: #fff;
   --border-color: #333;
   --link-color: #478CDB;
   --shadow-color: rgba(0, 0, 0, 1.0);
   --shadow-hover-color: rgba(0, 0, 0, 0.85);
}

@media (prefers-color-scheme: dark) {
   :root {
      --text-color: #e0e0e0;
      --background-color: #1a1a1a;
      --border-color: #555;
      --link-color: #7bb3f0;
      --shadow-color: rgba(255, 255, 255, 0.1);
      --shadow-hover-color: rgba(255, 255, 255, 0.2);
   }
}

/* ===== BASE STYLES ===== */
html, body {
   height: 100%;
   margin: 0;
}

body {
   font-family: 'Roboto Serif', 'Times New Roman', Times, serif;
   margin: 0;
   padding: 0;
   color: var(--text-color);
   background-color: var(--background-color);
   display: flex;
   flex-direction: column;
}

/* ===== TYPOGRAPHY ===== */
p {
   font-size: 22px;
   line-height: 1.5em;
}

p > a {
   color: var(--link-color);
   text-decoration: none;
}

h2 {
   font-size: 28px;
   font-weight: normal;
}

.email-link {
   color: var(--text-color);
   text-decoration: underline;
}

.animated-underline {
   position: relative;
   text-decoration: none;
}

.animated-underline::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0%;
   height: 2px;
   background-color: currentColor;
   transition: width 0.3s ease;
}

.animated-underline:hover::after,
.animated-underline:active::after {
   width: 100%;
}

@media (prefers-reduced-motion: reduce) {
   .animated-underline::after {
      transition: none;
   }
}

/* ===== LAYOUT ===== */
header {
   border-bottom: 1px solid var(--border-color);
   margin: 0 50px;
   padding: 1em;
   text-align: center;
}

header > h1 {
   font-weight: normal;
   font-size: 48px;
}

header > a img {
   width: 24px;
   height: 24px;
   margin: 0 10px;
   vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
   header > a img {
      filter: invert(1);
   }
}

main {
   margin: 0 50px;
   padding: 1em;
   flex: 1;
}

footer {
   border-top: 1px solid var(--border-color);
   margin: 0 50px;
   padding: 1em;
   text-align: center;
}

footer p {
   margin: 0.2em 0;
   font-size: 14px;
}

/* ===== COMPONENTS ===== */
.articles {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   grid-auto-rows: 1fr;
   gap: 1em;
   margin-top: 1em;
   margin-bottom: 4em;
}

.paper-preview {
   border: 1px solid var(--border-color);
   border-radius: 2px;
   padding: 1em;
   display: grid;
   grid-template-rows: 1fr;
   gap: 0.5em;
   box-shadow: 2px 4px 0px var(--shadow-color);
}

.paper-preview:hover {
   box-shadow: 0px 8px 8px var(--shadow-hover-color);
   transform: translateY(-2px);
   transition: all 0.2s ease-in-out;
}

.paper-preview h3,
.paper-preview p {
   font-size: 17px;
   margin-top: .2em;
   margin-bottom: .2em;
}

.paper-preview a {
   display: block;
   height: 100%;
   text-decoration: none;
   color: inherit;
}

.paper-preview a:visited,
.paper-preview a:hover,
.paper-preview a:active {
   color: inherit;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
   header {
      margin: 0 20px;
   }
   
   header > h1 {
      font-size: 32px;
   }
   
   main {
      margin: 0 20px;
   }
   
   footer {
      margin: 0 20px;
   }
   
   p {
      font-size: 18px;
   }
   
   h2 {
      font-size: 24px;
   }
   
   .articles {
      grid-template-columns: 1fr;
      margin-bottom: 2em;
   }
   
   .paper-preview h3,
   .paper-preview p {
      font-size: 15px;
   }
}