* {
    box-sizing: border-box;
}

#cust-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    background-color: #ffffff15;
    border-bottom: 1px solid#ffffff25;
    position: fixed;
    padding: 4px;
    top: 0;
    left: 0;
    inline-size: 100%;
    z-index: 50;
}

H1 {
    font-size: 3.5rem;
    font-family: "Caprasimo", serif;
    font-weight: 400;
    color: #7e3f9e;
    font-style: normal;
    text-align: center;
    grid-column: 2;
    padding-block-start: 10px;
    margin-block: auto;
    z-index: 50;    
} 

#soup {
    max-inline-size: 100px;
    max-block-size: 150px;
    grid-column: 1;
    margin-block: auto;
}
#navcontainer {
    position: relative;
    display: flex;
    justify-content: right;
    grid-column: 3;
}

/*start spn button*/
#spnopen {
    inline-size: 100px;
    block-size: 100px;
    float: right;
}

#spnopen:hover {
    background-color: #00000050;
    
}

#spnclose {
    inline-size: 100px;
    block-size: 100px;
}

#spnclosebtn {
    display: inline-flex;
    border: none;
    background-color: transparent;
    padding: 0px;
    margin-bottom: 10px;
    cursor: pointer;
    justify-content: left;
    z-index: 100;
}

/* end spn button */

#menu {
    display: inline-flex;
    font-family: "Fredericka the Great", "Caprisimo", serif;
    color: #ce6e28;
    font-style: normal;
    font-weight: 400;
    justify-content: center;
    padding-top: 15px;
    font-size: 3REM;

}

#pndroptop {
    display: inline-flex;
    z-index: 60;
} 

#pndropbtn {
    display: inline-flex;
    border: none;
    background-color: transparent;
    padding: 0px;
    cursor: pointer;
    justify-content: right;
    
}

/* nav ID */
#pndropdown {
    position: fixed;
    display: flex;
    flex-direction: column;
    background-color: #1a1e1c;
    background-image:
        radial-gradient(ellipse at 30% 20%, #ffffff08, transparent 50%),
        radial-gradient(ellipse at 70% 60%, #ffffff06, transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

    top: 0%;
    right: 0%;
    padding: 0px;
    border-radius: 0px 0px 0px 0px;
    z-index: 60;
   
}

.menu-row {
    display: flex;
    justify-content: center;
   
}

/* Nav Menu Home styling begins */
#home-row {
    padding-inline: 80px;
    padding-block: 10px;
    
}

.home-bowl {
    position: relative;
    border-radius:50% 50% 40% 40% / 30% 30% 70% 70%;
    border: solid 3px #479ff1;
    width: 200px;
    height: 125px;
    background-color: #3e8e4f;
}

.home-broth {
    position: absolute;
    bottom: 43px;
    border-radius: 50% 50% 50% 50%;
    border: solid 3px #479ff1;
    width: 195px;
    height: 70px;
    background-image: radial-gradient(ellipse, #7e3f9e, #712e92);
    animation: floatInBowl 5s ease-in-out infinite alternate;
    background-color: #7e3f9e;
}

#home {
    transform: rotate(-3deg) rotateX(-25deg);
    
} 

#home-float {
    bottom: 20%;
    left: 23%;
    animation-delay: 0s;
}
/* Nav Menu Home styling ends */

/* Nav Menu About Me styling begins */

#about-row {
    padding-inline: 80px;
    padding-block: 10px;
   
}

.about-bowl {
    position: relative;
    border-radius:50% 50% 40% 40% / 30% 30% 70% 70%;
    border: solid 3px #eb65a6;
    width: 200px;
    height: 125px;
    background-color: #2277c4;
    
}

.about-broth {
    position: absolute;
    bottom: 43px;
    border-radius: 50% 50% 50% 50%;
    border: solid 3px #eb65a6;
    width: 195px;
    height: 70px;
    background-image: radial-gradient(ellipse, #b83a3a, #b22a2a);
    animation: floatInBowl 5s ease-in-out infinite alternate; 
    background-color: #b83a3a;
}

#about {
    transform: rotate(-3deg) rotateX(-25deg);
}

#about-float {
     bottom: 2%;
    left: 20%;
    animation-delay: 0.4s;
}

/* Nav Menu About Me styling ends */

/* Nav Menu Geode styling begins */

#geode-row {
    padding-inline: 80px;
    padding-block: 10px;
   
}

.geode-bowl {
    position: relative;
    border-radius:50% 50% 40% 40% / 30% 30% 70% 70%;
    border: solid 3px #5dd377;
    width: 200px;
    height: 125px;
    background-color: #c36e28;
    
}

