*, *::before, *::after {
	 margin: 0;
	 padding: 0;
	 box-sizing: inherit;
}
 html {
	 box-sizing: border-box;
}
 body {
	 background: #263238;
	 font-family: "Nunito", sans-serif;
}
 .container {
	 margin: auto auto;
	 height: 90vh;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
}
 .tittle, .subtitle {
	 margin-bottom: 40px;
	 color: #44b9ff;
	 letter-spacing: 4px;
	 text-transform: uppercase;
}
 .square-container {
	 list-style-type: none;
	 display: flex;
	 position: relative;
}
 .square {
	 margin: 4px;
	 width: 30px;
	 height: 30px;
	 border-radius: 7px;
	 animation: rotating 2.5s ease infinite;
}
 .square1 {
	 background: #736efe;
	 animation-delay: 0.2s;
}
 .square2 {
	 background: #5999ff;
	 animation-delay: 0.4s;
}
 .square3 {
	 background: #44b9ff;
	 animation-delay: 0.6s;
}
 .square4 {
	 background: #31d8ff;
	 animation-delay: 0.8s;
}
 .square5 {
	 background: #18ffff;
	 animation-delay: 1s;
}
 @keyframes rotating {
	 0% {
		 transform: rotate(0) scale(1);
	}
	 50% {
		 transform: rotate(90deg) scale(0.6);
	}
	 100% {
		 transform: rotate(90deg) scale(1);
	}
}
 footer {
	 margin: auto auto;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 margin-bottom: 10px;
	 color: #31d8ff;
}
 footer a {
	 color: #736efe;
}