footer {
    margin-top: 50px;
    width: 100%;
    /*min-width: fit-content;*/
    max-width: 100%;

    background-color: rgba(20,35,35,0.7);
    color: white;
    border-top: 5px solid black;
    position: relative;

    display: flex;
    flex-direction: column;
    row-gap: 20px;

    padding-inline: 7.5%;
    padding-block: 30px;
    box-sizing: border-box;

    #footerContents {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        /*display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr auto;*/
        column-gap: 20px;
        row-gap: 20px;
    }

    #footerRightSide {
        min-width: 80%;
        flex-grow: 3;
        flex-shrink: 0;
        flex-basis: 0;

        .links a:active {color: cyan}

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: 1fr;
        gap: 20px;

        #footerNavigation, #footerSocialsLogo {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }
    }

    #footerLeftSide {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        flex-basis: 0;
    }

    .footerNotice {
        font-family: var(--font-marugo), sans-serif;
        text-align: center;
        width: 100%;
        font-size: 1em;
    }

    #footerLogoContainer {
        align-self: center;
        justify-self: center;
        display: flex;
        align-items: center;
        justify-content: center;
        #footerLogo {
            height: 100%;
            max-height: 100px;
            aspect-ratio: 1/1;
        }
    }

    #backgroundSelector {
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: var(--font-marugo), sans-serif;
        #backgroundContainer {
            width: 100%;
            max-width: 100%;
        }
        #background {
            font-family: var(--font-marugo), sans-serif;
            border-radius: 3em;
            padding-inline: 1em;
            text-align: center;
            width: 100%;
            background-color: rgba(255,255,255,0.7);
            border: none;
            box-shadow: var(--standard-shadow);
            cursor: pointer;

            /*mask-image: linear-gradient(white, white),url("./images/other_assets/downArrow.svg");
            mask-size: cover, 1.5em 1em;
            mask-position: 0 0, calc(100% - 0.5em) center;
            mask-repeat: no-repeat;
            mask-composite: subtract;

            padding-right: 2em;
            box-sizing: border-box;*/

            -moz-appearance:none; /* Firefox */
            -webkit-appearance:none; /* Safari and Chrome */
            appearance: none;
        }

        .checkboxContainer {
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            margin-top: 0.5em;
            padding-inline: 0.5em;
            gap: 0.5em;

            label, input {cursor: pointer};

            input[type=checkbox] {
                appearance: unset;
                height: 1.5em;
                background-color: transparent;
                border-radius: 20%;
                aspect-ratio: 1;
                border: 2px solid white;
                box-sizing: border-box;
                margin:0;

                &:focus-visible {outline: none;}
            }
            input[type=checkbox]:checked {
                background-color: white;
                mask-image: linear-gradient(white, white), url("../images/other_assets/checkmark.svg");
                mask-size: 100% 100%, contain;
                mask-origin: border-box;
                mask-position: 0 0, center;
                mask-repeat: no-repeat;
                mask-composite: subtract;
            }
        }
    }

    .footerContainer {
        width: 100%;
        nav {margin-left: 1em};
        justify-self: center;
        margin-inline-start: 10px;
    }


    .footerTitle {
        font-family: var(--font-yuruka), sans-serif;
        font-weight: bold;
        text-wrap: nowrap;
    }
}