body { 
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    background-color:var(--clr-navy-blue);
}

:root {
    --primary-color: #6D4C3D; /* A shade of blue */
    --secondary-color: #2ecc71; /* A shade of green */
    --accent-color: #e74c3c; /* A shade of red */
    --text-color-afWhite: #E8E9EB; /* Dark gray for text */
    --text-color-alabaster: #E0DFD5;
    --background-color: #f4f4f4; /* Light gray for background */
    --clr-dun: #DCC9B6;
    --clr-coffee: #6D4C3D;
    --clr-lion: #A39171;
    --clr-ash-gray: #ABC4AB;
    --clr-reseda-green: #727D71;
    --clr-navy-blue: #242F40;
}

header { 
    text-align:center; 
    color:var(--text-color-alabaster);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Use 100vh to fill the viewable height */
}

header > div {
    padding:0;
    display:inline-flex;
    flex-wrap: wrap;
}

header > div > span {
    font-size: calc(10vh - 10px); /* Adjust this value to control the size of the letters */
    line-height: 1;
    cursor:pointer;
}

/* Media Query for Mobile Viewports - PORTRAIT */
@media screen and (orientation: portrait) and (max-width: 1024px) {
    header > div {
        flex-direction: column;
        text-align: center;
    }
    header > div > span {
        font-size: calc(15vh - 10px); /* Adjust this value to control the size of the letters in column format */
    }

    body { 
        overflow-y:hidden;
    }
    
}

/* Media Query for Mobile Viewports - LANDSCAPE */
@media screen and (orientation: landscape) and (max-width: 1024px) {
    header > div {
        flex-direction: row;
        text-align: center;
    }
    header > div > span {
        font-size: calc(10vh - 10px); /* Adjust this value to control the size of the letters in row format */
    }
    
}

.hidden { display: none; }