.wrapper{
    text-align:center;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 95%;
    margin:auto;
}
#lastUpdated> i{
    text-align: left;
    padding-left: 2px;
    display: inline-flex;
    width: 95%;
}
#fileName{
    width:100px;
}
#description{
    text-align:center;
    background-color:var(--main-background);
    border-radius:8px;
    font-weight: bold;
    font-size: 14px;
    border: none;
    color: var(--main-color);
    padding-bottom: 4px;
    stroke: var(--main-color);
    grid-column: 3/3;
    justify-self: left;
}
#description > svg{
    margin-left: 4px;
    margin-top:2px;
}
#description:hover{
    text-decoration:underline;
}
#grouper{
    width: 90%;
    margin-top: 15%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
}
#descriptionSearch{
    width: 100%;
    text-align: center;
    border: 2px solid var(--secondary-color);
    border-radius: 6px;
    color: var(--main-color);
    font-size: 13px;
    height: 30px;
    grid-column: 2/3;
}
#results{
    text-align:left;
    padding-left:2px;
    display:inline-flex;
    width:100%;
}
#lastUpdated, #tableTopper{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    width: 95%;
    margin-bottom:10px;
    max-width:900px;
    margin:auto;
}
#tableTopper > div {
    width: 85%;
    display: inline-flex;
    margin-right:2px;
    margin-bottom:10px;
}
#yr{
    justify-content:right;
}
#tableTopper >div>label{
    display:inline-flex;
    width:fit-content;
    padding-right:5px;
    margin:0;
    margin-bottom:auto;
    margin-top:auto;
}
#filesPerPage{
    background-color:var(--secondary-background);
    color: var(--main-color);
    font-weight: bold;
    border-radius: 8px;
    border: 2px solid var(--secondary-color);
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
#filter>#descs{
    display: inline-grid;
    grid-template-columns: auto auto auto;
    height: fit-content;
    grid-column: 1/span3;
    margin-top: 10px;
}
#descs>label{
    width:fit-content;
    grid-column: 1/2;
    justify-self: right;
}
#filter{
    margin-bottom:20px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
}
#filter>div{
    display: inline-grid;
    grid-template-columns: auto auto;
    height: fit-content;
}

h1{
    width:90%;
    display:inline-block;
    text-align:center;
    margin:auto;
}
label{
    display: inherit;
    margin-right: 5px;
    margin-top: 5px;
}
#trigger{
    justify-content:center;
}
@media screen and (max-width:734px){
    #trigger{
    justify-content:unset;
    }
    #tableTopper{
    display: unset;
    margin-bottom: 10px;
    }
    #tableTopper>div{
    width: 100%;
    justify-content:unset;
    margin-bottom:10px;
    margin-right:unset;
    margin-left:15px;

    }
    #results{
    margin-top:10px;
    }
    #trigger{
    margin-top:10px;
    }
}
@media screen and (max-width: 609px){
    #searchField{
    width:60%;
    }
}
@media screen and (max-width: 580px){
    th{
    display:inline-flex;
    width:fit-content;
    }
    #tableHeader{
    display:none;
    }
    strong{
    display: inline-flex;
    margin: 0 .6em 0 0;
    width: 30%;
    }
    span{
    max-width:68%;
    }
    #inst{
    display:none;
    }
    #search{
    width:75%;
    left:12%;
    }
}
@media screen and (max-width: 576px){
    #filter{
    grid-template-columns: auto auto;
    }
    #filter>#yr{
    grid-column:2/2;
    }
    #searchField{
    width:60%;
    }
}

@media screen and (max-width:543px){
    #searchField{
    width:55%;
    }
}
@media screen and (max-width:514px){
    #grouper{
    margin-left:unset;
    margin-right:unset;
    width: 100%;
    margin-top:18%;
    }
}
@media screen and (max-width:509px){
    #grouper{
    margin-left:unset;
    margin-right:unset;
    width: 100%;
    margin-top:18%;
    }
}
@media screen and (max-width:471px){
    #search{
    width:80%;
    left:10%;
    }
}
@media screen and (max-width: 456px){
    #tableTopper{
    display:unset;
    margin-bottom:10px;
    }
    #results{
    padding-left:unset;
    width: 100%;
    margin-bottom:10px;
    }
    #tableTopper>div{
    width: 100%;
    justify-content:unset;
    margin-bottom:10px;
    margin-right:unset;
    margin-left:unset;
    }
}
@media screen and (max-width:455px){
    #search{
    padding-left: 25px;
    padding-right: 25px;
    width: 90%;
    left: 5%;
    }
}
@media screen and (max-width:405px){
    #grouper{
    margin-top:24%;
    }
}
@media screen and (max-width:389px){
    #filter{
    grid-template-columns: auto;
    }
    #filter>#descs{
    grid-column:1;
    margin-top:10px;
    justify-content: left;
    }
    #filter>#lang{
    grid-column: 1;
    justify-content: left;
    margin-top:10px;
    }
    #filter>#yr{
    grid-column:1;
    justify-content: left;
    margin-top:10px;
    }
    #filter>#files{
    grid-column:1/1;
    margin-top:10px;
    justify-content:left;
    }
}
@media screen and (max-width:360px){
    td{
    flex-direction:column;
    }
}
@media screen and (max-width:358px){
    #filter>#descs{
    margin-top:10px;
    justify-content: left;
    display:flex;
    }
    #descs>label{
    width:fit-content;
    display: inline-flex;
    }
    #descriptionSearch{
    margin-top: 9px;
    }
}
@media screen and (max-width:343px){
    #search{
    padding-left:5px;
    padding-right:5px;
    }
    #closeSearch{
    margin-right:10px;
    }
}