/* --- all/selectors --- */
* {
    font-family: 'Red Hat Text', sans-serif;
    color: #505050;
}

::selection {
    color: #fbf8f8;
    background: #ee9595;
}

/* --- elements --- */
html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    background: #fbf8f8;
}

h1 {
    font-size: 28px;
    line-height: 40px;
    font-weight: 500; /* medium */
}

h2 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 500; /* medium weight */
}

h3 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 500; /* medium weight */
}

h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500; /* medium weight */
}

p {
    font-size: 14px;
    line-height: 22px;
}

a:link {
    color: #505050;
    text-decoration: none;
}

a:visited {
    color: #505050;
    text-decoration: none;
}

a.nav-link:hover {
    color: #D65555;
    background-color: #f8eeee;
}

/* --- classes --- */
/* layout */
.ac {
    display: block;
    position: relative;
    visibility: hidden;
    top: -70px; /* nav-link height */
}

.flex-container {
    display: flex;
    height: 100%;
    width: 100%;
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* center vertically */
    text-align: left;
    position: fixed;
    left: 0;
    height: 100%;
    /* (width + padding) must add up to 20% */
    width: 15%;
    padding: 0 0 0 5%;
    background: #fbf8f8;
}

.sidebar-icon-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    margin: 20px 0 0 0;
}

.sidebar-icon {
    flex: 1;
    width: 35px;
    /* uncomment below for icons to always resize */
    max-width: 100%;
    transition: 0.3s;
}

.sidebar-icon:hover {
    filter: brightness(88%);
}

.main-container {
    position: absolute;
    top: 0;
    right: 0;
    /* (width + (padding * 2)) must add up to 80% */
    width: 64%;
    padding: 0 8%;
}

.top-nav {
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 1; /* to fix cover from preview-img position: relative */
    top: 0;
    right: 0;
    /* (width + (padding * 2)) must add up to 80% */
    width: 50%;
    padding: 0 15%;
    height: auto;
    background: #fbf8f8;
    opacity: 0.9;
}

.welcome-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.display {
    margin: 0 0 40px 0;
    width: 100%;
}

.display-row {
    display: flex;
    gap: 40px;
}

.art-row {
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 0 0 20px 0;
    margin: 0 0 80px 0;
    overflow-y: hidden;
    overflow-x: scroll;
}

.art-row::-webkit-scrollbar {
    height: 5px;
}

.art-row::-webkit-scrollbar-track {
    background: #fbf8f8;
}

.art-row::-webkit-scrollbar-thumb {
    background: #b1c5be;
}

.art-display {
    flex: 1;
    height: 350px;
    transition: 0.3s;
}

/* text styling */
.sidebar-desc {
    margin: 0 0 6px 0;
}

.nav-link {
    text-align: center;
    padding: 0 6%;
    height: 70px;
    line-height: 70px;
    transition: 0.3s;
}

.section-title {
    color: #505050;
    width: fit-content;
    
    border-top: 2px solid #D65555;
}

.design-title {
    margin: 24px 0 0 0;
}

.date {
    margin: 0 auto;
    color: #D65555;
}

.single-letter {
    position: absolute;
    bottom: 0px;
    left: 0;
    margin: 0;
    font-family: 'Ibarra Real Nova', serif;
    font-size: 20vw;
    line-height: 13vw;  /* this value was trial/error */
    font-weight: 500;
    color: #fbf8f8;
    user-select: none;
    -moz-user-select: none;
}

.red {
    color: #D65555;
    font: inherit;
}

.green {
    color: #3f7c65;
    font: inherit;
}

/* preview image styling */
.preview-img {
    /* override padding-top and background-image for styling */
    position: relative;
    width: 100%;
    /* keep ratio when resizing window */
    padding-top: 56.25%;  /* default ratio 16:9 */
    background: #aaaaaa;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.3s;
}

.preview-img:hover {
    filter: brightness(88%);
}

.pi-latest {
    padding-top: 56.25%;  /* default 16:9 */
}

.pi-recent {
    padding-top: 85%;  /* default 16:9 */
}

/* --- other --- */
.circle {
    position: absolute;
    align-self: center;
    width: 40vh;
    height: 40vh;
    border-radius: 50%;
    background: #cccccc;
    opacity: 12%;
    transition: 0.3s;
}

/* --- ids --- */
#headline {
    margin: 0 0 2vw 0;
    font-family: 'Ibarra Real Nova', serif;
    font-size: 5vw;
    line-height: 5vw;
    font-weight: 500;
}

#welcome-description {
    margin: 0 5%;
    font-size: 16px;
    line-height: 24px;
}

#c-red {
    background: #D65555;
    margin: 0 0 15vh 0;
}

#c-red:hover {
    margin: 0 0 10vh 0;
}

#c-green {
    background: #3f7c65;
    margin: 25vh 0 0 0;
}

#c-green:hover {
    margin: 30vh 0 0 0;
}

#large-initial {
    width: 90%;
    /*align-self: center;*/
    margin: 0 0 18px 0;
}

#sidebar-title {
    margin: 16px 0 10px 0;
}

#sidebar-line {
    border-right: 1px solid #bcbcbc;
    position: absolute;
    top: 5%;
    right: 0;
    height: 90%;
}