body, html,
#app{
    position:relative;
    height:100%;
    scroll-behavior: smooth;
    background-color: #ffffff;
}

header{
    background-color: var(--blue-grey);
}

.header-menu{
    flex:1;
    display: flex;
    justify-content: end;
}

.logo-link{
    text-decoration: none;
    display: block;
    width: 100%;
    max-width: 376px;
    height:auto;
    margin:1.5rem auto;
}

.logo{
    width:64px;
    height:64px;
    margin-right:1.2rem;
}

main{
    background-color: var(--gold);
    margin:2px 0;
    padding:2rem 1rem;
}

.os-content-visible .os-content{
    bottom:50px;
    transition: var(--transition);
}

footer{
    background-color: var(--blue-grey);
    text-align: center;
    padding: 1rem 0;
}


@media (min-width: 992px) {




    .os-content {
        height: auto;
        width: 100%;
        position: relative;
        background-color:transparent;
        transition: var(--transition);
        bottom: auto;
        top:0;
    }

    footer{
        margin-bottom:0;
    }
  }

   /* only sticky if we have a big enough screen */
   @media (min-width: 992px)  and (min-height: 800px ){
    .os-content {
        position: sticky;
        top: 99px;
        padding-top:0;
    }

  }