html, body {
    margin:0;
    padding:0;
}

#headline {
    margin:10px;
    border-radius: 3px;
    /* box-shadow: 5px 5px 10px gray; */
    border:solid 1px gray;
    padding:20px;
}

.card {
    position: relative;
    float:left;
    margin:10px;
    border-radius: 3px;
    /* box-shadow: 5px 5px 10px gray; */
    border:solid 1px gray;
    background-size:contain;
    background-repeat: no-repeat;
    width:300px;
    height:380px;

    text-decoration: none;
    color:black;
}
/*
.card:hover {
    background-color:lightgoldenrodyellow;
}
*/
.card h2 {
    position:absolute;
    color:white;
    padding:0 10px 0 10px;
    margin:0;
    background-color: rgb(10,10,10);
    opacity: 50%;
    width:300px;
    box-sizing: border-box;
}

.card h2 a {
    color:white;
    font-family: Calibri;
    
}
.card img {
    margin:0px;
    border:none;
    width:300px;
    height:300px;
    cursor:pointer;
}

.card .info {
    padding:10px;
}
.topbar {
    background-color: rgb(33, 37, 41);
    padding:16px 16px 16px 32px;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 20px;
    font-weight: 400;
}

.topbar a {
    text-decoration: none;
    color:white;
}

.main {
    padding:32px;
}

.credits {
    font-size:smaller;
    /*font-style:italic;*/
    margin-top:0;
    margin-bottom:0;
    color:black;
}
.school {
    font-size:smaller;
    font-style:italic;
    margin-top:0;
    margin-bottom:0;
    color:gray;
}
.title {
    margin-bottom:0.25em;
}

.title a {
    text-decoration: none;
    color:black;
}

.title a:hover {
    text-decoration: underline;
}
.description {
    font-size:smaller;
    text-align: justify;
}