/* 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 */
}

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

    color: #6441a5;
    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 {

    transition: 0.5s ease-in-out;
    color: #6441a5;
    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;

     display: inline-block;

}

h2:hover{

    color: #20c20e;
}

p {

    color: #6441a5;
    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;

}
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; 
}

button {
    clear: right;
    background-color: black;
    color: #6441a5;
    font-family: 'Font', sans-serif;
    border-radius: 12px;
    border: none;
    display: inline-block;
}

h5 {

    color: #6441a5;
    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;
}



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



.twitch-button {
    margin: 0px;
    transition: 0.5s ease-in-out;
    background-color: rgba(0, 0, 0, 0);
    color: #3f2968;
    font-family: 'Font', sans-serif;
    border-radius: 12px;
    border: none;
    display: inline-block;
    text-decoration: none;
    padding: 0px;
}

a:hover{

    color: #6441a5;
}