body {
    margin:0;
    padding:0;
    box-sizing: border-box; 
}
.main {
    width: 70vw;
    margin: 0 auto;
    justify-content: center;
    
}
img {
    width: 100%;
    margin: 20px auto 5px;
}
.diapositiva {
    margin: 20px;

}

.diapositiva img {
    border-radius: 6px;
    box-shadow: 3px 3px 10px black;
}

.controles {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    margin:0 auto;
    max-width: 550px;
}

.contador>p {
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items:center;
    margin: 10px auto;

}
.controles>div>input,
.controles>div>a>input {
    padding: 10px 20px;
    box-shadow: 3px 3px 6px black;
    border-radius: 6px;
    font-weight: bold;
    transition: .5s;
    font-size: 1.2rem;
    background-color: pink;
}
.controles>div>a>input,
#salir{
    border-radius: 6px;
    font-size: 1rem;
}
.controles>div>input:hover,
.controles>div>a>input:hover {
   /* transform: scale(1.05);*/
    box-shadow: -2px -2px 4px yellow,
                 2px 2px 4px red;
                 text-shadow: 1px 1px 0px black;
                 background-color:rgb(250, 153, 169);
                    
}
.contador>#contador {
    text-align: center;
    color: blue;
}

@media screen and (max-width:800px){
    main {
        min-width: 100%;
        width: 95vw;
    }
    .contador>p {
        font-size: 1.2rem;
        line-height: 1.2rem;
        margin: 5px auto;
    }
    .controles>div>input,
    .controles>div>a>input {
        padding: 5px 10px;
        font-size: .9rem;

    }
}