@import url(https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap);
* {
    font-family: "Hepta Slab", serif;
}
/* color pallete for site */
:root {
--Petal-Frost: #EED1D9;
--Dusty-Rose: #B07174;
--Old-Rose: #D47B93;
--Dark-Amethyst: #3C244C;
--Deep-Space-Blue: #22324C;
--Icy-Aqua: #AEECEF;
--Stormy-Teal: #156366;
--Tan: #C3A880;
--Graphite: #2A2A2A;
}

body {
    background-image: url("background.webp");
}
.container {
    display: grid;
    grid-template-rows: auto;
}
/* controls the main flex box */
.wrapper {
    opacity: 1;
    background-color: var(--Petal-Frost);
    color: var(--Graphite);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 40px;
    border-radius: 20px;
    box-shadow: 0px 0px 15px 5px var(--Graphite);
    align-items: center;
}
.logo {
    padding: 10px;
}
.header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.selected {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: var(--Deep-Space-Blue);;
    color: var(--Deep-Space-Blue);
}
/* Main navbar */
.navbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 10px;
    justify-content: center;
    font-size: xx-large;
    margin: 20px;
}

ul {
    list-style-type: none;
    margin: 20px;
    padding: 0;
    overflow: hidden;
    border-radius: 30px;
    background-color: var(--Dark-Amethyst);
}

ul li {
    float: left;
}

ul li a {
    display: block;
    color: var(--Petal-Frost);
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
    font-size: clamp(0.5rem, 2.5vw + 0.5rem, 3.5rem);

}
ul li a:hover {
    background-color: var(--Tan);
    color: var(--Graphite);
}



/* handling the flex box for my WIP label currently */
.meow {
    display: flex;
    opacity: 1;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    background-color: var(--Graphite);
    color: var(--Petal-Frost);
    margin: 20px 60px;
    padding: 0px 10px;
    border-radius: 12px;
    box-shadow: px 0px 15px 5px black;
}

.sable {
    grid-area: myFooter;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 20px;
}

.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
}

/* RAINBOWWWWWW welcome thingy */
.rainbow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-area: myHeader;
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    background-clip: text;
    -webkit-backdround-clip; text;
    color: transparent;
}