.container {
	height: calc(100vh - 105px);
}

.contenedor {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	/* Centra horizontalmente */
	align-items: center;
	/* Centra verticalmente */
	height: 100%;
	/* Tamaño igual a la altura del viewport */
}

.contorno {
	border: 1px solid rgb(001, 086, 145);
	padding: 20px;
	border-radius: 50%;
	box-shadow: 0 0 50px rgba(166, 209, 240, 0.5);
	/* Offset-x, Offset-y, Blur-radius, Spread-radius, Color */
}

.fondo {
	border: 10px solid rgb(001, 086, 145);
	border-radius: 50%;
	background-image: url("../images/majois.png");
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
	height: 500px;
	width: 500px;
}

/* .cart-button {	
    border: none;
	cursor: pointer;
    color: white;
    font-size: 16px;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.53s;
    -moz-transition: background-color 0.53s;
    -ms-transition: background-color 0.53s;
    -o-transition: background-color 0.53s;
}

.cart-button:hover {
    background-color: rgb(166, 210, 247);
}

.cart-button img {
    width: 32px;
    height: 32px;
} */

/*
	MEDIA QUERY Para dispositivos móviles (como teléfonos inteligentes)
	----------------------------------------------------------------------------------
*/

/* Dispositivos móviles en posición vertical */
@media screen and (max-width: 480px) {
	/* Estilos específicos para dispositivos móviles */
	.contenedor {
		margin-top: -50px;
	}
	.contorno {
		padding: 10px;
	}

	.fondo {
		background-size: 50%;
		height: 300px;
		width: 300px;
		background-position: center;
	}
}

/* Dispositivos móviles en posición horizontal */
@media screen and (max-width: 767px) {
	/* Estilos específicos para dispositivos móviles */
}

/* 
	----------------------------------------------------------------------------------
	MEDIA QUERY Para tabletas (como iPads u otras tabletas)
*/

/* Tablet en posición vertical */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* Estilos específicos para tabletas */
}

/* Tablet en posición horizontal */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	/* Estilos específicos para tabletas */
}

/*
   ----------------------------------------------------------------------------------
	MEDIA QUERY Para monitores de escritorio (computadoras de escritorio y portátiles)
*/

/* Monitores pequeños y portátiles */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
	/* Estilos específicos para monitores pequeños */
}

/* Monitores medianos y grandes */
@media screen and (min-width: 1440px) {
	/* Estilos específicos para monitores medianos y grandes */
}
