/* variables */
:root {
    /* colores */
--color-uno: #9cd18a;
--color-dos: #000000;
--color-tres: #e10c0c;
--color-cuatro: #b916da;
--color-cinco: #20283c;
--color-seis: #d2d4dc;

/* fuentes */
--fuente-uno: 'Courier New';
--fuente-dos: 'Franklin Gothic Medium';
--fuente-tres: 'Trebuchet MS';
--fuente-cuatro: 'Lucida Sans';

/* background */
--fondo-uno: url("../imgs/fondo-uno.jpg");
--fondo-dos: url("../imgs/fondo-dos.jpg");
--fondo-tres: url("../imgs/fondo-tres.jpg");
--fondo-cuatro: url("../imgs/fondo-cuatro.png");

}

body {
    background-image: var(--fondo-cuatro);
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
    height: 110vh;
    padding: 30px;
}

#preview {
    height: 200px;
    background-image: url("../imgs/pc.svg");
    background-position: top;
    background-size: auto;
    background-repeat: no-repeat;
}

#Cursos {
    height: 100%;
    display: flex;
    align-items:flex-start;
    flex-wrap: wrap;
}

#Cursos div div {
    transition: all 300ms;
}

#Cursos div>div:hover {
    box-shadow: 0px 2px 10px 2px;
}

.modal-dialog {
    max-width: 100%;
}

#Tabla{
    font-family: var(--fuente-tres);
    color: var(--color-cuatro);
    text-align: center;
    border-radius: 1%;
    padding-top: 1em;
}

#Registro {
       font-family: var(--fuente-tres);
        color: var(--color-cuatro);
          border-radius: 1%;
}

#curso{
    background: var(--color-cinco);
        font-family: var(--fuente-uno);
        color: var(--color-seis);
}

#sede {
    background: var(--color-cinco);
         font-family: var(--fuente-uno);
            color: var(--color-seis);
}

#modalidad {
    background: var(--color-cinco);
         font-family: var(--fuente-uno);
            color: var(--color-seis);
}

#participantes {
    background: var(--color-seis);
      font-family: var(--fuente-uno);
       color: var(--color-dos);
}

#Registrar{
      font-family: var(--fuente-tres);
       color: var(--color-cinco);
}

#Borrar{
      margin-top: 1em;
}

#modal{
width: 50%;
text-align: center;
}

#contenido {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: var(--color-cinco);
}