/* 1. Define the font at the very top */
@font-face {
    font-family: 'Font';
    src: url('Font.ttf') format('truetype'); /* Fixed: 'ttf' changed to 'truetype' */
    font-display: swap;                      /* Optional but recommended for performance */
}


body {
            /* Sets a 10px thick, solid black border around the page */
    border: 4px solid #000000; 
            
           /* Removes default browser margins so the border touches the screen edges */
    margin: 0; 
            
            /* Ensures the border fills at least the entire height of the screen */
    min-height: 100vh; 
            
            /* Prevents the border from adding extra width/height to the page */
    box-sizing: border-box; 
}

/* 2. Apply the font to your elements below */
h1 {

    color: #20c20e;
    font-family: 'Font', sans-serif;         /* Added a fallback font just in case */

    text-shadow: 
    -2px -2px 0 #000,  
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;

}


h2 {
    margin-top: 2em !important;
    color: #20c20e;
    font-family: 'Font', sans-serif;         /* Added a fallback font just in case */

    text-shadow: 
    -2px -2px 0 #000,  
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;

}
p {

    color: #20c20e;
    font-family: 'Font', sans-serif;         /* Added a fallback font just in case */

    text-shadow: 
    -2px -2px 0 #000,  
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;

}




h5 {

    color: #20c20e;
    font-family: 'Font', sans-serif;         /* Added a fallback font just in case */

    text-shadow: 
    -2px -2px 0 #000,  
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}


a {
    margin: 12px;
    transition: 0.5s ease-in-out;
    background-color: black;
    color: #207216;
    font-family: 'Font', sans-serif;
    border-radius: 12px;
    border: none;
    display: inline-block;
    text-decoration: none;
    padding: 6px;
}

a:hover{

    color: #20c20e;
}

li{
    
    display: inline-block;
    margin-left: 0%;
    padding: 0%;
    list-style-position: inside;
    color: #20c20e;
    font-family: 'Font', sans-serif;         /* Added a fallback font just in case */
    text-shadow: 
    -2px -2px 0 #000,  
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}

ul{
    white-space: pre-line;
    padding: 0%;
    list-style-type: none;
}

.list-header {
    margin-top: 2em;
}

li+li {
    margin-top: 1.5em;
}

hr {
    width: 50%;
    height: 2px;
    background-color: #20c20e;
    border: none;
}

.different-hr {
    width: 65%;
    height: 3px;
    background-color: #20c20e;
    border: none;
}

.another-hr {
    width: 100%;
    height: 1px;
    background-color: #20c20e;
    border: #20c20e;
}