/* general styling */
@font-face {
    font-family: "Adobe Clean";
    src: url(../adobe-clean-cufonfonts);
}



.for-flex-2 {
    display: flex;
    justify-content: center;
    padding: 1rem;
    gap: 2rem;
}

:root {
    --smaller: 0.75;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

#register-now {
    /* display: flexbox;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
}

#countdown>ul {
    padding: 0px;
    display: flex;
    justify-content: center;
}

.for-grad-line {
    height: 0.5rem;
    background: rgb(203, 0, 255);
    background: linear-gradient(90deg,
            rgba(203, 0, 255, 1) 0%,
            rgba(206, 5, 240, 1) 3%,
            rgba(231, 47, 142, 1) 45%,
            rgba(232, 48, 139, 1) 46%,
            rgba(248, 75, 75, 1) 81%,
            rgba(255, 86, 51, 1) 100%);
}

.register-now-container {
    /* height: 20vw; */
    align-items: center;
    /* background: rgb(203, 0, 255);
  background: linear-gradient(
    90deg,
    rgba(203, 0, 255, 1) 0%,
    rgba(206, 5, 240, 1) 3%,
    rgba(231, 47, 142, 1) 45%,
    rgba(232, 48, 139, 1) 46%,
    rgba(248, 75, 75, 1) 81%,
    rgba(255, 86, 51, 1) 100%
  ); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Adobe Clean";
}

.register-now-container .headline {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: xx-large;
    color: white;
}


.countdown-container {
    display: flex;
    width: 100%;
}

#countdown {
    color: white;
    /* background-image: linear-gradient(45deg, #d20be1, #ca403b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent; */
    margin: 0 auto;
    text-align: center;
    flex: 1;
}

#countdown>ul>li {
    height: 8vw;
    width: 8vw;
    display: inline-block;
    font-size: 1vw;
    list-style-type: none;
    padding: 0.25em 1em;
    /* text-transform: uppercase; */
    /* border-style: solid;
  border-width: 0.4em; */
    border: solid 5px white;
    /* border-color: white; */
    /* background-image: linear-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  ),
  linear-gradient(101deg, #d20be1, #ca403b);
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px #fff inset; */
    margin-right: 0.5%;
    margin-left: 0.5%;
}

#countdown ul li .day-1 {
    /* background-image: linear-gradient(45deg, #d20be1, #ca403b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent; */
    color: white;
    /* font-size: 60px; */
    /* margin: 0 auto;
  text-align: center; */
}

#countdown ul li .day {
    /* background-image: linear-gradient(45deg, #d20be1, #ca403b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent; */
    color: white;
    font-size: small;
    font-weight: 600;
    /* margin: 0 auto;
  text-align: center; */
}

#countdown>ul>li hr {
    border: 0;
    /* border-top: 1px solid #8c8c8c; */
    border-bottom: 2px solid #fff;
    margin: 0 0 0.5em 0;
}

#countdown>ul>li span {
    display: block;
    font-size: 3vw;
    font-weight: bolder;
}

.btn-register-now {
    padding-top: 2.5vw;
}

.register-now-svg {
    display: flex;
    width: 13rem;
}

.nomination-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* gap: 3rem; */
    /* margin: 3rem 3rem; */
    /* padding-bottom: 2rem; */
  }

  @media screen and (min-width: 400px) {
    .nomination-buttons button{
        width: 10rem;
      }
  }

  @media screen and (max-width: 400px){
    .nomination-buttons button{
        width: 9rem;
      }

      .nom-items-1 button span, .nom-items-2 button span {
        font-size: small;
      }

}

  
  .nom-items-1 button {
    border-radius: 0.8rem;
    border: solid 3px white;
    background-image: linear-gradient(90deg, #0364ce, #b0ddff);
    padding: 1rem;
    margin: 1rem;
  }
  
  .nom-items-2 button {
    border-radius: 0.8rem;
    border: solid 3px white;
    background-image: linear-gradient(90deg, #da28b6, #f7e3f8);
    padding: 1rem;
    margin: 1rem;
  }
  
  .nom-items-1 button span, .nom-items-2 button span {
    /* background-color: white;
    background-image: linear-gradient(45deg, #9c7247, #edc893);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent; */
    color: white;
    font-family: "Adobe Clean";
  }

  
  .nom-items-1 button:hover span{
    background-color: white;
  background-image: linear-gradient(45deg, #0364ce, #b0ddff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  }
  
  .nom-items-2 button:hover span{
    background-color: white;
  background-image: linear-gradient(45deg, #da28b6, #f7e3f8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  }
  
  .nom-items-1 button:hover {
    /* border-radius: 5px; */
  border: solid 3px transparent;
  /* background-color: #2B1F0D; */
  /* background-color: #78e4ff; */
  background-image: linear-gradient(rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0)),
    linear-gradient(90deg, #0364ce, #b0ddff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px #fff inset;

  }
  
  .nom-items-2 button:hover {
    border: solid 3px transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0)),
    linear-gradient(90deg, #da28b6, #f7e3f8);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px #fff inset;

  }


/* .emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 4rem;
  padding: 0 0.5rem;
} */


@media screen and (max-width: 778px) {


    .btn-register-now {
        padding-top: 4vw;
    }

    /* .register-now-svg {
        width: 45vw;
    } */
}

@media screen and (max-width: 1100px) {
    .register-now-container {
        height: 40vw;
    }

    #countdown>ul>li {
        height: 16vw;
        width: 16vw;
        padding: 0.25em 1em;
        font-size: 2vw;
    }

    #countdown>ul>li span {
        font-size: 6vw;
    }

}

@media screen and (max-width: 545px) {
    .register-now-container {
        height: 60vw;
    }

    #countdown>ul>li {
        height: 22vw;
        width: 22vw;
        padding: 0.25em 1em;
        font-size: 2vw;
    }

    #countdown>ul>li span {
        font-size: 6vw;
    }

}

/* @media screen and (max-width: 1088px) {
    #countdown ul li .day{
        display: flex;
        align-items: center;
        justify-content: center;
    }
} */