bakery_css.css

/* ----Variables---- */
:root {
  --fromfirstitem: 185px;
} 


/* ----Tags---- */
* {
	font: normal 24px open sans, sans-serif;
	z-index: 2;
	transition: 0.3s;
	color: white;
}
body {
	background-color: black;
}
button {
	background-color: transparent;
	color: white;
	border: 0px solid white;
	align-self: center; /* vertical center */
}
nav {
	position: absolute;
	display: flex;
    justify-content: center; /* horizontal center */
	height: 25px;
}
h2 {
	font: bold pacifico, sans-serif;
	display: flex;
    justify-content: center;
	color: rgb(100, 100, 70);
}
img {
	align-self: center;
	max-width: 90px; 
	max-height: 76px; 
}
form {
    background-color: white;
}
form * {
    color: rgb(100, 100, 70);
    position: absolute;
}



/* ----Classes---- */
.background {
	background-color: white;
	opacity: 0.7;
	z-index: 2;
	position: absolute;
}
.clickable:hover {
    cursor: pointer;
}
.vertical.bar {
	margin: 0 auto;
    padding: 0 auto;
	position: absolute;
	left: 5%;
	width: 90%;
	height: 50px;
}
.rounded {
	border-radius: 15px;
}
.backdrop_blur {
    backdrop-filter: blur(5px);
}
.space {
    width: 100%;
    height: 50px;
}
.sec {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0px 10px 0px 10px;
}
.item {
	border: 0.5px solid #003;
	border-radius: 20px;
	background-color: #000033;
    position: absolute;	
	overflow-y: hidden;
	overflow-x: hidden;
}
.item_pic {
    background-repeat: no-repeat;
	background-position: center ;
	background-size: 100% 130%;	
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	width: 100%;
	height: 60%;

}

.itemName {
	position: absolute;
	top: 60.25%;
	width: 98%;
	left: 1%;
}
.add_btn {
	border: 2px solid white;
	width: 40px;
	height: 40px;
	border-radius: 25px;
	position: absolute;
	bottom:10px;
	right: 15px; 
}
.priceTage {
	position: absolute;
	bottom	: 10px;
	right: 50%;
	color: white;
}
.cartItem {
	width: 60%;
	height: 120px;
	position: absolute;
	left: 5%;
	top: 70px;
	border: 1px solid black;
	padding: 0px;
	opacity: 0;
	z-index: -1;
}
.cartItemPic {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 130px;
    height: 116px;
    background-repeat: no-repeat;
	background-position: center ;
	background-size: 100% 100%;
}
.cartItem output {
	position: absolute;
	top: 10px;
	right: 45px;
	color: rgb(100, 100, 70);
}
.cartItem button, .cartItem .qtyOutput {
	justify-content: center; 
	position: absolute;
	bottom: 2px;
    width: 30px;
    font-size: 22px; 	
    top: 60px;
}
.cartItem button {
	font-size: 26px;
}
.priceOutput {
	position: absolute;
	left: 215px;
}	
.minusAmt_button {
	left: 200px;
    transform: rotate(-90deg);
    font-size: 25px;
}
.qtyOutput {
	left: 240px;
    color: #22f;
	top: 80px;
}
.plusAmt_button {
	left: 264px;
	transform: rotate(-90deg);
	font-size: 25px;
}
.icon {
 	position: absolute;
    color: #22f; 
	font-size: 2em;
}
.line1, .line2 {
	position: absolute;
    width: 20px;
	top: 5px;
}

.line1 {
	right: 6px;
	transform: rotate(0deg);
}
.line2 {
	left: 7px;
	transform: rotate(90deg);
}
.for_itemName .background {
    opacity: 0;
    position: absolute;
	top: calc(60.25% - 5px);
	width: 99%;
	left: 0.5%;
	height: 38px;
} 
.item {
	width: 280px;
	height: 340px;
}
.socialIcon, #igQR {
    position: absolute;
    right: 30px;
    width: 70px;
    height: 70px;
    background-size: 100% 100%;
}


