/* public/styles/front/index.css */
.Index .wrapper{
    background: var(--background-dark);
    padding: 10px 0;
}

.Index .wrapper .outer{
    display: grid;
    grid-template-columns: 6% 25% auto  15%;
    align-items: center;
}

.Index .wrapper .outer .logo img{
    width: 100%;
}

.Index .wrapper .outer .siteTitle{
    font: bold 35px/1.5 StardosStencil;
    color: white;
    padding-left: 5px;
    text-shadow: 0 0 0 #e7e7e7, 1px 1px 0 #d8d8d8, 2px 2px 0 #cacaca, 
    3px 3px 0 #bbb, 4px 4px 0 #adadad, 5px 5px 0 #9e9e9e, 
    6px 6px 0 #909090, 7px 7px 6px rgb(0 0 0 / 60%), 
    7px 7px 1px rgb(0 0 0 / 50%), 0 0 6px rgb(0 0 0 / 20%);
}

.Index .wrapper .outer form{
    display: grid;
    grid-template-columns: 20% auto 15%;
}

.Index .wrapper .outer form input,
.Index .wrapper .outer form select{
    font: var(--body-font);
    padding: 1px 5px;
}

.Index .wrapper .outer .login{
    text-align: right;
}

.Menu{
    position: sticky;
    top: 0;
    z-index: 9999;
}

.Menu .wrapper{
    background: white;
    margin-bottom: 7px;
}

@media only screen and (max-width: 600px){
    .Index .wrapper .outer{
        grid-template-columns: 100%;
        text-align: center;
    }

    .Index .wrapper .outer .logo img{
        width: auto;
    }

    .Index .wrapper .outer .siteTitle{
        padding-left: 0;
    }

    .Index .wrapper .outer .login{
        text-align: center;
    }
}