body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:#212427;

}

html {
    scroll-behavior: smooth;
}

.background-base{
    background-image: url("./images/backgrounds/plaid1.jpg");

    background-size : 100% auto;
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100vh; /* full viewport height */   
    padding-bottom: 10%;
}

.background-overlay{
    display: block;
    width: 90%;
    margin: 30px auto;
    background-image: url("./images/backgrounds/site-bg-phone.png");
    box-shadow: 0 0 20px #afb3b7;
    min-height: 100%;
    padding-bottom: 50%;

    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.715rem + 0.684vi, 1.125rem);

    @media (width >= 60em) {
        width: 1050px;
        background-image: url("./images/backgrounds/site-bg-laptop.png");
    }
}

#logo-homepage {
    display: block;
    text-align: center;
    margin-top: 7vw;
    margin-bottom: 4.5vw;
    margin-left: auto;
    margin-right: auto;

    text-decoration: none;
    
    font-family: "Fredoka", sans-serif;
    font-size: 50px;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;

    color: hsl(312, 100%, 99%);
    text-shadow: 0 0 5px hotpink;


    @media (width >= 80em) {
        font-size: 95px;
    }
}

#logo-homepage a, #logo-homepage a:visited {
    text-decoration: none;
    color: hsl(312, 100%, 99%);
}

.subsection-title {
    display: flex;
    color: #FFEEDB;
    background-color: #ff69b4;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    /* MAKE HEIGHT NOT A CONSTANT */
}

.subsection-content {
    /* color:#FFEEDB; */
    color:#212427;
    margin: 2vw 2vw;
    font-size: 1rem;
    line-height: 1.5
}

.section-1 {
    display: grid;
    grid-template-columns: 1fr;
    padding-left: 4vw;
    padding-right: 4vw;
    gap: 2vw;

    @media (width >= 80em) {
        grid-template-columns: 2.5fr 1fr;
    }
}

#subsection-1 {
    padding-bottom: 2vw;
}

#menu {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    height: 440px;
    box-shadow: 0 0 3px #212427;
    background-color: #f98256;
}

#about {
    flex: 0 1 80%;
    overflow: hidden;
    box-shadow: 0 0 3px #212427;
    background-color: oklch(73.224% 0.15697 40.516);
    border-radius: 20px;
    min-width: 100px;
}

#about-content {
    display: flex;
}

#grace-name {
    margin: 0 20px;
}

#site-intro {
    margin-top: 20px;
    margin-right: 20px;
    color: #343434;
    font-size: 15px;
    
    @media (width >= 80em) {
        font-size: 13px;;
    }
}

#welcome-gif {
    display: block;
    width: 95%;
    margin: 5px 10px auto auto;
}

.menu-button {
    font-size: inherit;
    color:inherit;
    text-decoration: none;
    display: inline-flex;
    padding: 10px 20%;
    text-shadow: 0 0 3px #464b51;
    cursor: pointer;
    background-color: #ff69b4;
    width: 100%;
}

.menu-button:last-child {
    border-left: 2px solid rgb(248, 137, 192);
}

.menu-button:hover {
    background-color: #ffd3e8;
    color:#464b51;
    height: 20px;
    /* text-shadow: 0 0 1px #f1f1f1; */
}

.menu-option-active {
    background-color: rgb(248, 137, 192);
    height: 20px;
}


#pinkpantheress-img {
    padding-top: 4vw;
    width: 95%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* BLOG AND VLOG TABS ON MENU */

.menu-overlay {
    display: block;
    overflow-y: scroll;
    max-height: 260px;
    min-height: 260px;  
    
    margin: 2rem auto;
    padding: 5% 5%;
    
    background-image: url("./images/backgrounds/menu-content-bg.jpg");
    background-size: cover;

    border: 2px solid hotpink;
    border-radius: 20px;

    width: 78%;

    @media (width >= 80em) {
        width: 82%;
    }
}

.menu-overlay-title {
    color: #fee7f2;
    text-shadow: 0 0 5px #ff69b4;
    margin-top: 0;
}

.menu-content-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* BLOG TAB */

