@font-face {
    font-family: affectionatelyYours;
    src: url(affectionatelyYours.ttf);
}

.container{
    display: flex;
    width: 100%;
    height: 100%;
    margin: auto;
    align-items:center;
    justify-content:center;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.loveyou{
    font-family: affectionatelyYours;
    font-size: 40px;
    font-weight: 300;
}

html {
    height: 100%;
}

body {
    background: #e891c1;
    box-shadow: inset 0 0 400px #de678d;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.raindrop {
    position: absolute;
    animation: fall linear infinite;
    z-index: -1;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}


ul {
    position: relative;
    display: flex;
  }
  
  li {
    list-style: none;
  }
  
  label {
    position: relative;
  }
  
  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 80px;
    width: 80px;
    z-index: 100;
  }
  

  
  input[type="checkbox"]:checked ~ div {
    color: yellow;
    text-shadow: 0 0 15px yellow, 0 0 25px yellow;
    animation: glow 1.5s linear infinite;
  }

@media only screen and (max-width: 767px) {
    .loveyou {
        font-size: 40px; 
    }
    div {
        position: relative;
        height: 80px;
        width: 5px;
        color: #5100ff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin: 0 4px;
    }
}

@media only screen and (min-width: 768px) {
    .loveyou {
        font-size: 120px;
    }
    div {
        position: relative;
        height: 80px;
        width: 40px;
        color: #5100ff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin: 0 4px;
    }
}
  
  @keyframes glow {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }