/* BASE HTML ELEMENTS */

nav
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 1000;
    font-size: 100%;
    height: 4%;
    width: 100%;
}

.spacer
{
    padding-top: 4.5vh;
}

body
{
    width: 100vw;
    margin: 0;
}

hr
{
    opacity: 0.5;
    width: 90%;
}

/* NAV BAR ELEMENTS */


#logo
{
    max-height: 3.5vh;
    margin-left: 10%;
    margin-top: 3%;
}

#title
{
    position: absolute;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    text-align: center;
    align-items: center;

    font-size: 1.7vw;
    left: 50%;
    transform: translateX(-50%);
}

#dateTime
{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;

    font-size: 1.7vw;
    margin-right: 5%;
}

#nav-buttons
{
    display: flex;
    align-items: center;
    justify-content: right;
    
    font-size: 1vw;
    width: 30%;
    height: 100%;
}

#lang-span
{
    display: inline-block;
    text-align: center;

    width: 6vh;
    height: 100%;
}

.language-toggle-btn
{
    box-sizing: border-box;
    font-size: 1.3vw;
    height: 100%;
    padding: 0.8vh 0.5vh;
    margin-right: 0.5vw;
}

#theme-toggle
{
    display: inline-flex;
    padding: 0;
}

#theme-icon
{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 1.5vw;
    height: 100%;
    margin-top: 30%;
    margin-right: 20%;
}

#login_button
{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;
    padding: 0 0.4vw;
    margin: 0 0.2vw;
}

.loginIcon
{
    width: 1.6vw;
    margin-top: 10%;
}

/* WEATHER STATION PANELS */

.station_name
{
    font-size: 1.42vw;
}

.coordinates
{
    white-space: nowrap;
    font-size: 0.8vw;
}

.timestamp
{
    white-space: nowrap;
    font-size: 0.8vw;
}

.main_box
{
    display: flex;
    justify-content: space-between;

    gap: 0.7vw;
    height: 1vw;
    padding: 0.7vw;
}

.station1,
.station2,
.station3,
.station4,
.station5,
.station6
{
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    height: 90vh;
    padding: 0.8vw;
}

#station_weatherInfo1,
#station_weatherInfo2,
#station_weatherInfo3,
#station_weatherInfo4,
#station_weatherInfo5,
#station_weatherInfo6
{
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    max-width: inherit;
    height: 90vh;
    width: 100%;
    margin-top: -2vw;
    margin-bottom: 10vh;
}


.station_panel1,
.station_panel2,
.station_panel3,
.station_panel4,
.station_panel5,
.station_panel6
{
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    max-width: inherit;
    height: 90vh;
    width: 100%;
}

.wind_panel
{
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    width: 100%;
    height: 5vw;
    margin-bottom: 6vw;
}

/* Compass */
.wind_panel svg
{
    width: 35vw;
    height: 35vw;
}

.compass-wrapper
{
    width: 35vw;
    height: 35vw;
    margin-top: -15vh;
}

.wind_header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    
    font-size: 1.2vw;
    gap: 0.4vw;
}

#wind_degrees1,
#wind_degrees2,
#wind_degrees3,
#wind_degrees4,
#wind_degrees5,
#wind_degrees6
{
    z-index: 2;
    font-size: 1.5vw;
    margin-top: -13vw;
    margin-bottom: 1vh;
}

#station_weatherData1,
#station_weatherData2,
#station_weatherData3,
#station_weatherData4,
#station_weatherData5,
#station_weatherData6
{
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    max-width: inherit;
    width: 100%;
    margin-top: -5vh;
    margin-bottom: -5vh;
}

.temp
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    font-size: 0.7vw;
    width: 14vw;
}

.temp img
{
    height: auto;
    width: 0.9vw;
}

.seatemp
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    font-size: 0.7vw;
    width: 14vw;
    margin-top: -0.5vw;
    margin-bottom: -0.5vw;
}

.seatemp img
{
    height: auto;
    width: 0.9vw;
}
.humidity
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    font-size: 0.7vw;
    width: 14vw;
    margin-top: -0.5vw;
    margin-bottom: -0.5vw;
}

.humidity img
{
    height: auto;
    width: 0.9vw;
}

.pressure
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    font-size: 0.7vw;
    width: 14vw;
}

.pressure img
{
    height: auto;
    width: 0.8vw;
}

#wind_icon
{
    height: auto;
    width: 0.8vw;
}

.speed
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    z-index: 1;
    font-size: 0.9vw;
    width: 14vw;
}

.speed img
{
    height: auto;
    width: 0.8vw;
}

.gust
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    z-index: 1;
    font-size: 0.85vw;
    width: 14vw;
    margin-top: -1.3vw;
}

.gust img
{
    height: auto;
    width: 0.8vw;
}

#top-separator
{
    margin-bottom: -5vh;
}

#bottom-separator
{
    margin-top: -0.5vh;
    margin-bottom: -1.5vh;
}

#wind_weatherData1,
#wind_weatherData2,
#wind_weatherData3,
#wind_weatherData4,
#wind_weatherData5,
#wind_weatherData6
{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    max-width: inherit;
    margin-top: 2vh;
}

@media (orientation: portrait)
{
    body
    {
        height: 80vh;
        margin: 0;
        padding: 0;
        /* overflow: hidden; */
    }


    .main_box
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        height: 50vw;
    }

    .station1,
    .station2,
    .station3,
    .station4,
    .station5,
    .station6
    {
        box-sizing: border-box;
        flex: 1 1 30%;
        height: 42vh;
        padding: 0;
        margin: 0;
    }

    #station_weatherInfo1,
    #station_weatherInfo2,
    #station_weatherInfo3,
    #station_weatherInfo4,
    #station_weatherInfo5,
    #station_weatherInfo6
    {
        z-index: 1;
        zoom: 1.6;
        font-size: 1vw;
        margin-top: 1vw;
    }


    #top-separator
    {
        opacity: 0;
        margin-bottom: 0.1vh;
    }

    .wind_panel
    {
        height: 5vh;
        width: 100%;
        margin-top: -4vh;
    }

    .wind_header
    {
        opacity: 0%;
    }

    /* COMPASS */
    .wind_panel svg
    {
        width: 40vh;
        height: 40vh;
        margin-top: 1vh;
        margin-bottom: -20vh;
    }

    .compass-wrapper
    {
        z-index: 2;
        width: 40vh;
        height: 40vh;
        margin-top: -22vh;
        margin-bottom: 2vh;
    }


    #wind_degrees1,
    #wind_degrees2,
    #wind_degrees3,
    #wind_degrees4,
    #wind_degrees5,
    #wind_degrees6
    {
        display: none;
        margin-top: 2vh;
    }

    #wind_weatherData1,
    #wind_weatherData2,
    #wind_weatherData3,
    #wind_weatherData4,
    #wind_weatherData5,
    #wind_weatherData6
    {
        margin-top: -1vh;
        margin-bottom: -1vw;
    }

    .speed
    {
        font-size: 2vw;
        width: 30vw;
        margin-top: 4vw;
    }

    .gust
    {
        font-size: 2vw;
        width: 30vw;
        margin-top: -5vw;
    }

    .speed img
    {
        display: none;
    }

    .gust img
    {
        display: none;
    }


    #bottom-separator
    {
        display: none;
    }

    #station_weatherData1,
    #station_weatherData2,
    #station_weatherData3,
    #station_weatherData4,
    #station_weatherData5,
    #station_weatherData6
    {
        display: none;
    }


}