/* ;-; */

.centered_list {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    margin: auto;
    max-width: 1000px;
    list-style: none;
}

.centered_list h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.centered_list p, .centered_list aside {
    margin: 0.8rem 0;
}

.centered_list > li {
    display: flex;
    flex-direction: row;
    padding-bottom: 15px;
}

.seperator {
    border-bottom: 1px solid white;
    padding-top: 15px;
}

li > .desc {
    flex: 1.2;
}

li > .example {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 16x;
}

.wide { /* a thing examples are */
    flex-direction: column;
}

.implication {
    display: flex;
    flex-direction: row;
    margin: 10px;
}

.implication > h4{
    font-size: 40px;
    margin-bottom: 0;
    margin-top: 5px;
    margin-left: 12px;
    margin-right: 12px;
}

.noarrow {  /* a thing implications have */
    gap: 60px;
}

.implication > img {
    height: 100px;
}

#frame {
    height: 280px;
    width: 320px;
    border: 3px double var(--card);

    display: flex;
    flex-direction: row;
    margin-bottom: 40px;
}

#frame img {
    margin-left: 5px;
    height: 60px;
}

@media (max-width: 1000px) {
    li > .example {
        flex-direction: column;
    }
    li > .wide {
        flex: 1.2;
    }
}

@media (max-width: 700px) {
    .centered_list > li {
        flex-direction: column;
    }

    li > .example:not(.wide) {
        flex-direction: row;
    }
}

@media (max-width: 500px) {
    li > .example:not(.wide) {
        flex-direction: column;
        gap: 0;
    }
    .centered_list > li:not(.seperator) {
        padding-bottom: 0;
    }
}

/* Fan */
/* #region */
.card{
    width: 50px;
    height: 70px;
    border: 1px solid black;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    background: var(--card);
}

.card small{
    position:absolute;
    top: 1px;
    left: 3px;
    font-size: 13px;
    font-weight: 500;
}

.card aside{
    position: absolute;
    bottom: 102%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 14px;
}

.red {
    color: #bb1f00;
}

.fan{
    position: relative;

    width: 50px; /*Space taken up by single card*/
    height: 90px;
}

.fan .card{
    position: absolute;
    top: 0;
    left: 0;
}

.fan .card:nth-child(2){transform:rotate(11deg) translate(8px)}
.fan .card:nth-child(3){transform:rotate(22deg) translate(16px)}
.fan .card:nth-child(4){transform:rotate(33deg) translate(24px)}

.deck{
    position: relative;
    margin: 10px;

    width: 50px; /*Space taken up by single card*/
    height: 78px;
}

.deck .card{
    font-size: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

.deck .card:nth-child(2){transform: translate(2px, 2px)}
.deck .card:nth-child(3){transform: translate(4px, 4px)}

/* #endregion */

/* Banner */
/* #region */
.banner {
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
}

.banner h1 {
    margin-bottom: 0;
}

.banner h4 {
    margin-top: 10px;
}
/* #endregion */