/* body, more like the background and font */
body {
    margin: 0 auto;
    font-family: "Varela Round", sans-serif;
    background-color: #08171f;
    background-image: url(libreshop_bg.png);
    animation: background 30s infinite linear;
    transition: 5s;
    color: white;
}

/* the website's header */
header {
    display: flex;
    padding: auto;
    height: 80px;
    gap: 5px;
    background-color: #173e49;
}
a {
    display: block;
    color: white;
    width: 100px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border: none;
    transition-duration: 0.2s;
}
a:hover {
    color: rgb(0, 182, 214);
}

/* the website's body */
.content {
    margin: 0 auto;
    padding-bottom: 25px;
    width: 95%;
}

/* the welcome message and randomizer */
.item1 { grid-area: main; margin-top: 5px;}
.item2 { grid-area: right; margin-top: 5px;}
.grid-container {
    display: grid;
    grid-template-areas:
      'main main main main right right';
    grid-template-columns: auto;
}
.grid-container > div {
    margin: auto;
    padding: 10px 10px;
}
.randomapp {
    background-color: #19505f;
    border: 2px solid #37b0d1;
    border-radius: 5px;
    color: white;
}

/* the features */
.grid-features {
    overflow: auto;
    display: flex;
    margin: auto;
    margin-top: 20px;
    justify-content: center;
    grid-template-areas:
      'main main main main right right';
    gap: 20px;
    grid-template-columns: auto;
}
.grid-features > div {
    margin-bottom: auto;
    padding: 10px 10px;
}
.grid-item01 {
    border-radius: 5px;
    width: 250px;
    background-color: #19505f;
    border: 2px solid #37b0d1;
    text-align: center;
    transition: 0.25s;
}
.grid-item02 {
    border-radius: 5px;
    width: 250px;
    background-color: #19505f;
    border: 2px solid #37b0d1;
    text-align: center;
    transition: 0.25s;
}
.grid-item03 {
    border-radius: 5px;
    width: 250px;
    background-color: #19505f;
    border: 2px solid #37b0d1;
    text-align: center;
    transition: 0.25s;
}
.grid-item04 {
    border-radius: 5px;
    width: 250px;
    background-color: #19505f;
    border: 2px solid #37b0d1;
    text-align: center;
    transition: 0.25s;
}
.collapsible {
    background-color: #3089a1;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
    transition: 0.2s;
    border: 2px solid #37b0d1;
    border-radius: 5px;
}
.collapsible:hover {
    background-color: #3ba9c7;
}
.active {
    background-color: #3ba9c7;
    border-radius: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.details {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #11343d;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* the screenshots */
.gallery {
    overflow: auto;
    display: flex;
    margin: auto;
    margin-top: 20px;
    width: 94%;
    white-space: nowrap;
    padding: 10px;
    border: 2px solid #37b0d1;
    border-radius: 5px;
    background-color: #19505f;
}
.gallery img {
    padding: 10px;
}

/* download button */
.download {
    background-color: #3089a1;
    border: none;
    color: white;
    width: 100px;
    height: 20px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    transition-duration: 0.2s;
    border-radius: 5px;
    border: 2px solid #37b0d1;
}
.download:hover {
    background-color: #3ba9c7;
    color: white;
}

/* footer */
footer {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background-color: #245f71;
}
.footer-item1 {grid-area: main;}
.footer-item2 {grid-area: right;}
.grid-footer {
    display: grid;
    grid-template-areas:
      'main right right right right right';
    grid-template-columns: auto;
}
.grid-footer > div {
    margin: auto;
    padding: 30px 50px;
}

/* some fancy animations */
@keyframes intro-01 {
    from {opacity: 0%}
    to {opacity: 100%}
}
@keyframes intro-02 {
    from {opacity: 0%; margin-top: 50px;}
    to {opacity: 100%; margin-top: 20px;}
}
@keyframes intro-03 {
    from {opacity: 0%; margin-top: 100px; margin-bottom: 0px;}
    to {opacity: 100%; margin-top: 50px; margin-bottom: 0px;}
}
@keyframes intro-04 {
    from {opacity: 0%; margin-top: 50px; margin-bottom: 0px;}
    to {opacity: 100%; margin-top: 20px; margin-bottom: 0px;}
}
@keyframes background {
    from {background-position-x: 0px;}
    to {background-position-x: -782px;}
}
@keyframes intro-bg {
    from {opacity: 0%;}
    to {opacity: 100%;}
}