@charset "utf-8";

/* =============================================
	Top Bar
   =============================================
*/

nav {
	display: flex;
    align-items: center;
    background: black; 
	margin-bottom: 20px;
}

.menu.show-menu {
    display: block;
}

/* Style list items (links) */
.top-bar li {
  display: inline-block;
  margin-right: 10px; 
}

/* Style link text */
.top-bar a {
	text-decoration: none;
	display: inline-block;
	color: white; 
	padding: 2px; 
	transform: scale(1,1) translateY(0px);
	transition: all 1.2s;
	font-size: 2.1vw;
}

/* Style visited link text */
.top-bar a:visited {
	text-decoration: none;
	display: inline-block;
	color: white; 
	padding: 2px; 
}

/* Hover effect for links */
.top-bar a:hover {
	background-color: #ccfff2; 
	border-radius: 5px;
	color: gray;
	text-shadow: rgba(0, 0, 0, 0.5) 0px 15px 4px;
	transform: scale(1.2,1.2) translateY(-15px); 
}

/* Style the first and last link differently */
.top-bar li:first-of-type:hover, 
.top-bar li:last-of-type:hover {
    font-style: italic; 
}

/* =============================================
	Nav Icon
   =============================================
*/
.menu-text {
    color: white;
    font-size: 18px;
}

.cupcake-icon {
    margin-bottom: 5px; 
	font-size: 32px;
}

.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navicon {
    display: flex;
    align-items: center;
    font-size: 32px;
    cursor: pointer;
    margin-right: 10px;

}

/* =============================================
	Media Queries
   =============================================
*/

/* Hide the menu by default only on smaller screens (mobile devices) */
@media (max-width: 768px) {
    .menu {
        display: none;
    }
	.top-bar a {
		font-size: 14px;
	}
}