<template>

    <div>
        <app-menu ></app-menu>
        <main class="centrar">
            <div class="titulo">
                <h1>Fechas importantes</h1>
            </div>
            <div class="container alin">
                <div class="row">
                    <div class="col">
                        <ul>
                            <li>Entrega de resúmenes: del 17 de febrero al 6 de abril</li>
                            <li>Dictamen: del 21 de abril al 05 de mayo</li>
                            <li>Ponencias en extenso: del 05 de mayo al 15 de junio</li>
                            <li>Inscripción de ponentes: del 04 al 31 de mayo</li>
                            
                            <li>Inscripción asistentes 1 de marzo al 31 de julio</li>     
                            

                        </ul>
                    </div>
                </div>
            </div>     
        </main>
    </div>
    
     

</template>


<script>

import webMenu from '../estetica/menu.vue';


export default {
 
    
    components: {
        
        appMenu: webMenu,
          }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
   font-size: 1.2rem;
   margin-top:1.4rem;
   
}
.container{
   
    margin-bottom: 4rem;
}
.alin{
    text-align: justify;
}
.titulo{
    margin-top: 3rem;
    margin-bottom: 2rem;
}
h1 {
   padding-left: 2rem;
    padding-right: 2rem;
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
    
}
main img {
    width: 20rem;
    margin-bottom: 6rem;
}

@media screen and (min-width: 768px) {
    main img {
        width: 40rem;
    }
    h1{
         display: inline; 
       border-bottom: solid .1rem black;
    
        font-size: 2rem;
    }
}

@media screen and (min-width: 1024px) {
    main img {
        width: 60rem;
    }
    h1{
        font-size: 2.5rem;
    }
}
</style>
