/*
Sections in this CSS:
Fonts
Header Style
Footer Style
Default Button Style
Back Button Style
Media Queries
*/

/* Fonts */
@font-face {
    font-family: 'KeepCalm'; /* Give your custom font a name */
    src: url('KeepCalm-Medium.ttf') format('truetype'), /* Specify the path to your font files */
  }
  
/* Apply the custom font to elements */
body {
    font-family: 'KeepCalm', Arial, sans-serif; /* Use your custom font as the primary font family, fallback to Arial if it's not available */
    margin: 0;
    padding-top: 60px;
    padding-bottom: 75px; /* Adjust the value as needed */
}

/* Header */
header {
    position: fixed;
    top: 0;
    background-color: black; /* Set the background color to black */
    width: 100%; /* Make the header span the full width of the page */
    height: 60px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a drop shadow */
}

.headerbuttonnotselected {
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Align items horizontally */
    width: auto;
    height:  100%;
    background-color: #ffffff00; /* Set background color */
    float: right;
    padding-right: 24px;
    filter:brightness(5)
}

.headerbuttonnotselected:hover img {
    filter: brightness(0.3);
}

.headerbuttonnotselected img {
    vertical-align: middle; /* Align the image vertically */
    height: 24px;
}

.headerbuttonselected {
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Align items horizontally */
    width: auto;
    height:  100%;
    background-color: #ffffff00; /* Set background color */
    float: right;
    padding-right: 24px;
    filter:brightness(5)
}

.headerbuttonselected img {
    vertical-align: middle; /* Align the image vertically */
    height: 24px;
}

/* Default Button */
button {
    display: block;
    width: 80%;
    max-width: 400px;
    margin: 15px auto;
    padding: 15px;
    background-color: #000000;
    color: white;
    font-family: 'KeepCalm', Arial, sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

button:hover {
    background-color: #808080;
}

button:disabled, button:disabled:hover {
    background-color: #cccccc; /* Keeps the background color for disabled state */
    color: #666666; /* Keeps the text color for disabled state */
    cursor: not-allowed; /* Keeps the cursor style for disabled state */
}


/* Back Button */
.back-button img {
    padding: 20px;
    cursor: pointer;
    width: 20px;
}


.back-button img:hover {
    filter: brightness(80%);
}

/*Experimental*/
/* Default styles for mobile view */
.main {
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
}

.info-container, .button-container {
    width: 100%; /* Full width on small screens */
}


button {
    /* Styles for buttons */
    margin-bottom: 10px;
    /* Other styles */
}

/* Media query for larger screens */
@media screen and (min-width: 1024px) {
    button {
        font-size: 1vw;
        padding: 1.2vw;
        border-radius: 1.5vw;
    }


}