@import "baseVars.css";
@import "colors.css";
@import "typography.css";
@import "icons.css";
@import "animations.css";

@import "https://fonts.googleapis.com/css?family=Almendra";
@import "https://fonts.googleapis.com/css?family=Architects Daughter";
@import "https://fonts.googleapis.com/css?family=Outfit";

body{
    padding:0;
    margin:0;
    height: var(--app-height);
    width: var(--app-width);
    display:flex;
    flex-direction:column;
    
}

body > footer {
    display:none;
}

.app-host{
    display:flex;
    flex-direction:column;
    flex:1;
    overflow:hidden;
    height:100%;
    width:100%;
}

.app-host > header {
    margin:0;
    padding:.75rem;
    display: flex;
    flex-direction:column;
    justify-items: center;
}

.app-host > main {
    flex:1;
    overflow: auto;
}

.feature-host {
    display: flex;
    flex-direction:column;
    justify-content:flex-start;
    height:100%;
    padding: .5rem;
    position:relative;
}

.feature-host  header{
    flex: 0 0 auto;
    margin:0;
    position:sticky;
    border-bottom: solid 1px var(--outline-color);

    border-radius: .5rem;

    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    
    
    padding: 0 .5rem;
}

.feature-host  main{
    flex:1;
    overflow: hidden;

    border-radius: .5rem;

    padding: .125rem .25rem;
}

main .centered-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.feature-host  footer {
    flex:0 0 auto;
    
    margin-top:auto;
    border-top: solid 1px var(--outline-color);
}

.task-host {
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
    position:relative;

    padding: .25rem .125rem;
    border: 2px solid var(--outline-color);
    border-radius: .75rem;
}

.task-host > header {
    flex:0 0 auto;
    margin:0;
    padding:0.25rem;
    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;
    border:solid 1px var(--outline-color);
    font-family: 'Almendra', serif
}

.task-host > main{
    flex:1;
    overflow:auto;

    padding:0.125rem;
    height:100%;
    border-left:solid 1px var(--outline-color);
    border-right:solid 1px var(--outline-color);
}

.task-host > footer{
    flex: 0 0 auto;
    margin-top:auto;
    border-top:solid 1px black;
    padding: .5rem 1rem;
    margin-bottom: 0.5rem;
}

.task-host > footer nav {
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    gap:0.25rem;
}

.task-host > footer nav button {
    flex: 1 0 auto;
}

/* Used to contain a set of rows within another element */
.flex-row-container{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    width:100%;
    flex: grow 1 shrink 1 auto;
    margin:0;
    padding:0;
}

.flex-row{
    margin:0;
    padding: left .25rem right .25rem top 0 bottom 0;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items: flex-start;
    gap:1rem;
}

.flex-column{
    margin:0;
    padding: left .25rem right .25rem top 0 bottom 0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items: flex-start;
}

.full-width{
    width:100%;
}

.full-height{
    height:100%;
}

.shown {
}

.hidden {
    display:none;
}

.form-group {
    display:flex;
    flex-direction: column;

    font-size: .9rem;
}

.form-label {
    
    font-weight: var(--font-weight-bold);
}

.form-select {
    margin:.25rem;
    border-radius: .25rem;
    /*font-size: .9rem;*/
    padding: .25rem;
}

.form-control {
    align-self: flex-start;
}

radio-button-list {
    display:flex;
    flex-direction: row;
    /*font-size:.9rem;*/
}

button {
    font-size: 1rem;
    padding: .25rem .5rem;
    border-radius: .25rem;
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items:center;
    color: var(--color-light-yellow);
    font-family: 'Almendra', serif;
    font-size:1.1rem;
    cursor:pointer;
}

.secondary-button{
    background-color: var(--color-light-yellow);
    color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.bigButton{
    display:flex;
    justify-content:flex-end;
    flex-direction:column;
    align-items:center;
    width:200px;
    height:250px;
    padding:.25rem;
    border:solid .125rem var(--color-light-yellow);
    border-radius:1rem;
    box-shadow: 
        var(--color-accent-red) 0px 0px .25rem .5rem,
        inset var(--color-light-yellow) 0px 0px .6rem .125rem;
    background-image:
        linear-gradient(
            55deg,
            var(--color-accent-red) 47%,
            rgba(255, 254, 189, .75) 49%,
            var(--color-light-yellow) 50%,
            rgba(255, 254, 189, .75) 51%,
            var(--color-accent-red) 53%
        );
    background-size:300%;
    background-position:100px;
    font-family: 'Almendra', serif;
    font-weight:700;
    font-size:2rem;
    color:var(--color-light-yellow);
}

.mediumButton{
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    width:200px;
    height:125px;
    padding:.25rem;
    border:solid .125rem var(--color-light-yellow);
    border-radius:1rem;
    box-shadow: 
        var(--color-accent-red) 0px 0px .25rem .5rem,
        inset var(--color-light-yellow) 0px 0px .6rem .125rem;
    background-image:
        linear-gradient(
            55deg,
            var(--color-accent-red) 47%,
            rgba(255, 254, 189, .75) 49%,
            var(--color-light-yellow) 50%,
            rgba(255, 254, 189, .75) 51%,
            var(--color-accent-red) 53%
        );
    background-size:300%;
    background-position:100px;
    font-family: 'Almendra', serif;
    font-weight:700;
    font-size:2rem;
    color:var(--color-light-yellow);
}

.clickable{
    cursor:pointer;
    animation: shimmer 10s infinite ease-in-out;
}

.clickable:hover{
    box-shadow: 
        var(--color-accent-red) 0px 0px .25rem .5rem,
        inset var(--color-light-yellow) 0px 0px .25rem .25rem;
}

.clickable:hover img {
    filter:drop-shadow(0px 0px 1rem var(--color-accent-light))
        brightness(1.1);
}

.clickable:active{
    box-shadow: 
        var(--color-accent-red) 0px 0px .25rem .4rem,
        inset var(--color-light-yellow) 0px 0px .3rem .3rem;
    filter:brightness(.9);
}

.clickable:active * {
    filter: brightness(.9);
}


@media only screen and (min-width: 600px) {
        body > footer {
            display:unset;
            margin-top:auto;
        }

        .app-host{
            flex-direction:row;
        }
    }