a{
    text-decoration: none;
}

.clip-text{
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1152 34' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><linearGradient id='grad' gradientUnits='userSpaceOnUse' x1='-10' x2='10' y1='0' y2='0' gradientTransform='matrix(57.6 0 0 3.4 576 17)'><stop stop-color='rgba(53,117,254,1)' offset='0'/><stop stop-color='rgba(78,92,253,1)' offset='0.25'/><stop stop-color='rgba(103,66,252,1)' offset='0.5'/><stop stop-color='rgba(127,41,251,1)' offset='0.75'/><stop stop-color='rgba(152,16,250,1)' offset='1'/></linearGradient></defs></svg>");  
    --webkit-background-clip: text;
    background-clip: text;
    padding:0;
}

.clip-text p{
    margin:0;
    padding:0;
    color: #ffffff00;
    font-weight: 700;
}

body{
    background-color: #131313;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family: "Roboto", sans-serif;
}

header{
    height: 86px;
    background-color: #ffffff;
    margin:0;
    padding:0;
    display: flex;
    padding-left:32px;
    padding-right: 32px;
    position:fixed;
    top:0;
    left: 0;
    right:0;
    z-index: 2000;
    transition: all linear 0.4s;
}


body.body-scrolled header{
    height:78px;
    background-color: #000000;
}

nav{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

nav a{
    color:black;
    text-decoration: none;
    font-weight: 500;
}

body.body-scrolled nav a{
    color:white;
}

.logo > a {
    display:inline-block;
    width: 138px;
    height: 48px;
    background-image: url(/images/logo-wide.png);
    filter: invert(1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media (Width<600px){

    .logo > a{
        width: 48px;
        background-image: url(/images/logo-small.png);
    }
}


body.body-scrolled .logo img{
    filter: invert(1);
}

main{
    margin-top: 86px;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 501' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><linearGradient id='grad' gradientUnits='userSpaceOnUse' x1='-10' x2='10' y1='0' y2='0' gradientTransform='matrix(64 25.05 -128 50.1 640 250.5)'><stop stop-color='rgba(21,93,252,0.2)' offset='0.19702'/><stop stop-color='rgba(152,16,250,0.1)' offset='0.5'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></linearGradient></defs></svg>");
}

body.body-scrolled main{
    margin-top: 78px;
}

footer{
    background-color: #000000;
}

.footerContent{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.footer-copyright{
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-style: italic;
}

@media (width<800px){
    .footerContent{
        flex-direction: column;
    }
}

article{
    display: flex;
    flex-direction: column;
    gap:40px;
    margin: 79px 32px 32px 32px;
}

section{
    display:flex;
    flex-direction: row;
    gap:20px;
}

section.adds-section{
    flex-wrap: wrap;
    justify-content: center;
}

.banner{
    height: 320px;
    border-radius: 16px;
    position: relative;
    background-position: center;
    background-size: cover;
    display: flex;
}

.shader{
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: #0000004d;
}

.banner-content{
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    font-size: 20px;
    height: 100%;
    width: 100%;;
    margin:20px;
    gap:20px;
}


.banner-content h2{
    font-family: "Gabarito", sans-serif;
    font-weight: 600;
    font-size: 38px;
    margin:0;
}

.banner-content div, .banner-content p{
    margin:0;
}

.banner-button{
    position: absolute;
    bottom: 40px;
    font-size: 10pt;
}

.contact-info{
    position: absolute;
    bottom: 40px;
    right:0;
    font-size: 10pt;
    cursor:pointer;
}

.top-banner{
    justify-content: center;
    align-items: center;
    height: unset;
    flex-grow: 1;
}

.top-banner .banner-content{
    align-items: center;
    justify-content: center;
}

.add-banner{
    width: 320px;
    background-color: #6068ff80;
}

.cleaner-banner{
    width: 320px;
    background-image: url(/images/cleaners.jpg);
}

.yardsale-banner{
    width: 320px;;
    background-image: url(/images/home.jpg);
}

.bottom-banner{
    background-color: #3575FE;
    align-items: center;
    justify-content: center;
    width: 320px;
    flex-grow: 1;
}

.bottom-banner .banner-content{
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}



@media (width<800px) {
    section{
        flex-direction: column;
    }

    .add-banner, .bottom-banner{
        width: unset;
    }

    .hide-on-narrow{
        display: none;
    }
}

article > h2 {
    text-align: center;
    font-size: 24pt;
}

.navibutton{
    display: inline-block;
    height: 38px;
    line-height: 38px;
    border-radius:18px;
    padding: 0 20px;
    cursor:pointer;
}

.login-button{
    border: 1px solid #000000;
    color:#000000;
}

.frame-button{
    border: 1px solid white;
    color: white;
}

.blue-button{
    background-color: #3575FE;
    color: white;
}

.white-button{
    background-color: #ffffff;
    color: #000000 !important;
}

.orange-button{
    background-color: #E09797;
    color: white;
}

body.body-scrolled .login-button{
    border: 1px solid #ffffff;
    color:#ffffff;
}

.center-content-wide{
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

@media (width<1000px){
    .center-content-wide{
        flex-direction: column;
    }
}

.center-content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

@media (width<640px) {
    .center-content{
        flex-direction: column;
    }
}

.menu-toggle{
    cursor:pointer;
    display: block;
}

body.body-scrolled .menu-toggle{
    filter: invert(1);
}

.hidden{
    display: none;
}

.menu-container{
    display: flex;
    gap: 20px;
    align-items: center;
}

.menu-row{
    display: flex;
    column-gap: 40px;
    align-items: center;
}

nav.menu-closed .menu-row{
    display: none;
}

    nav.menu-closed .menu-row{
        display:none;
    }
    .menu-toggle{
        display: block;
    }

    #menu-open-icon{
        display:none;
    }

    nav.menu-closed #menu-open-icon{
        display: unset;
    }

    nav.menu-closed #menu-close-icon{
        display:none;
    }

    @media (width<800px){
        .wide-menu{
            display:none;
        }
    }

    .menu-row{
        position: absolute;
        right: 20px;
        top: 50px;
        flex-direction: column;
        gap: 10px;
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        align-items: flex-start;
    }

    .menu-row a{
        color:black;
        line-height: unset;
        border: unset;
        display: unset;
        padding: unset;
        height: unset;
    }

    .menu-row a.login-button{
        border-radius: 0;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid #a0a0a0;
        color:#3575FE !important;
    }

    body.body-scrolled .menu-row a{
        color: black;
    }

.town-selector{
    position:fixed;
    top: 26px;
    left:0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;   
    align-items: center; 
    gap: 5px;
}

.select-town{
    display: block;
    left: 0;
    text-align: center;
    width: 100%;
}

.town-options{
    position:fixed;
    left:calc(50% - 160px);
    height: 400px;
    width: 320px;
    background-color: white;
    overflow-y: scroll;
    color:black;
    padding: 10px;
    border-radius: 10px;    
}

.town-options > div {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.town-options > div > p {
    margin:0;
    padding:5px;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 5px;
}

.town-options > div > p:hover {
    background-color: #3575FE;
    color:white;
}