* {
	box-sizing: border-box;
}

:root{
	--bg-color-main: #eeeaea;
	--bg-clr-2:rgb(29, 27, 27);
	--font-clr-light: rgb(201, 221, 221);
	--height: 15em;
	--salmon-red:#f94f4f;
}


body{
	margin: 0;
	font-family: 'Glory', sans-serif;	
	font-size: 1.2rem;
}

header{
	width: 100%;	
	text-align: center;
	background-color: rgb(255, 255, 255);
	z-index: 99;	
}

img {
	
}

img.logo {
	margin-top: 4em;
	padding: 1em;
	width: 100%;
	max-width: 500px;
}

img.profile {	
	width: 100%;
	max-width: 250px;
	border-radius: 50%;
}

.col img {
	width: 100%;
	max-width: 300px;
	box-shadow:3px 3px 8px grey;
	border-radius: 49%;
}

img.img {
	width: 100%;
	max-width: 100px;
	margin: 0 auto;
	text-align: center;
	padding: 1em;
}

h1 {
	font-size: 3rem;
	color:orangered;
}

h2 {
	font-size: 2.5rem;
	color:orangered;
}

h3 {
	font-size: 1.8rem;	
}

p {
	font-weight: 200;
}

a {
	color: #000;
}

#btn {
	padding: 2em 0em;
}

.btn {		
	text-decoration: none;
	background-color: #000;
	color: orangered;
	padding: 0.5em 1em;
	border-radius: 30px;	
	text-transform: uppercase;
	font-size: 1.1rem;
	font-weight: 500;
}

.btn:hover {
	background-color: orangered;
	color: #000;
}

.container_dark {	 				
	background-color: rgb(39, 37, 37);
	color: #fff;
	position: relative;
}

.container__mid {	 				
	color: #272829;
}

.cont__max {
	width: 85%;
	max-width: 900px;
	margin: 0 auto;
	padding: 2em 0;	
}

.row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.col {
	width: 100%;	
	padding: 1em;
}

.prof {
	margin: 0 auto;
}

footer {
	background-color: rgb(235, 164, 11);
	padding: 1em;
}

/*                       NAVIGOINTI             */

nav{ 
	width: 100%;
   	overflow: hidden;
	background-color: #000; 
	padding: 1em;
	border-bottom: 2px solid #fff;
	position: fixed;
	z-index: 99;
}

nav a {
	text-decoration: none;
	color:#fff;
	font-size: 1.1rem;
	font-weight: 400;
	text-transform: uppercase;
	padding: 0 0.7em;
}

nav a:hover {
	color: orangered;
}

a.icon {
	display: none;
}


/*sivun alkuun -nappi */
#myBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 15px; /* Place the button at the bottom of the page */
	right: 40px; /* Place the button 30px from the right */
	z-index: 999; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: orangered; /* Set a background color */
	opacity:0.7;
	color: #000; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 0.5em; /* Some padding */
	border-radius: 5%; /* Rounded corners */
	font-size: 1.1em; /* Increase font size */
	margin-bottom:5em;
	right: 0;	
  }

  #myBtn:hover {
	opacity: 1;
	color:#fff;
  } 

 

 @media screen and (max-width: 770px) {
	.nav a:not(:first-child) {display: none;}
	.nav a.icon {
	  float: right;
	  display: block;
	 
	}

	.row {
		flex-direction:column;
	}

	nav {
		position: absolute;
	}
	
  }
  
  @media screen and (max-width: 770px) {
	.nav.responsive {position: relative;}
	.nav.responsive .icon {
	  position: absolute;
	  right: 0;
	  top: 0;
	  padding: 1em;
	}
	.nav.responsive a {
	  float: none;
	  display: block;
	  text-align: left;
	  padding: .5em;
	}	
	
  }

  @media screen and (max-width: 400px) {

	h1,
	h2 {
		font-size: 2rem;
	}



  }