.template-wrapper {
    padding:5px 0;
    --colour--Primary: #fff4b8;
    --text--Title: #fd1042;
    --text--Sub: #fc8f53;
    --text--Main: #ffffff;
    --navlink--Background: #000000b3;
    --box--Background: #140321;
    --warning--Text: #140321;
    --warning--Background: #fc8f53;
    --list--Text: #1d1d1d;
    --greenlist--Background: #3cb371;
    --yellowlist--Background: #fc8f53;
    --redlist--Background: #fd1042;

    .inner-wrapper {
        width:100%;
        max-width:950px;
        color:var(--text--Main);
        background:var(--box--Background);
        border:3px solid var(--colour--Primary);
        border-radius:5px;

        .content {
            gap:15px;
            width:100%;
            padding:20px;
            border:2px solid var(--colour--Primary);
            border-radius:5px;

            .warnbox {
                width:fit-content;
                padding:5px 10px;
                font-size:24px;
                font-weight:600;
                color:var(--warning--Text);
                background:var(--warning--Background);
            }

            .title {
                font-size:36px;
            }

            .profile-wrapper {
                padding:5px 0;

                .image-wrapper {
                    flex:1 150px;
                }

                .profile-image {
                    width:100%;
                    aspect-ratio:1;
                    border:2px solid var(--colour--Primary);
                    background:transparent url('https://digitalpopsicle.neocities.org/assets/icons/icon%20aiden.png') no-repeat center;
                    background-size:100%;
                }

                [name="PROFILE"] {
                    gap:5px;
                    flex:3 0 250px;
                }
            }

            .description {
                padding:10px;
                text-align: justify;
                font-family:monospace;
                font-size:14px
            }

            .gallery-wrapper {
                margin: 25px auto;
                max-width: 90%;

                ul {
                    margin: 0; padding: 0;

                    li {
                        height: auto;
                        flex-grow: 1;
                        list-style-type: none;
                        margin: 1px;

                        img {
                            max-height: 200px;
                            min-width: 100%;
                            object-fit: cover;
                            vertical-align: bottom;
                        }
                    }

                    li:last-child {
                        height: 200px;
                        flex-grow: 10;
                        list-style-type: none;
                    }
                }
            }

            .wrapper-border {
                font-weight:600;
                border-top:2px solid var(--colour--Primary);
                border-bottom:2px solid var(--colour--Primary);

                div {
                    vertical-align: middle;
                }
            }
        }
    }
}

.dis-flex {
    display:flex;
}
.dis-inline {
    display:inline-block;
}
.justify-center {
    justify-content:center;
}
.justify-between {
    justify-content:space-between;
}
.align-middle {
    vertical-align:middle;
}
.align-top {
    vertical-align: top;
}
.flow-row-wrap {
    flex-flow:row wrap;
}
.flow-column-nowrap {
    flex-flow:column nowrap;
}
.col-gap-10 {
    gap: 0 10px;
}
.padding-5 {
    padding: 5px;
}
.center {
    text-align: center;
}