/* CUSTOM FONTS */
/* Imports fonts from local folder */
@font-face {
    font-family: "Quiapo";
    src: url('https://jhe2158738.cisatscc.com/cis233-sp25/fonts/Quiapo/QuiapoFree2-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Quiapo Light";
    src: url('https://jhe2158738.cisatscc.com/cis233-sp25/fonts/Quiapo/QuiapoFree2-Light.otf') format('opentype');
    font-weight: lighter;
    font-style: normal;
}


/* RESETS SITE ELEMENTS STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* MAIN SITE BODY STYLES */
body{
    min-height: 100vh;
    background-color: rgb(247, 239, 229);
}


/* GENERAL TEXT TYPE STYLING */
h1 {
    font-family: 'Quiapo', 'Trebuchet MS', Arial, sans-serif;
    font-size: 3.4em;
    text-transform: uppercase;
    color: #880223;
}

h2 {
    text-align: left;
    font-family: 'Quiapo', 'Trebuchet MS', Arial, sans-serif;
    font-size: 3em;
    color: #880223;
    text-transform: uppercase;
}

h3 {
    font-family: 'Quiapo', 'Trebuchet MS', Arial, sans-serif;
    font-size: 2em;
    color: #880223;
    text-transform: uppercase;
}

h4 {
    font-family: 'Quiapo', 'Trebuchet MS', Arial, sans-serif;
    font-size: 1.4em;
    color: #880223;
    text-transform: uppercase;
}

.translation, p, span, strong, i {
    font-family: Helvetica, sans-serif;
}

.translation {
    font-weight: bold;
    font-style: italic;
}

label {
    padding-top: 30px;
    font-family: 'Quiapo', 'Trebuchet MS', Arial, sans-serif;
    font-size: 1.8em;
    color: #01407E;
}


/* GENERAL BUTTONS STYLING */
.page-buttons, input[type=submit] {
    border: solid #01407E 2px;
    border-radius: 8px;
    background-color: #fddf05;
    margin-top: 15px;
    padding: 10px 28px;
    display: inline-block;

    font-family: 'Quiapo', 'Trebuchet MS', Arial, sans-serif;
    font-size: 1.2em;
    color: #01407E;
    text-transform: uppercase;

    /*button animation*/
    transition: background-color 0.2s ease-in-out;
}

.page-buttons:hover, input[type=submit]:hover {
    background-color: #01407E;
    color: #fddf05;
}