Time And Season

✨ TANYA SISOOK

<html>
<head>
	<title>Time And Season</title>
  <style>
	    :root{
      --h:330;
      --l:0;
    }
    @font-face {
       src: url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
    }

* {
       font-family: 'Bebas Neue', cursive;
    }
    
    body{
      height:100%;
      width:100%;
      background:hsl(183, 100%, calc(var(--l)*1%));
      margin:0%;
    }

.spring-wall{
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2MvOVq.png");
      height: 100%; 
      width:100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top:auto;
      visibility:hidden;
    }
      .summer-wall{
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2MvgCy.png");
      height: 100%; 
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top:auto;
      visibility:hidden;
    }
      .autumn-wall{
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2Mvci1.png");
      height: 100%; 
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top:auto;
      visibility:hidden;
    }
      .winter-wall{
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2MviID.png");
      height: 100%;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top:auto;
      visibility:hidden;
    }
    
    button{
      border-radius:40px;
      margin-left:30px;
      padding-left:0%;
      text-transform: uppercase;
      cursor:pointer;
      font-size:15px;
      border:2px solid white;
    }
    .text{
      margin-left:30px;
      background-color:hsl(183, 100%, calc((90 - var(--l))*1%));;
      color:hsl(183, 100%, calc(var(--l)*1%));
		border-radius:5px;
      border:2px solid;
      text-transform: uppercase;
      cursor:pointer;
      font-size:25px;
      box-shadow:2px 1px 0px 0px hsl(183, 100%, calc((90 - var(--l))*1%));
  
    }
    .season-bar{
		-webkit-appearance: none;
      -moz-appearance: none;
     	appearance: none;
      width:14%;
      height: 10px;
      border-radius: 20px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      margin-left:10px;
    }
    .season-bar::-webkit-slider-thumb {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 50px;
      height: 50px;
      border: 0;
      background: url('https://sv1.picz.in.th/images/2021/08/25/2MtGvZ.png');
      cursor: pointer;
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
	}
    .sun{
		width:150px;
      height:150px;
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2Mtvju.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
		margin-left:50%;
      margin-top:calc((90 - var(--l)) * 4px);
      animation: animate 5s infinite;
      animation-fill-mode:backwards;
      position:absolute;
      z-index:-1;
    }

#spring{
      width:50px;
      height:50px;
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2Mvw5g.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    } 
    #summer{
      width:50px;
      height:50px;
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2Mv1VW.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }    
    #autumn{
      width:50px;
      height:50px;
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2MvE5a.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }    
    #winter{
      width:50px;
      height:50px;
      background-image: url("https://sv1.picz.in.th/images/2021/08/25/2MvZS2.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
      
    body[data-season="spring"] .spring-wall{
        visibility:visible;
      }
    body[data-season="summer"] .summer-wall{
        visibility:visible;
      }
    body[data-season="autumn"] .autumn-wall{
        visibility:visible;
      }
    body[data-season="winter"] .winter-wall{
        visibility:visible;
      }
    
    .container{
      width:100%;
      position:absolute;
      margin-top:20px;
    }

</style>
  
</head>
<body data-season="spring">