/* CSS */
/* (Version) By sync - Boulette (V5.5.4) */

body {
	font-family: Arial, sans-serif;
	background-image: url('clock.jpg'); /* remplace par le bon chemin */
	background-size: cover; /* ajuste l'image à toute la taille de l'écran */
	background-position: center; /* centre l'image */
	background-repeat: no-repeat; /* évite la répétition de l'image */
	margin: 3; padding: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; user-select: none;
}
@media (max-width: 500px) {
	table {
		width: 95%;
		min-width: unset;
	}
	#button, button, #input, input {
		font-size: 12px;
		width: auto;
	}
}

#input { border-radius: 55px; /* CSS3 */ -moz-border-radius: 55px; /* pour Mozilla */ -khtml-border-radius: 55px; /* pour Safari et Chrome */ -webkit-border-radius: 55px; /* pour Safari sur Mac */ }

strong { text-align: center; font-size: 10px;}

.calculator { background: #339999; padding: 20px; border-radius: 15px; box-shadow: 0 0 15px rgba(0,0,0,0.1); width: 320px;}

.display { width: 94%; height: 30px; font-size: 20px; text-align: right; padding: 10px; border: 0.5px solid #66CCCC; border-radius: 8px; margin-bottom: 15px; background-color: #333333;}

.result { margin-top: 15px; font-size: 16px; text-align: center; width: 94%; padding: 10px; border: 0.5px solid #66CCCC; border-radius: 6px; background-color: #333333; white-space: pre-wrap;}

.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}

.buttons button { padding: 20px; font-size: 20px; border: none; border-radius: 8px; background-color: #e0e0e0; cursor: pointer; transition: background-color 0.2s ease;}

.buttons button:hover { background-color: #d0d0d0;}

.operator { background-color: #ff9800; color: #6666CC;}

.clear { background-color: #f44336; color: #6666CC;}

.equals { background-color: #4caf50; color: #6666CC; grid-column: span 3;}

.back-button { position: absolute; top: 20px; left: 20px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer;}

/* FIN CSS */