:root {
    --font: sans-serif;

    --padding: 25px;
}



body {
    background-image: url("https://oxalate.neocities.org/images/backgrounds/pastelstarz.gif");
    background-repeat: repeat;
    font-family: var(--font);
    letter-spacing: 1px;
}

.container {
    display: grid;
    gap: var(--margin);
    grid-template-areas:
        "header header header header header"
        ". title title title ."
        "updates main main main ."
        "nav main main main ."
        "nav scrolls scrolls scrolls ."
        "nav fav fav fav .";
    grid-auto-columns: 20%;
    grid-template-rows: auto;
    margin: auto;
    gap: 20px;
}

.mayor_title {
    grid-area: title;
}

.mayor {
    grid-area: main;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    background-color: #CAFEFF;
    text-align: justify;
    padding: var(--padding);


}

.navigation {
    grid-area: nav;
}

.badges {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
}

.mayor>.badges {
    flex: 0 1 80px;
}

.mayor>.mayor_text,
.mayor>.mayor_img {
    flex: 1 1 0;
}

.mayor>.mayor_img {
    position: relative;
    max-width: 200px;
    height: 338px;
    border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAANdJREFUWEftmOEOgCAIhOv9H7rWlpsyUTmhjXb9K8W7PpEW55HkOpP4PGjUe6dqopdYvIxpz3e9mPRSGS1vJvN19bkko5GWO2TSeyavGioG5PzPjEoD5Z45+pKAD9Nsa6NqrpZKjV5PfClwtzZV8Ut6vfKkkdMOHep5tl4zntIoSuaTuKgD4m5+ZHSWQ95mhno0CuAmUQDaMIRESbRHgOUJyAv4MAFacSG/+NbH4QFWJlEA2jAkJVHT76sDMZMee08d4uw9sffE3tNLIKrmsvfkRXbW4GjGb5G5cCf2r2VkAAAAAElFTkSuQmCC') 14 / 14px / 0 round;
    border-width: 14px;
    border-style: solid;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #fffeca;
}

.mayor_img img {
    position: absolute;
    max-width: 200px;
    margin-top: auto;
    margin-bottom: auto;
}


.stamp_wall {
    grid-area: scrolls;
}

.wrapper {
    margin-inline: auto;
    height: 30px;
    position: relative;
    overflow: hidden;
}

@keyframes scrollLeft {
    to {
        left: -200px;
    }
}

@keyframes scrollRight {
    to {
        right: -200px;
    }
}

.itemLeft,
.itemRight {
    position: absolute;
    animation-timing-function: linear;
    animation-duration: 30s;
    animation-iteration-count: infinite;

}

.itemLeft img,
.itemRight img {
    max-width: 150px;
    height: 20px
}

.itemLeft {
    left: max(calc(150px * 20), 100%);
    animation-name: scrollLeft;
}

.itemRight {
    right: max(calc(150px * 20), calc(100% + 150px));
    animation-name: scrollRight;
}

.item1 {
    animation-delay: calc(30s / 20 * (20 - 1) * -1);
}

.item2 {
    animation-delay: calc(30s / 20 * (20 - 2) * -1);
}

.item3 {
    animation-delay: calc(30s / 20 * (20 - 3) * -1);
}

.item4 {
    animation-delay: calc(30s / 20 * (20 - 4) * -1);
}

.item5 {
    animation-delay: calc(30s / 20 * (20 - 5) * -1);
}

.item6 {
    animation-delay: calc(30s / 20 * (20 - 6) * -1);
}

.item7 {
    animation-delay: calc(30s / 20 * (20 - 7) * -1);
}

.item8 {
    animation-delay: calc(30s / 20 * (20 - 8) * -1);
}



.item9 {
    animation-delay: calc(30s / 20 * (20 - 9) * -1);
}

.item10 {
    animation-delay: calc(30s / 20 * (20 - 10) * -1);
}

.item11 {
    animation-delay: calc(30s / 20 * (20 - 11) * -1);
}

.item12 {
    animation-delay: calc(30s / 20 * (20 - 12) * -1);
}

.item13 {
    animation-delay: calc(30s / 20 * (20 - 13) * -1);
}

.item14 {
    animation-delay: calc(30s / 20 * (20 - 14) * -1);
}

.item15 {
    animation-delay: calc(30s / 20 * (20 - 15) * -1);
}

.item16 {
    animation-delay: calc(30s / 20 * (20 - 16) * -1);
}

.item17 {
    animation-delay: calc(30s / 20 * (20 - 17) * -1);
}

.item18 {
    animation-delay: calc(30s / 20 * (20 - 18) * -1);
}

.item19 {
    animation-delay: calc(30s / 20 * (20 - 19) * -1);
}

.item20 {
    animation-delay: calc(30s / 20 * (20 - 20) * -1);
}





.updates {
    grid-area: updates;

}

.fav {
    grid-area: fav;
}