.geode-broth {
    position: absolute;
    bottom: 43px;
    border-radius: 50% 50% 50% 50%;
    border: solid 3px #5dd377;
    width: 195px;
    height: 70px;
    background-image: radial-gradient(ellipse, #c24e86, #b52a6d);
    animation: floatInBowl 5s ease-in-out infinite alternate;
    background-color: #c24e86;
}

#geode {
    transform: rotate(-2deg) rotateX(-25deg);
}

#geode-float {
    bottom: 20%;
    left: 25%;
    animation-delay: 0.8s;
}

/* Nav Menu geode styling ends */

/* Nav Menu Contacts styling begins */

#contact-row {
    padding-inline: 80px;
    padding-block: 10px;
    
}

.contact-bowl {
    position: relative;
    border-radius:50% 50% 40% 40% / 30% 30% 70% 70%;
    border: solid 3px #f4b941;
    width: 200px;
    height: 125px;
    background-color: #7e3f9e;
    
}

.contact-broth {
    position: absolute;
    bottom: 43px;
    border-radius: 50% 50% 50% 50%;
    border: solid 3px #f4b941;
    width: 195px;
    height: 70px;
    background-image: radial-gradient(ellipse, #ce6e28, #c55e14);
    animation: floatInBowl 5s ease-in-out infinite alternate;
    background-color: #ce6e28;
}

#contact {
    transform: rotate(-3deg) rotateX(-25deg);
}

#contact-float {
     bottom: 20%;
    left: 15%;
    animation-delay: 1.2s;
}

/* Nav Menu Contact styling ends */

#pndropdown a {
    background-color: transparent;
    padding: 3px;
    text-decoration: none;
    justify-content: space-between;
    display: inline-block;
}

.float {
    position: absolute;
    animation: floatInBowl 3s ease-in-out infinite alternate;
}

 @keyframes floatInBowl {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
 }


/* hidden nav class */
#pndropdown.hidden {
    display:none;
}

body {
    /* background-image: linear-gradient(to bottom, #64107e, #181aa3, #128f44, #efcc21); */
    background-color: #000000;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    margin: 0px;
    padding: 0px;
}

#main {
    margin-block: 7%;
    margin-inline: auto;
    padding: 0;
    position: relative;
    z-index: 5;
    clip-path: 100px;
    max-width: 1100px;
    align-content: center;
    
}

h2 {
    text-align: center;
    font-size: 3rem;
    font-family: "Caprasimo", serif;
    font-weight: 400;
    font-style: normal;
    color: #589c48;
    margin: 3%;
}

h3 {
    text-align: center;
    font-size: 2rem;
    font-family: "Caprasimo", serif;
    font-weight: 400;
    font-style: normal;
    color: #2277C4;
    margin: 3%;
    padding-block: 5%;
}


p {
    font-size: 1.5rem;
    font-family: "Caprasimo", serif;
    font-weight: 400;
    font-style: normal;
    color: #b83a3a;
    margin: 3%;
    padding-block: 5%;
}

#game-placeholder {
    z-index: 2;
    width: 950px;
    height: 750px;
}





/* About Me Styles */
#goodsoup {
    display: block;
    height: auto;
    max-width: 100%;
    margin: auto;
    padding: 200px;
    object-fit: contain;
}



/* project styles */
.projecttitle {
    text-align: center;
}

.projectdescription {
    text-align: center;
}

.projectlinks {
    font-size: 2rem;
    font-family: "Caprasimo", serif;
    font-weight: 400;
    font-style: normal;
    color: #3456df;
    margin: 20px;
    text-decoration: none;
}

.projectlinks:hover {
    color: #733381;
}

#tier-controls-title {
    text-align: center;
    padding-top: 30px;
}

#add-tier-form {
    text-align: center;
}

#new-tier {
    font-family: "Caprasimo", serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(163, 2, 163);
    font-size: 1.5rem;
}

#add-tier-button {
    border: 3px ridge rgb(163, 2, 163);
    background: rgb(202, 250, 168);
    font-family: "Caprasimo", serif;
    font-weight: 100;
    font-style: normal;
    color: rgb(163, 2, 163);
    font-size: 1.5rem;
}

#tier-name {
    border: 3px ridge rgb(163, 2, 163);
    background: rgb(202, 250, 168);
    font-family: "Caprasimo", serif;
    font-weight: 100;
    font-style: normal;
    color: rgb(163, 2, 163);
    font-size: 1.5rem;
}

#game-placeholder {
    z-index: 2;
}