index.css

body {
	/* to avoid horizontal overflow */
	overflow-x: hidden;
	/* CSS variables */
	--smooth-edge-radius: 15px;
	--main-font-size : 25px;
	
	--margin-thickness: 10px;
	--half-margin-thickness: calc(var(--margin-thickness) / 2) ;
	--padding-thickness: 15px;
	
	--minimized-card-height: 70px;
	--card-titlebar-height: calc(var(--minimized-card-height) - calc(2*var(--margin-thickness))); 
	/* square buttons */
	--card-btn-height: var(--card-titlebar-height);
	--card-btn-width : var(--card-btn-height);

}
* {
	/* CSS reset */
	padding: 0px;
	border: none;
	margin: 0px;
}

.control-btn {
	/* vertically above all the other elements */
	z-index: 1; 
	box-shadow: 5px 5px 5px 0 grey; 
	/* buttons are fixed to the bottom of the browser */
	position: fixed;
	bottom: 50px;
	
	font-size: var(--main-font-size);
	/* 1.5 times it's font-size */
	height: 2em; 
	width: 2em;
	/* circular button */
	border-radius: 50%; 
}
.control-btn:hover {
	cursor: pointer;
	/* animating color change effect */
	transition: background-color .1s; /* for microsoft IE */
	-o-transition: background-color .1s; /* for opera */
	-moz-transition: background-color .1s; /* for Mozilla Firefox */
	-webkit-transition: background-color .1s; /* for Google-Chrome and Safari */
}
#addNewMenteeButton {
	right: 50px;
	background-color: steelblue;
}
#addNewMenteeButton:hover {
	background-color: springgreen;
}
#deleteAllButton {
	left: 50px;
	background-color: orange;
}
#deleteAllButton:hover {
	background-color: red;
}
#sortButton {
	/* browser center align */
	right: calc(50% - calc(2em / 2));
	background-color: darkseagreen;
}
#sortButton:hover {
	background-color: darkturquoise;
}

/* for screen width less than 1200px */
@media only screen and (max-width: 1200px) {
	.mentee-card {
		width: calc(100% - calc(2*var(--margin-thickness))); 
	}
}
/* for screen width greater than 1200px and less than 1800px*/
@media only screen and (min-width: 1200px) {
	.mentee-card {
		width: calc(50% - calc(2*var(--margin-thickness))); 
	}
}
/* for screen width greater than 1800px */
@media only screen and (min-width: 1800px) {
	.mentee-card {
		width: calc(33.33% - calc(2*var(--margin-thickness))); 
	}
}
.mentee-card {
	position: relative;
	display: inline-block;
 	/* initial card height */
	max-height: var(--minimized-card-height);
	/* vertical margins add up */
	margin: var(--half-margin-thickness) var(--margin-thickness) var(--half-margin-thickness) var(--margin-thickness);
	border-radius: var(--smooth-edge-radius); 
	
	float: left;
	overflow: hidden;

	background-color: lightgrey;
	/* for animating the maximizing and minimizing effect */
	transition: max-height .75s;
	-o-transition: max-height .75s;
	-moz-transition: max-height .75s;
	-webkit-transition: max-height .75s;

	box-shadow: 3px 3px 3px 0 grey;
}
.mentee-card:hover {
	box-shadow: 8px 8px 8px 0 grey;
	/* animation of shadow */
	transition: box-shadow .3s;
	-o-transition: box-shadow .3s;
	-moz-transition: box-shadow .3s;
	-webkit-transition: box-shadow .3s;
	/* 'height' is not and animatable porperty, but 'max-height' can be animated. */
	/* when the max height changes (during maximizing the card), the height of the card will change because of the text area */
	/* initially when the max-height is set to 70px the <textarea> is not rendered on screen but is still present */
	transition: max-height .75s;
	-o-transition: max-height .75s;
	-moz-transition: max-height .75s;
	-webkit-transition: max-height .75s;
}

.pin-card-btn {
	position: absolute;
	left: var(--half-margin-thickness);
	top: var(--half-margin-thickness);

	height: calc(var(--card-btn-height) / 2);
	width: calc(var(--card-btn-width) / 2);

	font-size: calc(var(--main-font-size) / 2);
	background-color: gray;
	border-radius: 50%;
}

.card-titlebar {
	display: inline-block;
	height: var(--card-titlebar-height);
	width: calc(100% - calc(3*var(--card-btn-width) + 5*var(--margin-thickness))); 
	/* has a margin on all 4 sides */
	margin: var(--margin-thickness) var(--margin-thickness) var(--margin-thickness) var(--margin-thickness);
	border-radius: var(--smooth-edge-radius);
	/* to horizontally center align the name */
	text-align: center; 
	/* to vertically center align the name */
	line-height: var(--card-titlebar-height); 

	overflow: hidden; 
	font-size: var(--main-font-size);
	background-color: darkgrey;  
}
.card-titlebar:hover {
	cursor: default;
}

.card-btn {
	margin: var(--margin-thickness) var(--margin-thickness) var(--margin-thickness) 0px;
	font-size:var(--main-font-size);
	height: var(--card-btn-height);
	width: var(--card-btn-width);
	border-radius: var(--smooth-edge-radius);	
}
.card-btn:hover {
	cursor: pointer;

	transition: color .1s;
	-o-transition: color .1s;
	-moz-transition: color .1s;
	-webkit-transition: color .1s;	
}
.delete-card-discard-changes-btn {
	position: absolute;
	right: 0px; 	
	background-color: darkgrey;
}
.delete-card-discard-changes-btn:hover {
	color: red; 
}
.edit-card-save-changes-btn {
	position: absolute;
	right: calc(var(--card-btn-width) + var(--margin-thickness)); 	
	background-color: darkgrey;
}
.edit-card-save-changes-btn:hover {
	color: green;
}
.maximize-minimize-card-btn {
	position: absolute;
	right: calc(2*var(--card-btn-width) + 2*var(--margin-thickness));  	
	background-color: darkgrey;
}
.maximize-minimize-card-btn:hover {
	color: steelblue;
}

.editable-content {
	text-align: center;
	font-size: 40px;
}
.card-textarea {
	resize: none;

	height: calc(250px - 2*var(--padding-thickness)); 
	width: calc(100% - calc(2*var(--margin-thickness) + 2*var(--padding-thickness)));

	padding: var(--padding-thickness) var(--padding-thickness) var(--padding-thickness) var(--padding-thickness);
	margin: 0px var(--margin-thickness) var(--margin-thickness) var(--margin-thickness);
	border-radius: calc(var(--smooth-edge-radius) / 2);
	
	background-color: darkgrey;
	font-size: calc(2*var(--main-font-size)/3);
}

.rating-star {
	margin: none;
}