html{
margin: 0;
min-height:100%;
}

body {
margin: 0;
min-height: 100%;
background-color: #fef2e9;
}


#lines {
  display:none;
}

svg {
  overflow:visible;
}


article:nth-child(1){
margin-top: 800px;
}


strong{
display: inline-block;
	}

#header{
/*  background-color: #f1f1f1;  Grey background */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #f1f1f1);
  padding: 15px 10px;
  color: black;
  text-align: center;
  font-size: 60px;
  font-weight: bold;
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.4s; /* Add a transition effect (when scrolling - and font size is decreased) */
					/* 	display: flex;  */

}



h2:nth-child(1){
margin-top: 600px;
}

h2{
font-size: 50px;
}


.blogsection {
font-size: 20px;
margin: 50px;
}


nav{
display: flex;
position: fixed;
justify-content: end;
width: 100%;
}

ul{
margin:60px;
}

li{
list-style-type: none;
width: 10vw;
margin:30px;
}

nav a{
text-decoration:none;
color:pink;
border: white 0.5rem solid;
font-size: 30px;
outline: 2px dashed magenta;
text-outline: 3px 3px #ccc;
font-family: "Roboto Slab", serif;

}


section {
font-size: 20px;
}

article {
margin-top:100px;
font-size: 8px;
}


ul{
	
}

img {
width:90px;
height: 90px;
border-radius: 25% 50% 25% 50%;
}


.ankara{
margin-top: 600px;
}

.knockout{
background-image: url('pics/canyon.jpg');
background-size: cover;
background-clip: text;
color: transparent;
}


section, .content {
width: 75%;
display: flex;
flex-wrap: wrap;
}


figure, .container {

display:flex;
flex-direction: row;
height:300px;
color:pink;
font-size:60px;
flex-wrap: wrap;
background-image: url('pics/boring.jpg');
background-color: blue;
background-size: contain;
}


figcaption{
margin-top: auto;
background-color: blue;
}

.organic {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
}

.koper:first-child{
	grid-area: 1/2;
}

.koper:nth-child(1){
	grid-area: 2/3;
}

.koper:nth-child(2){
	grid-area: 2/3;
}

.koper:nth-child(3){
	grid-area: 1/3;
}


.containergallery {
display: grid;
width: 50vw;
grid-template-columns: repeat(4, 12.5vw);
grid-template-rows: repeat(4, 12.5vw);
}


.gallery{
margin: 0;
height: 0;
padding-top: 25vw;
overflow: hidden;
position: relative;
/*clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);*/

}

.gallery img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
object-fit: cover;
object-position: top;
transition: clip-path 1s;
}


gallery:hover{
	clip-path: circle(100% at 50% 50%);
}

.containergallery:first-child{
	clip-path: circle(100% at 100% 100%)
}

.containergallery:nth-of-type(2){
	clip-path: circle(100% at 0% 100%)
}

.containergallery:nth-of-type(3){
	clip-path: circle(100% at 0% 0%)
}

.containergallery:nth-of-type(4){
	clip-path: circle(100% at 100% 0%)
}