@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"); /* Experimental color scheme */ /* light theme */ /* $defBG: #FFFFFF; $altBG: lightgray; $defFG: #000000; $altFG: #232627; $defLink: brown; $altLink: brown; $defShadow: 0px 0px 4px #232627; */ /* Inspired by Dracula */ .formContainer { border: 1px solid pink; padding: 2rem; height: 60vh; border-radius: 1rem; } .addNewItemForm .textInputs, .addNewItemForm .numericInputs label { font-size: 1.5rem; } .addNewItemForm { display: flex; flex-direction: row; justify-content: space-between; height: 50vh; } .addNewItemForm .textInputs, .addNewItemForm .numericInputs { border: 1px solid #FF79C6; width: 30%; justify-content: space-around; } .addNewItemForm .numericInputs input { width: 5.5rem; } .addNewItemForm .menuButtons { justify-content: space-around; border: 1px solid lightgreen; width: 15%; } .addNewItemForm .menuButtons * { width: 100%; } .addNewItemForm div { display: flex; flex-direction: column; border-radius: 1rem; padding: 1.5rem; overflow: scroll; } /* hide scrollbars */ .addNewItemForm div::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } .addNewItemForm div { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .addNewItemForm label { display: flex; justify-content: space-between; padding: 0.8rem 0; border-bottom: 1px dotted lightblue; }