.blog-post {
    display: flex;
    align-items: center;
    background-image: url("./images/backgrounds/gridpaper.jpg");
    background-size: cover;
    border-radius: 5px;
    box-shadow: 0 0 2px hotpink;
    padding: 5px;
}

.blog-post:hover {
    box-shadow: 0 0 15px hotpink;
    cursor: pointer;
}

.blog-post-gif {
    width: 20%;
    height: 20%;
    padding-right: 5vw;

    @media (width >= 60em) {
        width: 10%;
        height: 10%;
        padding-right: 1vw;
    }
}

.blog-desc {
    display: block;

    @media (width >= 80em) {
        display: flex;
        align-items: center;
    }
}

.blog-desc p {
    font-size: 12px;
    color: #8a8a8a;

    @media (width >= 80em) {
        margin-left: 1vw;
    }

}

/* VLOG TAB */

.vlog-post {
    display: flex;
    gap: 1rem;
    background-image: url("./images/backgrounds/vlog-post-bg.jpg");
    background-size: cover;
    border-radius: 10px;

}

.thumbnail {
    width: 50%;
    height: fit-content;
}
.thumbnail img {
    border: 2px solid hotpink;
    display: block;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0 0 5px #212427;

}

.thumbnail img:hover {
    box-shadow: 0 0 15px coral;
    cursor: pointer;
}

.vlog-desc {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 5px;
    margin: 0;
    color: #44494d;

}
.vlog-desc p {
    font-size: 12px;
    margin: 0;
    color: #8a8a8a
}
.vlog-desc h5{
    margin: 1.5vw 0;
}

/* Moodboard */
#moodboard-section {
    display: block;
    margin: 40px auto;
    /* border: 4px solid #ff69b4; */
}

#moodboard-title {
    display:block;
    margin: 20px auto;
    justify-content: center;
    text-align: center;
    width: 90%;
    height: 50px;
    background-image: url("./images/backgrounds/plaid1.jpg");
}

#moodboard {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    width: 90%;
}

#moodboard-col-1 {
    width: 30%
}

#moodboard-col-2 {
    width: 30%
}

#moodboard-col-3 {
    width: 30%
}

/* BLOG PAGE */

#blog-background-overlay {
    height: 80vh;
    min-height: unset;

    @media (width >= 60em) {
        height: 50vh;
    }
}

#logo-site {
    display: block;
    width: 300px;

    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 20px;

    margin-top: 3vw;
    margin-bottom: 2vw;
    margin-left: 2vw;

    text-decoration: none;
    
    font-family: "Fredoka", sans-serif;
    font-size: 50px;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;

    color: hsl(312, 100%, 99%);
    text-shadow: 0 0 5px rgb(185, 134, 160);


    @media (width >= 80em) {
        font-size: 95px;
    }
}

#logo-site a, #site a:visited {
    text-decoration: none;
    color: hsl(312, 100%, 99%);
}

/* NAV BAR */
/* Style the list */
.breadcrumb {
    list-style: none;
    background-color: hotpink;

    padding-left: 10px;
    padding-bottom: 0.5px;
    padding-top: 0.5px;
    margin: 0 1vw

}

/* Display list items side by side */
.breadcrumb li {
    display: inline;
    text-align: start;
}

/* Add a slash symbol (/) before/behind each list item */
.breadcrumb li+li:before {
    padding: 8px;
    color: #e0e1e2;
    content: ">>";
}

/* Add a color to all links inside the list */
.breadcrumb li a {
    color: #1275cb;
    text-decoration: none;
}

/* Add a color on mouse-over */
.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

#blog-page-content {
    padding: 0 10px;
    margin: 5%;
    overflow-y: scroll;
    height: 100%;
    background-color: #e9e8e8;
    box-shadow: 0px 0px 10px hotpink;

    @media (width >= 60em) {
        height: 100%;
    }
}

.blog-page-post {
    margin-bottom: 20px;
}

.blog-page-post p{
    font-size: 14px;
}

.blog-page-title {
    padding-left: 10px;
    background-color: #fee7f2;
    margin-bottom: 0;
}

.blog-page-entry {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid hotpink;
}

.blog-pics {
    width: 40%;

    @media (width >= 80em) {
        width: 20%;
    }
}