:root{
  --clr-neon: hsl(320 100% 54%);
  --crl-bg: hsl(300 21% 16%);
}

/* background transparency */

body {
 margin: 0 50px;
 font-family: sans-serif
}

h1, h4 {
 margin: 0;
}

h1 {
 margin: 0 0 10px;
}

div {
 background: black;
 border-radius: 10px;
 color: #efefef;
 margin: 50px auto;
 padding: 25px;
 width: 1000px;
 position: relative;
}

.neonday{
  font-size: 3rem;

  font-display: inline-block;
  text-decoration: none;
  color: rgb(190, 190, 190);
  border: rgb(190, 190, 190) 0.125em solid;
  display: grid;
  padding: 0.25em 1em;
  border-radius: 0.25em;

  background-color: orange;
  background-image: url(images/Helios.png);
}

 .neonsunset{
  font-size: 3rem;

  font-display: inline-block;
  text-decoration: none;
  color: rgb(199, 158, 185);
  border: rgb(199, 158, 185) 0.125em solid;
  display: grid;
  padding: 0.25em 1em;
  border-radius: 0.25em;
  text-shadow: 
  0 0 0.125em hsl(0 0% 50% / 0.3),
  0 0 0.45em currentColor;

  box-shadow: inset 0 0 0.5em 0 rgb(199, 158, 185), 0 0 0.5em 0 rgb(199, 158, 185);

  background-color: rgb(0, 0, 255);
  background-image: url(images/apollo.png);
}

.neonnight{
  font-size: 3rem;

  font-display: inline-block;
  text-decoration: none;
  color: hsl(320 100% 54%);
  border: hsl(320 100% 54%) 0.125em solid;
  display: grid;
  padding: 0.25em 1em;
  border-radius: 0.25em;
  text-shadow: 
  0 0 0.125em hsl(0 0% 100% / 0.3),
  0 0 0.45em currentColor;

  box-shadow: inset 0 0 0.5em 0 hsl(320 100% 54%), 0 0 0.5em 0 hsl(320 100% 54%);

  background-color: #2b2b2b;
  background-image: url(images/greek\ head.png);
}

 .neonday:after,
 .neonsunset:after,
 .neonnight:after {
  color: white;
  content: "";
  font-size: 2em;
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translate(-50%, -50%);
 }
 
 .neonday:after {
  content: "Today's events";
 }
 
 .neonsunset:after {
  content: "Sunset Breaks till - 21:00";
 }
 
 .neonnight:after {
  content: "Night Club";
 }


/* digital clock */

 #timedate {
    text-align:left;
    width: 50%;
    margin: 40px auto;
    color:#fff;
    padding: 20px;
  }



  .scroll-left {
    height: 500px;	
    overflow: hidden;
    position: relative;
   }
   .scroll-left .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);	
    transform:translateX(100%);
    /* Apply animation to this element */	
    -moz-animation: scroll-left 17s linear infinite;
    -webkit-animation: scroll-left 17s linear infinite;
    animation: scroll-left 17s linear infinite;
   }
   /* Move it (define the animation) */
   @-moz-keyframes scroll-left {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
   }
   @-webkit-keyframes scroll-left {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
   }
   @keyframes scroll-left {
    0%   { 
    -moz-transform: translateX(100%); /* Browser bug fix */
    -webkit-transform: translateX(100%); /* Browser bug fix */
    transform: translateX(100%); 		
    }
    100% { 
    -moz-transform: translateX(-130%); /* Browser bug fix */
    -webkit-transform: translateX(-130%); /* Browser bug fix */
    transform: translateX(-130%); 
    }

    
   }

   @media (max-width: 480px) {
    div {
      background: black;
      border-radius: 8px;
      color: #efefef;
      margin: 50px auto;
      padding: 25px;
      width: 200px;
      position: relative;
      font-size: smaller;
     }
    }