@import url('https://fonts.googleapis.com/css?family=Lora|Patua+One|Baloo+Thambi+2|Roboto+Slab:wght@300;500&display=swap');

:root {
  --main-bg-color:rgb(235, 235, 235);
  --header-bg-color:white;
  --main-txt-color:rgb(12, 44, 37);
  --second-color:rgb(205, 212, 97);
}
 
*{
	margin: 0;
	padding: 0;
	list-style: none;	
	box-sizing: border-box;
} 

html{
	background: var(--main-bg-color);
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	font-size: 1em;
	color:var(--main-txt-color);	
	word-wrap: break-word;
}

header {		
	background: var(--header-bg-color);
	flex: 2;
    padding: 2rem;	
}


main {			
	flex: 2 700px;
    padding: 2rem;
	
}

address{
	font-style: normal;
	color:var(--main-txt-color);	
}



h1,h3,h5{
	text-align: center;
	text-transform: uppercase;
}
main h3{
	text-align: left;	
}
header h3{margin-top:100px;}
h1{font-family: 'Patua One', cursive;}
h3{
	font-family: 'Lora', serif;
	margin:0 0 20px 0;
	border-bottom:10px solid var(--second-color);
	letter-spacing: .4em;	
	display: inline-block;
}
h5,h4{font-family: 'Baloo Thambi 2', cursive; font-size: 1em;}

main h5{
	text-align: left;
	margin:5px 0 5px 0;
}

a{
	font-size: 0.8em;
}


nav ul{
	margin:0 auto;
	text-align: center;
}
nav ul li{
	display: inline-block;
	padding:10px 5px;	
	margin:0 !important;		
}

nav ul li a {
	color:var(--main-txt-color);
	text-decoration: none;
	
}

nav ul li a:hover{
	color:grey;
}

button{
	border:none;
	background: var(--header-bg-color--);
	cursor:pointer;
}


main p{
	font-size:1.3rem;
	margin-bottom:15px;
}



.cv-item{
	border:2px solid;
	padding: 0.4rem;
	margin: .5rem 0.2rem;  	  
	flex:2 300px;	
}

#header i{
	font-size: 3em;
	color:var(--main-txt-color);
	margin:40px 0;
}

#header nav i{
	font-size: 1.1em;
	margin:0;
}

#main li{
	list-style-type: square;
	list-style-position: inside;
}

i:hover{
	color:var(--second-color);
}


#language {
	font-size:.9em;
}
#skills{
	clear: both;	
}



#skills ul li{
	margin-bottom:0.2em;
}

#points{	
	float:right;
	margin:-180px 50px 0 0;	
}
#points li{
	list-style: none !important;	
	font-size: 1.2em !important;	
	border:none;
	padding: 0;
}

#address {	
	text-align: center;
}

#container {	
	display: flex;
    width: 100%;
    height: 100vh;    
	flex-wrap: wrap;
}

#logo {		
	filter:grayscale(50%);
	margin:20px auto;	
}

#phone{
	margin:20px 0 20px 0;
	border:1px solid;
	padding:5px;
	display:block;
	box-shadow: 5px 5px;
}

#header{
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

::selection{
	background-color:var(--main-txt-color) ;
	color:var(--second-color);
}



@media print {
	#points{
		display:none;
	}
	body{
		font-size: .9em;
	}
  }

  @media (max-width:768px){
	#points{
		display:none;
	}
  }