/* ----IDs---- */
#fbIcon {
    top: 60px;
    background-image: url('facebook.png');
}
#igIcon {
    top: 145px;
    background-image: url('instagram.png');
}
#waIcon {
    top: 230px;
    background-image: url('whatsapp.png');
}
#igQR {
    top: 20px;
    align-self: center;
    width: 0%; 
    height: 0%;
    background-image: url('igQR.jpg');
}
#devSec {
    position: absolute;
    top: 350px;
    width: 100%;
    height: calc(100% - 350px);
    background-color: black;
}
#main_bg {
	background: #000 no-repeat center url('cyberbakery.png');
	background-size: 100% 150%;
	-webkit-filter: blur(1px);
    filter: blur(1x);
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 0;
	width: 100%;
	height: 100%;
	opacity: 0.65;
}
#generic_bg {
	position: absolute;
	top: 0px;
	right: 0px;
	min-width: 100%;
	height: 150%;
	background-color: black;
	z-index: -1;
	opacity: 0;
}
#menu {
	position: absolute;
	width: 100%;
	overflow-x: auto;
}
#panel1 {
	top: 30px;
	z-index: 3;
}
#cart_btn, #contact_btn, #social_btn {
	color: rgb(100, 100, 70);
}
#confec_btn {
	color: #003366;
}
#panel2 {
	top: 150px;
	height: 55px;
	z-index: 3;
}
#for_panel {
	top:  25px;
	z-index: 1.5;
	opacity: 0.5;
}
#sec1 {
	left: 0px;
}
#sec2 {
	left: 100%;
}
#sec3 {
	left: 200%;
}
#sec4 {
	left: 300%;
}
#sec1Item1Pic, #cartItem1Pic {
	background-image: url('chocolate_cake.jpeg');
}
#sec1Item2Pic, #cartItem2Pic {
	background-image: url('cascading_oreo_cake.jpeg');
}
#sec1Item3Pic, #cartItem3Pic {
	background-image: url('peanut_butter_chocolate_layer_cake.jpeg');
}
#sec1Item4Pic, #cartItem4Pic {
	background-image: url('funfetti_cheesecake_cake.png');
}
#sec2Item1Pic, #cartItem5Pic {
	background-image: url('oreo_cookies_and_cream_donuts.jpeg');
}
#sec2Item2Pic, #cartItem6Pic {
	background-image: url('boston_cream_doughnuts.jpeg');
}
#sec3Item1Pic, #cartItem7Pic {
	background-image: url('one_bowl_banana_bread.jpeg');
}
#sec3Item2Pic, #cartItem8Pic {
	background-image: url('wool_roll_bread.png');
}
#sec3Item3Pic, #cartItem9Pic {
	background-image: url('quick_and_soft_english_muffins.jpeg');
}
#sec4Item1Pic, #cartItem10Pic {
	background-image: url('beagle.jpeg');
}
#sec4Item2Pic, #cartItem11Pic {
	background-image: url('club_sandwich.jpeg');
}
#sec4Item3Pic, #cartItem12Pic {
	background-image: url('homemade_nutella_croissants.jpeg');
}
#sec4Item4Pic, #cartItem13Pic {
	background-image: url('mini_croissants.jpeg');
}

#cart {
	position: absolute;
	top: 5%;
	width: 0%;
	min-height: 400px;
	left: 3%;
	background-color: white;
	z-index: -1;
	padding: 75px 0px 25px 0px; 
	opacity: 0;
	overflow-y: scroll;
}
#exitCart_btn {
	left: 5%; 
	top: 15px;	
}
#social_bar {
	position: absolute;
	right: 0px;
	top: 0px;
	background-color: rgb(200, 200, 200);
	z-index: -1;
	width: 0px;
	min-height: 100%;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	opacity: 0;
}
#contact_bar {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 0%;
	height: 80%;
	background-color: white;
	opacity: 0;
	z-index: -1;
}
#contact_bar * {
    position: absolute;
}
#contact_form {
    top: 180px;
	left: 5%;
	width: 90%;
	min-height: 60%;
	max-height: 85%;
	background-color: transparent;

}
#contact_bar p {
	top: 90px;
	left: 5%;
    color: rgb(100, 100, 70);
}
#contact_form input {
    width: 100%;
	height: 40%;
	color: rgb(100, 70, 100);
	border: 1px solid rgb(100, 100, 70);
	
}
#contact_form button {
    width: 75px;
	height: 30px;
	bottom: 5%;
	right: 5%;
	color: rgb(100, 100, 70);
	border: 2px solid rgb(100, 100, 70);
	border-radius: 10px;
	background-color: white;
}
#exitContact_btn {
    left: 5%;
}
#footer {
	position: absolute;
	left: 0px;
	width: 100%;
	background-color: 100%;
}
#for_panel {
	left: 10%;
	width: 80%;
	height: 60px;
}
#hr1 {
    position: absolute;
    bottom: 0px;
    left: 10%;
    width: 80%;
}



/* ----Screens---- */

