html, body {
	height: 100%;
	margin: 0;
	font-family: 'Helvetica', 'Arial', sans-serif;
	color: #50585D;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    text-align: center;
    background: rgb(255,161,127);
    background: linear-gradient(135deg, rgba(255,161,127,1) 0%, rgba(0,34,62,1) 100%);
    color: white;
}

main {
    flex: 1;
    display: flex;
}

header {
    margin: auto;
    position: relative;
    top: -30px;
}

h1 {
    font-size: 3.2em;
    margin-block-end: 0.4em;
}

h1 + p {
    font-style: italic;
    font-size: 1.1em;
}

a {
	text-decoration: none;
    color: #f5aa44;	
}

a:hover {
    text-decoration: underline;
    color: #f5aa44;	
}

  .sun { 
    position: absolute;
      top:70px;
      left:70px;
      margin: auto;  
      width:70px;
      height:70px;
      border-radius:50%;	
      background:white;
      opacity:0.9;			
      box-shadow: 0px 0px 40px 15px white;  
  }
  
  .ray_box {
    position: absolute;
    margin: auto;
      top:0px;
      left:0;
      right:0;
      bottom:0;	
    width:70px;  
    -webkit-animation: ray_anim 120s linear infinite;
    animation: ray_anim 120s linear infinite;
  }
  .ray {  
      background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
          background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
      margin-left:10px;
      border-radius:80% 80% 0 0;
      position:absolute;
      opacity:0.1;
  }
  
  .ray1 {    
      height:170px;
      width:30px;
     -webkit-transform: rotate(180deg);
      top:-175px;
      left: 15px;
  }
  .ray2 {
      height:100px;
      width:8px;
     -webkit-transform: rotate(220deg);
      top:-90px;
      left: 75px;
  }
  .ray3 {
      height:170px;
      width:50px;
     -webkit-transform: rotate(250deg);
      top:-80px;
      left: 100px;
  }
  .ray4 {
      height:120px;
      width:14px;
     -webkit-transform: rotate(305deg);
      top:30px;
      left: 100px;
  }
  .ray5 {
      height:140px;
      width:30px;
     -webkit-transform: rotate(-15deg);
      top:60px;
      left: 40px;
  }
  .ray6 {
      height:90px;
      width:50px;
     -webkit-transform: rotate(30deg);
      top:60px;
      left: -40px;
  }
  .ray7 {
      height:180px;
      width:10px;
     -webkit-transform: rotate(70deg);
      top:-35px;
      left: -40px;
  }
  .ray8 {
      height:120px;
      width:30px;
     -webkit-transform: rotate(100deg);
      top:-45px;
      left:-90px;
  }
  .ray9 {
      height:80px;
      width:10px;
     -webkit-transform: rotate(120deg);
      top:-65px;
      left:-60px;
  }
  .ray10 {
      height:190px;
      width:23px;
     -webkit-transform: rotate(150deg);
      top:-185px;
      left: -60px;
  }
  
  
  @-webkit-keyframes ray_anim { 
          0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
      100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
  }