*{
	margin: 0; padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

html, body{
		display: grid;
		height: 100%;
		place-items: center;
		/* background: linear-gradient(to bottom, #000000, #201802) no-repeat;  #EFBCD5 */
		background-color: #EFBCD5;
		animation: backgrund 8s linear infinite;
		overflow: hidden;
}

@keyframes backgrund {
	0% {
		background-color: #A11CF5;
		background-position: 1%;
	}

	100% {
		background-color: #EFBCD5 /* linear-gradient(to bottom, #EFBCD5, #EFBCD5) no-repeat; */
		background-position: 400%;
	}
}

button{
		position: relative;
		height:60px;
		width: 200px;
		margin : 0 35px;
		border-radius: 50px;
		border: none;
		outline: none;
		background: #111;
		color: #fff;
		font-size: 16px;
		letter-spacing: 2px;
		text-transform: uppercase;
		cursor: pointer;
}

button:first-child:hover{
		background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
		background-size: 400%;
}
button:last-child:hover{
	background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
	background-size: 400%;
}

button:first-child:before,
button:last-child:before{
		content: '';
		position: absolute;
		background: inherit;
		top: -5px;
		right: -5px;
		left: -5px;
		bottom: -5px;
		border-radius: 50px;
		filter: blur(20px);
		opacity: 0;
		transition: 5s;
}

button:hover:first-child:before,
button:hover:last-child:before{
	opacity: 1;
	z-index: -1;
}

button:hover{
	z-index: 1;
	animation: glow 8s linear infinite;
}

@keyframes glow {
	0% {
		background-position: 0;
	}

	100% {
		background-position: 400%;
	}
}
/* KAYAN ŞEYLER BİTİŞİ*/

img.background, img.foreground {
    /* Fill background */
    min-height: 100%;
    min-width: 1024px;
    
    /* Scale proportionately */
    width: 100%;
    height: auto;
}

img.background {
    /* Positioning */
    position: fixed;
    top: 0;
    left: 0;
}


.section {
  min-height: 100vh;
  position: relative;
}


  .section > div {
    position: fixed;
    color: white;
    /* centers this div */ 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .section-1 {
    margin-bottom: 500px; /* determines the gap between our two sections */
    font-size: 4em;
  }

  .section-2 {
    opacity: 0; /* defaults to 0 because it's not visible */
  }

  .section-2 div {
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    text-align: center;
    padding: 50px;
    max-width: 300px;
  }

  .section-2 h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }

  .section-2 p {
    line-height: 150%;
  }