style.css

body {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  header {
    background-color: #333;
    color: #fff;
    padding: 20px;
  }
  
  h1 {
    margin: 0;
  }
  
  main {
    margin: 20px;
  }
  
  #blog-list {
    margin-bottom: 20px;

  }
  
  .blog-post {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #328a26;
    opacity: 80%;
  }
  
  .blog-post h3 {
    margin-top: 0;
    text-align: center;
  }
  
  #blog-form label {
    display: block;
    margin-top: 10px;
  }
  
  #blog-form input,
  #blog-form textarea {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
  }
  
  #blog-form button {
    background-color: #f00;;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    
  }
  a{text-decoration: none;}
  footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
  }
  


  @font-face {
	font-family:'Decovar Regular24'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf');
}

h1 {
	margin: 0;
	font-size: 20vw;
	position: relative;
	font-weight: 400;
	/* // Variable font */
	font-family: "Decovar Regular24"; 
	font-variation-settings: 'INLN' 400, 'SWRM' 1000;

	
	/* // Background clip to image */
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;	
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/209708058_b5a5fb07a6_o.jpg);
	background-size: 30%;
	background-repeat: repeat;
	
	text-shadow: 2px 2px 5px rgba(#2a4308, 0.4);
	animation: grow 3s linear infinite alternate;
	
	&:before {	
		text-shadow: 
			1px 1px 2px rgba(#2a4308, 0.5),
			-1px 1px 2px rgba(#2a4308, 0.5),
			-1px -1px 2px rgba(#2a4308, 0.5),
			1px -1px 2px rgba(#2a4308, 0.5),
			3px 3px 20px rgba(#000, 0.5);
	}
	
	&:after {
		color: #421F00;
		font-variation-settings: 'INLN' 0;
	}
}

.warning{
    background-color: black;
    color: white;
    text-align: center;
}

@keyframes grow {
	0% {
		font-variation-settings: 'INLN' 400, 'SWRM' 1000;
	}
	
	100% {
		font-variation-settings: 'INLN' 400, 'SWRM' 0;
	}
}


/* //Positioning */
html {
	height: 100%;
}

body {
	background: radial-gradient(ellipse at center, #adbf41 20%,#328a26 80%);
	height: 100%;
}

h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	letter-spacing: 0.6rem;
	
	&:after, &:before {
		content: attr(data-text);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		z-index: -1;
		position: absolute;
		left: 0;
		top: 0;
	}
}