body {
			margin:0px;
			padding:0px;
		}
		
		p {
			margin:0px;
			padding:0px;			
		}
		
		.header {
			font-family: Exo, serif;			
			font-size: 360%;
			color: #3760ab;
			font-weight: bold;
			padding: 0px 0px 10px 5px;
		}

		.szlogen {
			font-family: Exo, serif;			
			font-size: 100%;
			color: #3760ab;
			font-style: italic;
			padding: 0px 0px 10px 5px;			
		}
		
		.activities {
			font-family: Exo, serif;
			font-size: 14px;
			background-color: #ffffff;
			box-shadow: 5px 5px 5px #a5a5a5;
			float: left;
			margin: 5px;
			padding: 15px;
			width: 300px;
			height: 300px;
			border: 1px solid #727272;
		}
		
		@media only screen
		and (min-width : 480px)
		and (max-width : 800px) {
			.header { font-size: 320%; text-align: left }
			.szlogen { font-size: 100%; text-align: left }
		}
		@media only screen
		and (min-width : 320px)
		and (max-width : 480px) {
			.header { font-size: 200%; text-align: left }
			.szlogen { font-size: 100%; text-align: left }
		}
		@media only screen
		and (min-width: 240px)
		and (max-width: 320px) {
			.header { font-size: 200%; text-align: left }
			.szlogen { font-size: 100%; text-align: left }
		}
		
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }