style.css

/* 
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
*/

/* Load Google Font */
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Londrina+Solid:wght@100;300;400;900&family=Patrick+Hand&family=Sunflower:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Londrina+Solid:wght@100;300;400;900&family=Patrick+Hand&family=Sunflower:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Kosugi+Maru&family=Londrina+Solid:wght@100;300;400;900&family=Patrick+Hand&family=Sunflower:wght@300&display=swap');


main {
background: #70e1f5;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #ffd194, #70e1f5);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #ffd194, #70e1f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* background: #70e1f5;  /* fallback for old browsers */
/* background: -webkit-linear-gradient(to top, #ffd194, #70e1f5);  Chrome 10-25, Safari 5.1-6 */
/* background: linear-gradient(to top, #ffd194, #70e1f5); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ */


/* Style Tile with css variables */



:root {
  --color1: #414345;
  --color2: rgb(91, 114, 138);
  --color3: #FEAC5E;
  --font1: "Londrina Solid", sans-serif;
  --font2: "Sunflower", sans-serif;
}


:root {

  --color1:#414345;
 --color2: rgb(91, 114, 138);
 --color3: #decba4;
 --color4: #41403E;
 --color5: #485563;
 --font1: "Londrina Solid", sans-serif;
  --font2: "Sunflower", sans-serif;
  --font3: "Concert One", sans-serif;
}







main {
  display: grid;
  grid-template-columns: 1fr ;
  
  /* on hover left colum, no background image */
article:hover {
  background-image: none;}
}

h1 {
  color: var(--color3);
  font-family:"Concert One", sans-serif;
  font-size: 3em;
  border:solid 4px var(--color4);
  padding: 8px; 
  background-color:var(--color5);
  position: relative;
  right: 32%;
  top:10.5%;
  
}

  
  p{ 
    color: var(--color3);
  font-family:"Sunflower", sans-serif;;
  font-size:1em;
  font-size: 1.5em;
  border:solid 4px var(--color4);
  padding: 8px; 
  background-color:var(--color5);
  width: 50%;
  position: relative;
  left: 24%;
  bottom: 22%;
  }
  
  

nav {
  font-size:1.5em;
  position: relative;
  bottom: 14%;
  flex-grow: 1;
}


  nav {
    background: rgba(0, 0, 0, 0.11);
  
    display: flex;  
    align-items: center;
    justify-content: space-around;
  }
  
  nav h1 {
    flex-grow: 1;
  /* margin-right: auto also works */
  }
  
  nav a:link,
  nav a:visited {
    
    color: white;
    text-decoration: none;
    padding: .5em;
    margin: .5em;
  }
  
  nav a:focus {
    background: #ffc3a0;
  }
  
  nav a:hover, 
  nav a:active {
    background: #ffc3a0;;
  }
  
 









  
  /* Article */
article {
  display: flex;
  flex-direction: column;
  /* main axis   */
  justify-content: center;
  /* cross axis   */
  align-items: center;
  
  padding: 2em;
}
  
  
  


  /* aside image */
   img { 
    width: 80%;
    max-width: 100%;
   
    /* full height     */
    height: 100vh;
    object-fit: cover;
    border:solid 8px #41403E;
    
    
  }









/* background: #FFEEEE;  fallback for old browsers */
/* background: -webkit-linear-gradient(to top, #DDEFBB, #FFEEEE);  Chrome 10-25, Safari 5.1-6 */
/* background: linear-gradient(to top, #DDEFBB, #FFEEEE); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



h1,p {
  animation-name: fadeInUpBig;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

nav {
  animation-name: fadeInLeft;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

img {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}