@font-face{
    font-family: Lato;
    src: url('../font/Lato/Lato-Regular.ttf');
}
@font-face{
    font-family: Montserrat;
    src: url('../font/Montserrat/Montserrat-Regular.ttf');
}

body{
    margin: 0;
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
}

.container{
    max-width: 1200px;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
}
.nav-container{
    display: inline-flex;
    width: 100%;
}

nav{
    background: #290147;
    display: inline-flex;
    width: 100%;
}
nav .nav-right{
    text-align: right;
    width: 100%;
}
nav .nav-logo{
    color: #d1d409;
}
nav a{
    display: inline-block;
    padding: 20px;
    font-size: 32px;;
    font-family: 'Lato';
    text-decoration: none;
    color: #fff;
}
nav a:hover{
    background: #d1d409;
    color: #111;
}

main{
    font-family: 'Montserrat';
    margin-top: 20px;
}

.img-container{
    text-align: center;
    width: 100%;
}
.img-container img{
    width: 300px;
}



.card{
    text-align: center;
    border-radius: 5px;
    border: solid 1px #ccc;
    overflow: hidden;
}
.card-header{
    padding: 20px;
    background: #eee;
    border-bottom: solid 1px #ccc;
}

.card-content{
    padding: 20px;
}
.card-content p{
    margin: 0;
    padding: 0;
}
.card-content label{
    display: inline-block;
    margin-bottom: 5px;
}
.card-content input{
    padding: 10px;
    width: 350px;
    border: solid 1px #ccc;
    text-align: center;
    border-radius: 5px;
}
.card-content select{
    margin-bottom: 5px;
    padding: 10px;
    width: 372px;
    border: solid 1px #ccc;
    text-align: center;
    border-radius: 5px;
}


.card-content button{
    padding: 10px;
    background: #290147;
    border: solid 1px #290147;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    width: 372px;
}
.card-content button:hover{
    color: #290147;
    background: #d1d409;
}

.card-table{
    width: 100%;
    border-collapse: collapse;
    outline: solid 1px #ccc;
}
.card-table th{
    padding: 10px;
    background: #eee;
    border-bottom: solid 0.5px #ccc;
}
.card-table td{
    padding: 5px;
}
.card-table tr:nth-child(odd){
    background: #eee;
}
.card-table tr:hover{
    background: #ddd;
    outline: solid 1px #ccc;
}


footer{
    text-align: center;
}
.footer-title{
    font-size: 24px;
    margin: 20px;
}
.footer-external{
    display: block;
}
.footer-external a{
    display: inline-block;
}
.footer-external a img{
    height: 50px;
    margin: 25px;
}
.footer-copyright{
    color: #fff;
    background: #290147;
    padding: 20px;
}