body {
    background-color: red;
    background-image: url('backgrond2.jpg');
    background-repeat: no-repeat;
    background-size: 480px;
    background-position: center;
    background-attachment: fixed;
	  margin: auto;
	  font-size: 14px;
	  display: flex;
    flex-wrap: wrap-reverse;
}	
.frame img {
	width: 100%;
	height: auto;
        }
        

iframe  {
  float:left; 
  height:0px; 
  width:120%;
}

.main {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); /* Latar belakang transparan */
  color: #451428;
  max-width: 370px;
  position: center;
  height: auto;
  border-radius: 30px;
  border: 5px solid;
  border-color:  #451428;
  padding: 5px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  transition: 0.3s;
  text-align:center;
  margin: ;in-height:300px;
  animation: fadein 1s;
  -moz-animation: fadein 1s; /* Firefox */
  -webkit-animation: fadein 1s; /* Safari and Chrome */
  -o-animation: fadein 1s; /* Opera */
}

.box {
  margin-bottom: 0px;
  text-align: center;
}

.frame {
  border: 0px solid #000; /* Menambahkan border hitam dengan lebar 2px */
  padding: 0px; /* Menambahkan padding 20px di dalam frame */
  margin: 0px; /* Menambahkan margin 10px di sekitar frame */
  background-color: rgba(240, 240, 240, 0); /* Menambahkan warna latar belakang abu-abu */
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.brand {
  background: linear-gradient(90deg, #0F111F, red, #0F111F);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 10px;
  margin: 10px;
  font-size: 35px;
  letter-spacing: 5px;
  position: relative;
  animation: gradient-shift 8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.brand::after {
  content: '';
  display: block;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, #0F111F, red, #0F111F);
  background-size: 200% 200%;
  position: absolute;
  bottom: -2px;
  left: 0;
  animation: gradient-shift 8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.button {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); /* Latar belakang transparan */
  border: none;
  border-radius:10px;
  color: black;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
  
  width: 100%;
  height: 40px;
}
.button:hover{
  font-weight:bold;
  box-shadow: 0 10px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 50px;
}
.button02 {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); /* Latar belakang transparan */
  border: none;
  border-radius:20px;
  color: black;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 70%;
  height: 40px;
}
.button02:hover{
  font-weight:bold;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.button:hover{
  font-weight:bold;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}


.button2 {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); /* Latar belakang transparan */
  border: none;
  border-radius:20px;
  color: black;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 3px;
  margin-right: 3px;
  width: 45%;
  height: 40px;
}
.button2:hover{
  font-weight:bold;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

@keyframes fadein {
  from {opacity:0;}
  to {opacity: 1;}
}
@-moz-keyframes fadein { /* Firefox */
  from {opacity:0;}
  to {opacity: 1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {opacity:0;}
  to {opacity: 1;}
}
@-o-keyframes fadein { /* Opera */
  from {opacity:0;}
  to {opacity: 1;}
}

/* @media */
@media screen and (max-width: 600px) {
  .main{
	width:95%;
    margin-top: 10%;
}}

/* @media */
@media screen and (min-width: 600px) {
  .main{
	margin-top: 2%;
}}
/* KEYFRAMES */

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}

@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}

@keyframes configure-clockwise {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes configure-xclockwise {
  0% {
    transform: rotate(45deg);
  }
  25% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  75% {
    transform: rotate(-225deg);
  }
  100% {
    transform: rotate(-315deg);
  }
}

@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: .25;
    transform: scale(.75);
  }
}

/* GRID STYLING */

* {
  box-sizing: border-box;
}
.container{
  display:flex;
  flex-direction:column;
  justify-content:evenly;
  align-items:center;
  width: 600px;
  height: 100℅;
}
.sub-container{
  border-radius:4px;
  display:flex;
  justify-content:space-between;
}
#yearsid{
  font-size:35px;
  padding:10px 65px 10px 65px;
  margin-bottom:10px;
  margin-top: 5px;
  border:4px solid black;
  border-radius:6px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}
#hoursid,#minutesid,#secondsid{
  font-size:30px;
  padding:10px;
  margin:0px 7px 0px 7px;
  border:4px solid black;
  border-radius:6px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}

body {
  
}