@font-face {
    font-family: 'Latin Modern Roman';
    src: url("fonts/Latin-Modern-Roman/lmroman10-regular.otf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Latin Modern Roman';
    src: url("fonts/Latin-Modern-Roman/lmroman10-bold.otf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Latin Modern Roman';
    src: url("fonts/Latin-Modern-Roman/lmroman10-italic.otf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Latin Modern Roman';
    src: url("fonts/Latin-Modern-Roman/lmroman10-bolditalic.otf");
    font-weight: 700;
    font-style: italic;
}

/* STIX Two Text - Variable font (supports weights 400-700 in one file) */
@font-face {
    font-family: 'STIX Two Text';
    src: url("fonts/STIX_Two_Text/STIXTwoText-VariableFont_wght.ttf") format('truetype');
    font-weight: 400 700;
    font-style: normal;
}

@font-face {
    font-family: 'STIX Two Text';
    src: url("fonts/STIX_Two_Text/STIXTwoText-Italic-VariableFont_wght.ttf") format('truetype');
    font-weight: 400 700;
    font-style: italic;
}

/* Libertinus Serif */
@font-face {
    font-family: 'Libertinus Serif';
    src: url("fonts/Libertinus_Serif/LibertinusSerif-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Libertinus Serif';
    src: url("fonts/Libertinus_Serif/LibertinusSerif-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Libertinus Serif';
    src: url("fonts/Libertinus_Serif/LibertinusSerif-Italic.ttf") format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Libertinus Serif';
    src: url("fonts/Libertinus_Serif/LibertinusSerif-BoldItalic.ttf") format('truetype');
    font-weight: 700;
    font-style: italic;
}


body {
    font-family: 'Latin Modern Roman', 'Libertinus Serif', 'STIX Two Text', 'Geist Mono', 'Source Serif 4', 'Times New Roman', Georgia, Times, serif;
    margin: 0 auto;
    padding: 20px;
    max-width: 600px;
    line-height: 1.6;
    color: #333;
    font-size: 18px;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

h3 {
    margin-bottom: 10px;
    font-size: 1.3em;
}

hr {
    margin: 40px 0;
    border: none;
    border-top: 2px solid #ddd;
}

ul {
    padding-left: 20px;
}

a {
     /* color: #1e88e5;  */
     /* color: #008100;  */
     color: #000dff;
     /* font-weight: bold; */
     /* background-color: rgb(248, 248, 248); */
     background-color: rgba(255, 255, 255, 0);
    text-decoration: none;
}

/* Mobile optimizations */
@media (max-width: 480px) {
    body {
    padding: 20px 15px;
    font-size: 16px;
    }
    
    h1 {
    font-size: 1.8em;
    }
}

.button {
    display: inline-block;
    border: 2px solid #626262;
    padding: 4px;
    border-radius: 4px;
    transition: 100ms;
}

table {
    border-collapse: collapse;
    border: 2px solid #333;
    text-align: center;
    /* tr: nth-child(even); */
}

th {
    border: 2px solid #333;
    padding: 5px;
}

td {
    border: 1px solid #333;
    padding: 5px;
}

tr {
    border: 2px solid #333;
}

img {
  width: 100%;
  height: auto;
}
video {
  width: 100%;
  height: auto;
}