footer{
    /* background-color: #F3D3BD; */
    /* background-color: hsl(224, 69%, 85%); */
    background-color: #2E3440;
    width: 100%;
    color: #EBCB8B;
    /* position: fixed; */
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    /* box-shadow: 0 0 5px hsl(224, 69%, 85%); */
}
.footer{
    width: 1441px;
    height: auto;
    margin: 0 auto;
    /* background-color: #ECEFF4; */
    display: grid;
    grid-template-areas: 
    'profiles footer-about';
}
.footer a{
    text-decoration: none;
    color: #00ACEE;
}
.profiles{
    width: 340px;
    padding: 20px 0 20px 0;
    margin-top: 0px !important;
    border-left: 1px solid #EBCB8B;
}
.profiles li{
    list-style-type: none;
    text-decoration: overline;
    font-size: 0.9em;
}
.profiles a{
    color: #999999;
    text-decoration: none;
    transition: 200ms;
}
.profiles a:hover{
    color: #FFFFFF;
    text-decoration: overline;
    /* text-shadow: 0 0 5px #222222; */
    /* font-weight: 700; */
}
.profiles h3{
    /* letter-spacing: 5px; */
    padding: 0px 0 10px 0;
    color: #EBCB8B;
}
.footer-about{
    color: #ECEFF4;
    font-weight: 300;
    font-size: 0.9em;
    padding: 20px;
}
.footer-about h3{
    padding: 10px 0 10px 0;
    color: #EBCB8B;
}
.f-notes{
    direction: ltr;
    color: #ECEFF4;
    background-color: #ED2939;
    padding: 5px;
    text-align: center;
    border-top: 3px dashed #FFFFFF;
    text-shadow: 0 0 3px #ED2939;
    font-family: 'BlexMono Nerd Font', ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.f-notes a{
    text-decoration: none;
    color: #ECEFF4;
    text-shadow: none;
    font-weight: bold;
}
.f-notes span{
    text-shadow: 0 0 0px #ED2939;
    color: #2E3440;
}

@media screen and (max-width: 480px) {

    /* FOOTER :) */
    footer {
        width: auto;
    }

    .footer {
        width: 100% !important;
        height: auto;
        grid-template-areas:
        'profiles'
        'footer-about' !important;
        margin-bottom: auto !important;
    }

    .profiles {
        width: 92% !important;
        padding: 20px 4% !important;
        margin-top: 0px !important;
        border-left: 0 !important;
        border-bottom: 1px solid #EBCB8B;
    }

    .profiles li {
        list-style-type: none;
        text-decoration: overline;
    }

    .profiles a {
        text-decoration: overline;
        transition: 200ms;
    }

    .profiles a:hover {
        color: #ECEFF4;
        text-decoration: overline
    }

    .profiles h3 {
        padding: 10px 0 10px 0;
        margin-top: 0px;
    }


    .footer-about {
        width: 92% !important;
        padding: 4% !important;
    }

    .footer-about h3 {
        padding: 10px 0 10px 0;
    }

}

/* FOOTER :) */
@media screen and (min-width: 481px) and (max-width: 768px) {

    footer {
        width: auto;
    }

    .footer {
        width: 100% !important;
        height: auto;
        grid-template-areas:
        'profiles'
        'footer-about' !important;
        margin-bottom: auto !important;
    }

    .profiles {
        width: 92% !important;
        padding: 20px 4% !important;
        margin-top: 0px !important;
        border-left: 0 !important;
        border-bottom: 1px solid #EBCB8B;
    }

    .profiles li {
        list-style-type: none;
        text-decoration: overline;
    }

    .profiles a {
        text-decoration: overline;
        transition: 200ms;
    }

    .profiles a:hover {
        color: #ECEFF4;
        text-decoration: overline
    }

    .profiles h3 {
        padding: 10px 0 10px 0;
        margin-top: 0px;
    }


    .footer-about {
        width: 92% !important;
        padding: 4% !important;
    }

    .footer-about h3 {
        padding: 10px 0 10px 0;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {

    footer {
        width: auto;
    }

    .footer {
        width: 100% !important;
        height: auto;
        grid-template-areas:
        'profiles'
        'footer-about' !important;
        margin-bottom: auto !important;
    }

    .profiles {
        width: 92% !important;
        padding: 20px 4% !important;
        margin-top: 0px !important;
        border-left: 0 !important;
        border-bottom: 1px solid #EBCB8B;
    }

    .profiles li {
        list-style-type: none;
        text-decoration: overline;
    }

    .profiles a {
        text-decoration: overline;
        transition: 200ms;
    }

    .profiles a:hover {
        color: #ECEFF4;
        text-decoration: overline
    }

    .profiles h3 {
        padding: 10px 0 10px 0;
        margin-top: 0px;
    }


    .footer-about {
        width: 92% !important;
        padding: 4% !important;
    }

    .footer-about h3 {
        padding: 10px 0 10px 0;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1460px) {

    /* FOOTER :) */
    footer {
        width: 100%;
    }

    .footer {
        position: relative !important;
        width: 100% !important;
        height: auto;
        grid-template-areas:
            'profiles'
            'footer-about' !important;
        margin-bottom: auto !important;
    }

    .profiles {
        width: 220px !important;
        padding: 30px 20px !important;
        margin-top: 0 !important;
        border-left: 1px solid #EBCB8B;
    }

    .profiles li {
        list-style-type: none;
        text-decoration: overline;
    }

    .profiles a {
        color: #5E81AC;
        text-decoration: overline;
        transition: 200ms;
    }

    .profiles a:hover {
        color: #ECEFF4;
        text-decoration: overline
    }

    .profiles h3 {
        padding: 10px 0 10px 0;
        margin-top: -25px;
    }


    .footer-about {
        position: absolute;
        right: 270px !important;
        padding: 15px 10px !important;
        top: 0px;
    }

    .footer-about h3 {
        padding: 10px 0 10px 0;
    }


    .f-notes {
        direction: ltr;
        padding: 5px;
        text-align: center;
    }
}