:root {
    --ghost-white: #dde7f1;
    --light-pink: #fccfec;
    --lilac: #c495c3;
    --magenta: #fd006b;
    --sky-blue: #73cfe4;
    --bondi-blue: #277e99;
    --mint-gray: #addbdb;
}

.main-app {
    width: 80%;
    min-height: 500px;
    margin: 10px auto;
    padding: 20px;
    background-color: var(--ghost-white);
}

body {
    font-family: "Merienda", cursive; 
    text-transform: uppercase;
    
}

h1 {
    background-color: var(--bondi-blue);
    padding: 5px 25px;
    color: white;
}

.sub-heading {
    color: var(--bondi-blue);
    font-weight: 800;
    border-bottom: 2px solid;
    margin: 10px;
    padding-left: 10px;
}

.sub-heading::before {
    content: "🖊️";
}

.nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.nav-buttons button {
    background-color: var(--mint-gray);
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 5px 10px;
    font-weight: 600;
    margin: 5px;
}

.app-section {
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

#section2 {
    display: none;
}

label {
    display: block;
}

textarea {
    padding: 10px;
    
}


.themeDB {
    color: var(--magenta);
    width: 95%;
    resize: none;
}