@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Pacifico&display=swap');
		*{
			box-sizing: border-box;
		}
        body{
            background: #e8f6fe;
        }
        /*div que sea hijo directo del body*/
        body > div{
            width: 90%;
            margin-left: auto;
            margin-right: auto; 
        }
        header{
            background: linear-gradient(0deg, rgba(10,93,98,1) 0%, rgba(36,148,154,0.07886904761904767) 44%);
            border-radius: 20px;
            margin-bottom: 15px;
            border: 4px solid #0a5d62;
        }
        main{
            display: flex; 
            flex-flow: row wrap;
            justify-content: space-around;
        }
        h1{
            text-align: center;
            font-family: "Pacifico", cursive;
            font-weight: bolder;
            font-size: 3em;
            font-variant-caps: all-small-caps;
        }
        h2{
            text-align: center; 
            font-family: "MuseoModerno", sans-serif;
            font-weight: bolder;
            font-size: 2.5em;
            font-variant-caps: all-small-caps;
        }
        h2:hover{
            background-color: white;
            border-radius: 20px;
            border: 4px solid #0a5d62;
        }
        /*div que sean hijos directos del main
        TARJETAS*/
        main > div{
            width: calc(33.333333% - 10px);
            margin-bottom: 15px;
            background: teal;
            border-radius: 20px;
            border: 4px solid #0a5d62;
            padding: 25px;
			display: flex;
			flex-direction: column;
            justify-content: space-between;
            align-content: stretch;
        }
        img{
            width: 100%;
            border-radius: 100%;
            border: 4px solid #0a5d62;
        }
        div{
        	padding: 20px;
        }
        /*parrafo que va detras de un h2*/
	    h2 + p{
	    	text-indent: 2vw;
	    	font-family: "MuseoModerno", sans-serif;
	        font-size: 1em;
	        text-align: justify;
	    }
	    h2 + p::first-letter{
	    	font-weight: bolder;
            font-size: 1.5em;
            color: white;
	    }
	    h2 + p:hover{
	    	background-color: #93e6e9;
            border-radius: 20px;
            border: 4px solid #0a5d62;
            padding: 10px;
	    }
        /*parrafo donde ponemos el precio*/
	    p + p{
	    	font-family: "MuseoModerno", sans-serif;
            font-weight: bolder;
            font-size: 2em;
            text-align: right;
	    }
        /*boton precio*/
        main div div:nth-of-type(3) img{
	    	width: 30%;
            margin: 0 auto;
	    }
		main div div:nth-of-type(3) img:active{
			width: 50%;
			border: 3px solid red;
		}
        /*imagenes de los instrumentos*/
        main div div:nth-of-type(1) img{
        	opacity: 0.3;
        }
        main div div:nth-of-type(1) img:hover{
        	opacity: 1;
        }
		/*Estilos para la ventana de ofertas*/
		#ofertas{
			z-index: 100;
			position: absolute;
			background-color: rgba(83,104,114,0.7);
			border-radius: 20px;
			width: 70%;
			height: 80%;
			top: 15%;
 			left: 15%; 
		}
		#ofertas div{
			display: flex;
			justify-content: left;
		}
		#ofertas div:nth-of-type(2){
			height: 90%;
		}
		#rebajas{
			border-radius: 20px;
			border-color: black;
		}
		#botonO{
            font-size: 2em;
            background-color: red;
            padding: 5px;
            border-radius: 20px;
            border: 2px solid black;
            color: white;
            font-weight: bolder;  
		}
		@media(max-width: 1360px) and (min-width:1100px){
			h1{
				font-size: 2.8em;
			}
			h2{
				font-size: 1.8em;
			}
			h2 + p{
				font-size: 1em;
			}
			p + p{
				font-size: 1.8em;
			}
			main div div:nth-of-type(3) img{
	    	width: 50%;
            margin: 0 auto;
	    	}
			#ofertas{
				height: 70%;
			}
		}
		@media(max-width:1099px) and (min-width:800px){
			body div{
				width: 100%;
			}
			main > div{
            width: calc(50% - 10px);
        	}
			h1{
				font-size: 2.3em;
			}
			main div div:nth-of-type(1) img{
        	width: 90%;
        	}
			main div div:nth-of-type(3) img{
	    	width: 50%;
	    	}
			#ofertas{
				height: 50%;
			}
		}
		@media(max-width:799px){
			main > div{
				width: 100%;
			}
			h1{
				font-size: 2.5em;
			}
			h2{
				font-size: 2.5em;
			}
			h2 + p{
				font-size: 1.3em;
			}
			p + p{
				font-size: 2em;
			}
			#ofertas{
				height: 40%;
			}
		}
		@media(max-width:300px){
			h1{
				font-size: 1.8em;
			}
			h2{
				font-size: 2.2em;
			}
			h2 + p{
				font-size: 1.1em;
			}
			main div div:nth-of-type(3) img{
	    	width: 50%;
	    	}
		}