@font-face {
    font-family: 'sf_pro_displayregular';
    src: url('../fonts/sf-pro-display/webfontkit-20240821-034056/sfprodisplayregular.woff2') format('woff2'),
         url('../fonts/sf-pro-display/webfontkit-20240821-034056/sfprodisplayregular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'league_spartanbold';
    src: url('../fonts/league-spartan/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../fonts/league-spartan/leaguespartan-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    font-family: 'sf_pro_displayregular';
    text-transform: uppercase;
    font-size: 13px;
    color:#333;
  }


.properties {
background-color: #ffffff;
color:#000000;
padding: 25px;
text-transform: capitalize;
font-family: 'league_spartanbold';
text-align: center;
justify-content: center;
align-items: center;
}

.properties p {
    margin: 8px;
    display: inline-block;
}


.p1 {
    font-family:'sf_pro_displayregular' ;
    text-transform: uppercase;
}

h1 { 
    font-family: 'league_spartanbold';
    font-size: 13px;
    font-weight: 100;
}

/* Main content styling
main {

}
/* Time container styling
.time-container {
}

/* Individual time block styling
.time {
}

/* City info styling
.city-info {
}

/* Timezone styling
.timezone {
}

/* City time styling
.city-time {
}

/* City name styling */
.city-name {
    font-weight: bold;
}


.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styling for the login form */
.login-form {
    background: #ffffff; 
    padding: 20px;
    width: 100%;
    text-align: center;
    border: 0.5px solid #d6d6d6;
}


/* Form title styling */
.login-form h1 {
    margin-bottom: 20px;
    font-size: 1.8em;
}

/* Form group styling */
.form-group {
    margin-bottom: 15px;
    text-align: center;
}

/* Label styling */
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 1em;
}

/* Input field styling */
.form-group input {
    width: 50%;
    padding: 10px;
    border: 0.5px solid #aeaeae;
    border-radius: 4px;
    background: #fff;
    color: black;
    font-size: 1em;
}

/* Button styling */
button {
    width: 25%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background: #f7f7f7;
    color: #333;
    font-size: 1em;
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'league_spartanbold';
    font-weight: 100;
}

/* Button hover effect */
button:hover {
    background: #f0efef5c;
}

/* footer */

footer {
    background: #000000;
    color: #d4d4d4;
    text-align: center;
    padding: 30px;

}

footer a {
    color: #d4d4d4;
    text-decoration: none;
}

.outlook-link:hover {
    color: #7d7d7d;
}


@media screen and (min-width: 715px) {
    .flex-container {
        display: flex; /* Enables Flexbox on the container */
        justify-content: space-between; /* Distributes space between items */
        align-items: center;
        flex: 1; 
        background-color: #ffffff;
        border: 0px solid #e9e9e9;
    }
    
    .flex {
        background-color: #aeaeae;
        border: -0.7px solid #aeaeae;
        flex: 1; /* Optional: Makes items flexible and grow equally */
    
    }

    .properties {
        background-color: #ffffff;
        align-items: center;
        justify-content: center;
        border: 0px;
    }

    .properties p {
        margin: 4px;

    }

    .login-form {
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-left: 0px;
    }
    footer p { 
        font-size: 8px;
    }

    h1 { 
        font-size: 13px;
    }

    /* City time styling*/
.city-time {
    font-size: 8px;
}

/* City name styling */
.city-name {
    font-size: 8px;
}
    }