@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
	 font-family: 'Poppins', sans-serif;
	 scroll-behavior: smooth;
	 /*
		*
		*/
}

main {

	 section {
			width: 100%; height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 8em;
			font-weight: 800;
			text-align: center;
			color: rgba(0, 0, 0, 0.25);
			text-transform: uppercase;
			background: var(--clr);
			/*
			 *
			 */
	 }

}

header {
	 position: fixed;
	 bottom: 0; width: 100%;
	 background: #333;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 0px 50px 10px;

	 a.logo {
			position: relative;
			color: #fff;
			font-size: 2em;
			font-weight: 700;
			text-decoration: none;
	 }

	 nav {
			display: flex; gap: 10px;

			a {
				 position: relative;
				 text-decoration: none;
				 padding: 12px 20px;
				 color: #fff;
				 font-weight: 500;

				 &.active {
						background: var(--clr);
						color: #333; 
						border-bottom-left-radius: 10px;
						border-bottom-right-radius: 10px;

						&::before, &::after {
							 content: '';
							 position: absolute;
							 top: 0;
							 width: 20px; height: 20px;
							 background: transparent;
						}
						&::before {
							 border-top-right-radius: 20px;
							 left: -20px;
							 box-shadow: 5px -5px 0 5px var(--clr);
						}

						&::after {
							 border-top-left-radius: 20px;
							 right: -20px;
							 box-shadow: -5px -5px 0 5px var(--clr);
						}
				 }
			}
	 }
	 /*
	 */
}