@font-face {
    font-family: "Pinkend";
    src: url('../pinkend.ttf');
}


:root {
    --gap: 10px;
    --gap2: 20px;
}

li + li {
    margin-top: var(--gap);
}

body {
    margin: 0;
    padding: 0;

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: rgb(152 114 189);
}

html {

}

.border {
    border: 1.5px solid rgb(186 112 201);
}

.glow {
    border: 1.5px solid rgb(17, 232, 255);
    box-shadow: 0px 0px 20px #00bbff;
}

.glow_small {

}

#page_container {
    padding: var(--gap);
    padding-bottom: 50px;
    padding-top: 50px;
    margin: var(--gap);
    width: 100%;
    max-width: 1700px;
    background: rgb(16 16 39);
    border-radius: var(--gap);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 20px #000000;
}

#images_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px
}

.image {
    width: 100%;
    border-radius: var(--gap);
}

.image_container {
    width: calc(min(100%, 550px));
    position: relative;
    margin: 5px;
}

#pfp {
    width: 200px;
    margin: var(--gap2);
}

.text_on_image_container {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    justify-content: space-between;
    align-items: flex-end;
}

.tier_text_container {
    display: flex;
    flex-direction: column;
    padding: var(--gap);
}


.text_on_image_container_bottom {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.separation_line {
    width: 100%;
    height: 1px;
    background: rgb(255, 255, 255);
    margin-top: var(--gap);
    margin-bottom: var(--gap2);
}

.info_text_container {
    width: 100%;
    max-width: 1000px;
    padding: var(--gap);
}