body {
    font-family: ubuntu-regular;
    /*font-size: 26px;*/
    margin: 0;
    overflow: hidden;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 1080px;
    max-height: 1080px;
}

.container {
    display: flex; 
}

#top{
    /*margin-bottom: 1em;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#logo_aca {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#bottom {
    margin-bottom: Opx;
    padding: 0.2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #947d52;
    align-items: center;
    color: black;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*align-items: center;*/
    flex-grow:1;
    min-height: 1080px;
    max-height: 1080px;
}

#left, #center, #right {
    flex-direction: column;
    align-items: stretch;
}

#left, #right {
    justify-content: flex-start;
}

#left {
    background-color: #947d52;
    display: flex;
    width: 150px;
    flex-direction: column; /* Organisation verticale */
    /*align-items: flex-start; /* Aligne les éléments sur la gauche */
    padding: 1em;
    gap: 1em; /* Espace entre les éléments */
}

#left > div {
    margin-bottom: 1em; /* Espacement supplémentaire entre les blocs */
}

#center {
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 0.2em;
}


#title, #date {
    font-family: ubuntu-light;
    font-size: 190%;
    /*color: black;*/
}

#date {
    font-size: 40px;
    /*color: black;*/
}




#logo img {
    width: 150px;
    /*margin-top: 0.5em;
    margin-left: 0.5em;*/
}
#logo:hover {
    cursor: pointer;
}
#title {
    /*text-transform: uppercase;*/
    color: black;
    font-family: ubuntu-medium;
    /*background-color: #947d52;*/
    /*height: 1.5em;
    padding: 0.5em;*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#mainTitle {
    color: black;
    font-family: ubuntu-bold;
    font-size: 50px;
    /*margin-top: 20px;*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#mainBloc {
    /*margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#mainImage {
    /*max-height: 100px;*/
    /*-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;*/
}

#mainImage img {
    max-height: 1100px;
    max-width: 1700px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#mainText {
    margin-left: 20px;
    color: black;
    font-family: ubuntu-light;
    font-size: 40px;
    text-align: justify;
    max-height: 600px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#city{
    font-family: ubuntu-medium  ;
    font-size: 190%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /*color: black;*/
}

#datetime {
    padding-top: 50px;
    align-items: center;
    display: flex;
    flex-flow: column;
}
#date {
    font-family: ubuntu-medium  ;
    font-size: 20px;
    /*color: black;*/
}

#time {
    font-family: ubuntu-medium  ;
    font-size: 40px;
}

.temp, .text {
    font-family: ubuntu-light;
    font-size: 30px;
    /*color: black;*/
}
.text {
    font-size: 30px;
    text-transform: uppercase;
}


.weatherData {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.icon {
    display: inline-block;
    vertical-align: middle;
    /*margin: -3px 12px 0 0;*/
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

.icon.bigger {
    width: 100px;
    height: 100px;
}

.day {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
@font-face {
    font-family: ubuntu-light;
    src: url(../font/Ubuntu/Ubuntu-Light.ttf);
}

@font-face {
    font-family: ubuntu-regular;
    src: url(../font/Ubuntu/Ubuntu-Regular.ttf);
}

@font-face {
    font-family: ubuntu-medium;
    src: url(../font/Ubuntu/Ubuntu-Medium.ttf);
}

@font-face {
    font-family: ubuntu-bold;
    src: url(../font/Ubuntu/Ubuntu-Bold.ttf);
}