.phone{
	background-color: var(--black);
	margin: 0 auto;
	border-radius: 70px;
	height: 720px;
	position: relative;
	width: 360px;
}

/* all the buttons */
.Button {
	position: absolute;
	width: 6px;
	background: var(--black);
}

.toggleButton {
	height: 50px;
	top: 140px;
	left: -6px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.volumeButtonUp {
	height: 80px;
	top: 220px;
	left: -6px;
	border-top-left-radius: 3px;
	border-bottom-left-radius:3px;
}

.volumeButtonDown {
	height: 80px;
	top: 320px;
	left: -6px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.powerButton {
	right: -6px;
	top: 220px;
	height: 80px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/* glares */
.glares {
	height: 99.6%;
	width: 98.1%;
	background-size: cover;
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	border-radius: 64px;/*91px;*/
	background-color: var(--black);
	overflow: hidden;
}

.glare1 {
	box-shadow: inset 0px 0px 4px 2px rgba(255,255,255,1);
	position: absolute;
	top: 0px;
	left: 50%;
	height: 100%;
	width: 102%;
	transform: translate(-50%,0%);
	border-radius: 64px;/*91px;*/
}

.verticalGlare {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 98%;
	width: 98.8%;
	transform: translate(-50%,-50%);
	border-radius: 60px;/*85px;*/
	overflow: hidden;
}

.glare2 {
	box-shadow: inset 0px 0px 6px 5px rgba(255,255,255,.8);
	position: absolute;
	top: 50%;
	left: 50%;
	height: 103%;
	width: 100%;
	transform: translate(-50%,-50%);
	border-radius: 60px;/*85px;*/
	opacity: 0.5;
}

/* screen and texts */
.screen {
	height: 95.9%;
	width: 93.8%;
	background-color: var(--graylight);
	background-size: cover;
	position: relative;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	border-radius: 53px;/*76px;*/
}

.txt {
	width: 98%;
	position: relative;
	height: 89%;
	overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--graylight);
    transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
}

.txt p {
	font-size: 0.9em;
}

/* chiffre */
.cocoBar {
	color: var(--white);
	position: absolute;
	left: 40px;
	top: 10px;
	font-size: small;
}

/* chiffre */
.batteryBar{
	color: var(--white);
	position: absolute;
	right: 40px;
	top: 12px;
	font-size: small;
}

/* symbole rectangle */
.batter {
	width: 27px;
	height: 12px;
	background-color: var(--white);
	display: inline-block;
	position: relative;
	margin-right: 10px;
}

/* symbole rectangle petite partie */
.batter .e {
	height: 7px;
	width: 3px;
	position: absolute;
	right: -2.5px;
	top: 2.5px;
	background-color: var(--white);
}

.striptop {
	position: absolute;
	width: 30%;/*270px;*/
	height: 25px;
	background-color: var(--black);
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 20px;
	//z-index: 109;
	top: 2.5px;
}

.stripbottom {
	position: absolute;
	width: 45%;/*270px;*/
	height: 9px;
	background-color: var(--black);
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 20px;
	//z-index: 109;
	bottom: 2.5px;
}

.sliderncu {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slidesncu {
    display: flex;
    transition: transform 0.5s ease;
}

.slidencu {
    min-width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

.slidencu img {
    width: 100%;
    height: auto;
    border: none; 
    //border-radius: 10px;
}

.wrapperphone {
	display: flex;
	justify-content: center; /* centers the container */
}

.titlephone {
	display: flex;
	justify-content: space-between;
	//align-items: flex-end; /* aligns the left and right sides to the bottom */
	width: 95%;
}

.left, .right {
	width: 50%; /* Keeps each side balanced */
}

.left {
    //display: inline-block; /* prevents full-width stretching */
    text-align: left;
    color: var(--orange);
    font-weight: bold;
    //width: max-content; /* ensures it only takes up space for the text */
}

.right {
	text-align: right;
	font-weight: normal;
	//font-size: small;
	padding: 2.5px;
}

/* devices */
@media screen and (max-width: 900px) {
	.txt p {
		font-size: 1em;
	}
}