@media screen and (max-width: 660px) {
	
    /* ----Tags---- */
body {
    overflow-y: scroll;
}
* {
    font-size: 17px;
}
form {
    position: fixed;
    left: 2.5%;
    width: 82.3%;
    height: 150px;
    bottom: 10px;
    z-index: 4;
}

    /* ----IDs---- */
#menu {
    top: 170px;
    left: 0px; 
    min-height: 100%;
}
#for_panel {
	top:  30px;
	left: 1.5%;
	width: 97%;
	height: 50px;
}
#panel2 {
	top: 120px;
	height: 55px;
}
#hr1 {
	left: 2.5%;
	width: 95%;
}
#sec1Item2, #sec2Item2, #sec3Item2, #sec4Item2 {
    top: calc(350px + 25px);
}
#sec1Item3, #sec2Item3, #sec3Item3, #sec4Item3 {
    top: calc((2 * 350px) + 45px);
}
#sec1Item4, #sec2Item4, #sec3Item4, #sec4Item4 {
    top: calc((3 * 350px) + 65px);
}
#contact_bar {
	top: 2%;
	left: 10%;
	width: 0%;
	height: 96%;
}
#social_bar {
    height: 150%;
}
#submissionForm label{
    left: 25px;
}
#submissionForm label:nth-child(1){
    top: 30px;
}
#submissionForm label:nth-child(2){
    top: 60px;
}
#submissionForm button {
    right: 25px;
    top: 90px;
    width: 90px;
    height: 50px;
    border: 3px solid rgb(100, 100, 70);
    border-radius: 15px;
}
#igQR {
    top: 1px;
    right: 0px;
    min-width: 100%;    
    max-width: 330px;
    min-height:300px; 
    max-height: 99%;    
}

 
    /* ----Classes---- */
.sec {
    height: ;
}
.item {
	min-width: 200px;
    max-width: 400px;
    min-height: 300px;
	max-height: 550px;
    top: 0px; 
	margin-left: calc((100% - 300px)/2);
	margin-right: calc((100% - 300px)/2);
}
.line1 {
    top: 7px;
	right: 6px;
}
.line2 {
    top: 7px;    
	left: 7px;
}
.item_pic {
	width: 100%;
	height: 80%;
}
.itemName {
font-size: 26px;
    color: rgb(190, 190, 160);
    text-shadow: 0.5px 1.5px rgba(0,0,0,0.5);
}
.cartItem {
    width: 90%;
    height: 130px;
}
.cartItemPic {
    height: 125px;
}
.imgBox {
    position: absolute;
    top: 20px;
    left: 2px;
    max-width: 45%;
    height: 100px;
}
.cartItem button, .qtyOutput {
    bottom: 10px;
    font-size: 60px; 	
}
.qtyOutput {
    left: 195px;
    top: 80px;
}
.minusAmt_button {
    left: 140px;
}
.plusAmt_button {
    left: 215px;
}
.priceOutput {
    left: 180px;
}

}

@media screen and (max-height: 320px) {
#contact_bar p {
	top: 40px;
}
#contact_bar {
    height: 115%;
}
#contact_form input {
    top: -60px;
	height: 40px;
}
#contact_form button {
    top: -5px;
}
}

@media screen and (min-width: 660.1px) and (max-width: 1023px) {
	
    /* ----Tags---- */
    

    /* ----IDs---- */
#menu {
    top: 240px;
    left: 0px; 
    min-height: 100%;
}
#sec1Item1, #sec2Item1, #sec3Item1, #sec4Item1 {
    left: 8%;
    top: 10px;
}
#sec1Item2, #sec2Item2, #sec3Item2, #sec4Item2 {
    left: 50%;   
    top: 10px;
}
#sec1Item3, #sec2Item3, #sec3Item3, #sec4Item3 {
    left: 8%;
    top: 400px;
}
#sec1Item4, #sec2Item4, #sec3Item4, #sec4Item4 {
    left: 50%;   
    top: 400px;
}
#hr1, #for_panel {
    left: 5%;
    width: 90%;
}
#for_panel {
	height: 60px;
}
    /* ----Classes---- */
.item {
	width: 280px;
	height: 320px;
}


}



@media screen and (min-width: 660.1px) {

	/* ----Tags---- */


	/* ----IDs---- */
#cart {
		left:  calc((100% - 500px) / 2);
	}
	#submissionForm {
    position: fixed;
    right:  calc((100% - 600px) / 2);
    top: 140px;
    width: 160px;
    height: 220px;
    border: 2px solid rgb(100, 100, 70);
    border-radius: 25px;
}
#submissionForm label{
    left: 10px;
}
#submissionForm label:nth-child(1){
    top: 30px;
}
#submissionForm label:nth-child(2){
    top: 80px;
}
#submissionForm button {
    right: 10px;
    top: 150px;
    width: 100px;
    height: 60px;
    border: 2px solid rgb(100, 100, 70);
    border-radius: 15px;
    
}

}



@media screen and (min-width: 1023.01px) {
	
/* ----Tags---- */


/* ----IDs---- */

#menu nav {
	top: 2px;
}
#menu {
	top: 193px;
	left: 0px; 
	height: calc(100% - 190px);
	margin-right: 10%;
	margin-left: 10%;
}



/* ----Classes---- */
.background {
	left: 3%;
	width: 94%;
}
.row1 {
	top: 20px;
}
.row2 {
	top: 400px;
}
.row3 {
	top: 700px;
}
.col1 {
	left: 4%;
}
.col2 {
	left: 37%;
}
.col3 {
	left: 68.5%;
}


}