html, body {
    background-color: var(--color-secondary);
    color: var(--font-color);
}

.theme-light {
    --color-primary: #ede4da;
    --color-secondary: rgb(223, 214, 181);
    --color-accent: #d99f45;
    --font-color: #1a1918;
    --color-highlight: #13686d;
    --color-shadow: #4a4a46;
}
.theme-dark {
    --color-primary: #1c1a1a;
    --color-secondary: #3b3e42;
    --color-accent: #a34646;
    --font-color: #e9f5f4;
    --color-highlight: #cab5ac;
    --color-shadow: #68695e;
}

.loggedin {
    content:url("../images/icons/profile-loggedin.png")
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-secondary);
}

.bannerText {
    text-align: center;
    color: var(--color-secondary);
    text-shadow: var(--color-highlight) 3px 0px 0px, var(--color-highlight) 2.83487px 0.981584px 0px, var(--color-highlight) 2.35766px 1.85511px 0px, var(--color-highlight) 1.62091px 2.52441px 0px, var(--color-highlight) 0.705713px 2.91581px 0px, var(--color-highlight) -0.287171px 2.98622px 0px, var(--color-highlight) -1.24844px 2.72789px 0px, var(--color-highlight) -2.07227px 2.16926px 0px, var(--color-highlight) -2.66798px 1.37182px 0px, var(--color-highlight) -2.96998px 0.42336px 0px, var(--color-highlight) -2.94502px -0.571704px 0px, var(--color-highlight) -2.59586px -1.50383px 0px, var(--color-highlight) -1.96093px -2.27041px 0px, var(--color-highlight) -1.11013px -2.78704px 0px, var(--color-highlight) -0.137119px -2.99686px 0px, var(--color-highlight) 0.850987px -2.87677px 0px, var(--color-highlight) 1.74541px -2.43999px 0px, var(--color-highlight) 2.44769px -1.73459px 0px, var(--color-highlight) 2.88051px -0.838247px 0px;
}

nav img {
    width: 50px;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    pointer-events: none;
    opacity: 0;
  
    will-change: transform, opacity;

    transform: scale(1.15);

    transition:
        transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
        opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
  }

.visible {
    pointer-events: auto;

    background: rgba(0, 0, 0, .6);
    opacity: 1;

    transform: scale(1);

    transition:
      transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
      opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.modalBox {
    background-color: var(--color-primary);
    border-radius: 8px;
    border: 3px solid var(--color-shadow);
    margin: 20%;
    padding: 20px;
}

.btn {
    background-color: var(--color-secondary);
    border: 2px solid var(--color-shadow);
    border-radius: 9px;
    margin: 5px;
    padding: 3px;
}

.btn:hover {
    background-color: var(--color-primary);
    color: var(--color-highlight);
    font-weight: bold;
}

#authorPanel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.thumbCover {
    max-width: 250px;
}

/* for phones */

header {
    width: 90%;
    margin: 2vh auto;
    height: 12vh;
    border-radius: 16px;
    border: 3px solid var(--color-highlight);
    background-color: black;
    background-image: url(../images/bannerSmall.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bannerText {
    font-size: 3rem;
}

main {
    width: 90%;
    margin: 2vh auto;
}

nav {
    
}

article {

}

aside {

}

footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 0 auto;
    width: 98%;
}

/* for tablets */

@media only screen and (min-width: 600px) {

    header {
        background-image: url(../images/bannerMed.jpg);
        height: 20vh;
    }

    .bannerText {
        font-size: 5rem;
    }
    
    main {
    
    }
    
    nav {
    
    }
    
    article {
    
    }
    
    aside {
    
    }
    
    footer {
    
    }

}

/* for desktops */

@media only screen and (min-width: 768px) {
    
    header {
        background-image: url(../images/bannerFull.jpg);
    }

    .bannerText {
        font-size: 5rem;
    }
    
    main {
    
    }
    
    nav {
    
    }
    
    article {
    
    }
    
    aside {
    
    }
    
    footer {
    
    }

}