body{
    background-color: black;
    color: white;
}

:root{
    --cellPhone-color:  rgb(64, 59, 59);

    --cellPhone-screen-width : 300px;
    --cellPhone-screen-height : 600px;


    --cellPhone-dark1: rgb(15,20,26);
    --cellPhone-dark2: rgb(27, 32, 38);

    --cellPhone-gray: darkgray;
}



#cellPhone-container  {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 5%;
    height: 630px;

}

#cellPhone{
    border: black solid 2px;
    border-radius: 25px;
    background-color: var(--cellPhone-color);
    color: white;
    width:300px;
    height: 100%;
    padding: 10px;
    text-wrap: wrap;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cellPhone-screen{
    background-color: gray;
    width:var(--cellPhone-screen-width);
    height:var(--cellPhone-screen-height);
    border: black solid 2px;
    border-radius: 25px;
    margin-top: 1px;
}

#cellPhone-menu{
    display: flex;
    flex-direction: row;
}

#cellPhone-home, #cellPhone-back, #cellPhone-left{
    background-color: var(--cellPhone-color);
    width:25px;
    height: 25px;
    cursor: pointer;
    margin-left: 30px;
    margin-right: 30px;
}

#cellPhone-home-page{
    background-image: url("src/wallpaper.jpg");
    background-size: var(--cellPhone-screen-width) var(--cellPhone-screen-height);
    justify-content: center;
    align-items: center;
    display: flex;
}

.cellPhone-page{
    border-radius: 25px;
    width: 100%;
    height: 100%;
    display: none;
    background-color: blue;
    
}

.cellPhone-app-icon{
    width: 50px;
    height: 50px;
    margin-left: 15px;
    margin-right: 15px;
    cursor: pointer;
    border-radius: 13px;
    user-select: none;
}

.cellPhone-app{
    display: flex;
    flex-direction: column;
    justify-content: center;

}

#cellPhone-home-app-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 90%;
    height: 100%;
}

.cellPhone-app-name{
    text-align: center;
    font-size: 0.9em;
    cursor: default;
    user-select: none;
}

#cellPhone-mails1-page, #cellPhone-mails2-page, #cellPhone-SMS1-page, #cellPhone-SMS2-page{
    align-items: center;
    background-color: var(--cellPhone-dark2);
    overflow-y:scroll;
    flex-direction: column;
}

.cellPhone-mail-container{
    width: 95%;
    min-height: 95px;
    background-color: var(--cellPhone-dark1);
    border-radius: 3px;
    margin-bottom: 3px;
    font-size: 17px;
    font-family: 'Courier New', Courier, monospace;
    user-select: none;
    cursor: pointer;


}

.cellPhone-mail-content{
    overflow:hidden;
    height: 20px;
}

#cellPhone-mail-title{
    margin-bottom: 50px;
    margin-top: 30px;
    font-size: 1.2em;
}

.cellPhone-mail-sender, .cellPhone-mail-object{
    margin-bottom: 5px;
    
}

body{
    scrollbar-width: 0px;
}

.cellPhone-mail-header{
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
}

#cellPhone-mail-zone{
    display: flex;
    flex-direction: column-reverse;
}

#cellPhone-mail2-container{
    background-color: var(--cellPhone-dark1);
    width:95%;
    font-family: 'Courier New', Courier, monospace;
}

#cellPhone-mail2-menu{
    height: 50px;
    justify-content: left;
    width: 100%;
}

#cellPhone-mail2-object{
    height: 50px;
    font-size: 22px;
}

#cellPhone-mail2-sender{
    font-weight: bold;
    font-size: 18px;
}

#cellPhone-mail2-date{
    font-size: 12px;
}
#cellPhone-mail2-dest{
    font-size: 14px;
    height: 30px;
}

#cellPhone-mail2-content{
    font-size: 17px;
}

#cellPhone-mails-arrow{
    width:50px;
    margin-left: 20px;
    cursor: pointer;
}

#cellPhone-SMS-zone{
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    background-color: var(--cellPhone-dark1);
}

.cellPhone-SMS-container{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 65px;
    margin-bottom: 20px;
    background-color: var(--cellPhone-dark1);
    font-size: 17px;
    font-family: 'Courier New', Courier, monospace;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    
    
    
}

.cellPhone-SMS-sender{
    font-weight: bold;
}

.cellPhone-SMS-date{
    font-size: 15px;
    margin-right: 5px;
    margin-bottom: 10px;
}

.cellPhone-SMS-content{
    font-size: 15px;
    overflow: hidden;
    
}

.cellPhone-SMS-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.cellPhone-SMS-img{
    max-width: 50px;
    max-height: 50px;
    border-radius: 25px;
    margin-right: 5px;
}

.cellPhone-SMS-container2{
    width: 100%;
}

.cellPhone-SMS-new-message{
    background-color: darkorange;
    border-radius: 25px;
    width:20px;
    height: 20px;
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
    color: black;

    font-size: 15px;
}

#cellPhone-SMS1-title{
    margin-top: 100px;
    height: 50px;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;

}

#cellPhone-SMS2-header{
    position: sticky;
    top:0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    height: 60px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    background-color: var(--cellPhone-dark1);
    
}


.cellPhone-SMS2-message1{
    display: flex;
    margin-top: 10px;

}
.cellPhone-SMS2-content{
    padding-left: 10px;
    background-color:gray ;
    border-radius: 10px;
    max-width: 70%;
    font-family: 'Courier New', Courier, monospace;
}

.cellPhone-SMS2-date-container{
    position: relative;
    width: 40px;
}


.cellPhone-SMS2-date{
    position: absolute;
    bottom: 0;
    font-size: 13px;
    color:var(--cellPhone-gray);
    font-family:Arial, Helvetica, sans-serif;
    user-select: none;
}
    

.cellPhone-SMS2-message2{
    display: flex;
    flex-direction: row-reverse;
    margin-top: 10px;

}


.cellPhone-SMS2-message2 .cellPhone-SMS2-content{
    background-color: rgb(91, 206, 167);
}

.cellPhone-SMS2-date-change{
    width: 100%;
    text-align: center;
    color:var(--cellPhone-gray);
    font-family:Arial, Helvetica, sans-serif;
}

#cellPhone-appel1-page div{
    border-radius: 2px;
    background-color:white;
    margin: 1px;
    background-image:url(src/icons/Appels.png);
    background-size: 9% 90%;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 18px;
    color: black;
    cursor: pointer;

    margin-top: 20px;
}

#cellPhone-appel1-page{
    
    flex-direction:column;
    background-color: black;
}

#cellPhone-SMS2-back{
    cursor: pointer;
}