#page-container {
    position: relative;
    min-height: fit-content;
}

content {
    margin: 3.5em 0 0;
    padding: 0 2.5%;
    max-height: 80%; 
    }

article {
    position: relative;
    z-index: 1;
}

.wrapper {
    padding-bottom: 0px;
}

.header {
    margin-top: 4em;
    padding: 1em;
}

p {
    padding: 1em 2em 0;
}

.main-container {
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    margin: 0 auto;
    justify-self: center;
    margin-bottom: -1em;
}

.btn1 {
    width: 18em;
    background: none;
    box-shadow: 0px 0px 0px transparent;
    border: 0px solid transparent;
    text-shadow: 0px 0px 0px transparent;
}

.card {
    width: 18em;
    justify-self: center;
    margin: 0;
    padding: 2em 1em 0;
}


.card img {
    margin: 0 0 5px 0;
    width: 18em;
    height: auto;
}

summary {
    width: 18em;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    
    margin: 0;
    padding: 0;
    
    color: #202020;
    background: #808080;
    
    cursor: pointer;
    
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

summary::-webkit-details-marker {
    display: none;
}

.fa.fa-angle-down {
  transition: .15s transform ease-in-out;
}

details[open] .fa.fa-angle-down {
  transform: rotate(180deg) translateY(-.2em);
}

summary:focus {
    outline-style: none;
    background: #404040;
    color: #fff;
}

details {
    max-height: fit-content;
    width: 17.55em;
    color: #fff;
    background: #212529;
    border-bottom: 1px solid rgba(250, 224, 66, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 0;
    margin: -.25em 0 2em;
    border-right: solid 1px #b5b5b5;
    border-bottom: solid 1px #b5b5b5;
}

.contentul li {
    padding: 1em;
}

.empty {
    margin: 150px;
}

@media only screen and (min-width: 650px) {


    .main-container {
        display: grid;
        grid-template-columns:repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 1em;
    }


@media only screen and (min-width: 1024px) {

    .header {
    padding: 0 1em;
    }
    
    
    .main-container {
        width: 90%;
        display: grid;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 1em;
    }
    
}

@media only screen and (min-width: 1440px) {

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

.header{
    padding: 2em;
}

h1 {
    font-size: 3em;
}

.main-container {
    margin: 0;
    padding: 0;
}

.card {
    margin: 0;
    padding: 0;
}

.card img {
    width: 100%;
    font-size: 3rem;
}

summary {
    width: 100%;
    font-size: 150%;
}

details {
    width: 200%;
    font-size: 150%;
}
}
}