* {
    margin: 0px;
    padding: 0px;
}

/* v0.dev generated this color pallete for me */
:root {
    --primary-purple: #6B46C1;
    --secondary-pink: #EC4899;
    --pastel-purple: #C084FC;
    --pastel-pink: #F9A8D4;
    --light-pink: #FCE7F3;
    --retro-green: #10B981;
    --dark-purple: #312E81;
    --white: #FFFFFF;
    --text-color: #312E81;
}


/* modifying the already existing elements */
body {
    /* I used cssgradient.io to make a nice gradient for me */
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--secondary-pink) 50%, var(--pastel-purple) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-color);
    font-family: 'JetBrains Mono';
}

a, a:visited {
    text-decoration: none;
    color: var(--text-color);
}

button{
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    svg, p{

        display: inline;
    }
}

nav{
    height: inherit;
    min-width: 15vw;

    /* deco things*/
    background-color: var(--pastel-pink);
    font-weight: bold;
    border-radius: 20px 0px 0px 20px;
}
main{
    height: inherit;
    background-color: var(--light-pink);
}
/* -------------------------------------------------- */

/* flex things */
.flex{
    display: flex;
}
.column{
    flex-direction: column;
}
.center{
    justify-content: center;
    align-items: center;
}
.left{
    justify-content: left;
}
.space-around{
    justify-content: space-around;
}
/* -------------------------------------------------- */

/* padding things */
.p-small{
    padding: 4%;
}
/* -------------------------------------------------- */

/* custom classes */
.content-container{
    margin: 3%;
    height: 80vh;
    width: 80vw;
}

.content, .hidden{
    display: none;
}

.active{
    display: flex;
}

/* -------------------------------------------------- */


/* random testing section */