@charset "UTF-8";

/* CSS rules go below */
body {
    margin: 0;
    height: 100vh;
    position: fixed;
    display: flex;
    width:100%;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  @keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.content {
    z-index: 2;
    width:100%;
    
}


.cloud {
z-index:2;
display: inline-block;
transition: right 4s ease, bottom 4s ease, opacity 1s ease;
}

.cloudtwo {
z-index:2;
display: inline-block;
transition: left 4s ease, bottom 4s ease, opacity 1s ease;
}

.sun {
    display: inline-block;
    transition: left 5s ease, right 5s ease, bottom 3s ease, opacity 1s ease;
  }


.moon {
    display:inline-block;
    transition: left 2s ease, right 2s ease, bottom 2s ease, opacity 1s ease;
    -webkit-filter: drop-shadow(0px 0px 7px rgb(255, 255, 255));
    filter: drop-shadow(3px -1px 9px rgb(255, 255, 255));
  }

.bigdipper img {
  display:inline-block;
  z-index:4;
    position:absolute;
    width:300px;
    height:auto;
    left:20px;
    top:50vh;
    opacity:1;
    transition: width 2s, opacity 3s;
  }

.star {
    position: fixed;
    left:10%;
    right:70%;
    bottom:90vh;
    display: inline-block;
    width: 10px;
      height: 10px;
      background-color: rgb(255, 255, 255);
      clip-path: circle(50%);
      transition: clip-path 4s ease, transform 3s ease, opacity 1s, bottom 1s;
      z-index: 3;

  }

  .startwo {
    position: fixed;
    left:90%;
    right:19%;
    bottom:57vh;
    display: inline-block;
    width: 10px;
      height: 10px;
      background-color: rgb(255, 255, 255);
      clip-path: circle(50%);
      transition: clip-path 4s ease, transform 3s ease, opacity 3s, bottom 1s;
      z-index: 4;
  
  }


.gradient-layer {
    position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity 2s ease;
}

.gradient1 {
    background: linear-gradient(lightblue, cornflowerblue);
    z-index: 1;
    opacity: 1;
}

.gradient2 {
    background: linear-gradient(goldenrod,coral);
    z-index: 0;
    opacity: 0;
}

.gradient3 {
    background: linear-gradient(rgb(36, 31, 92), rgb(16, 16, 49));
    z-index: 0;
    opacity: 0;
    }


  @media (max-width: 800px) {
    .gradient1 {
        opacity:0;
    }
    .gradient3 {
        opacity: 1;
    }


    .sun {
        opacity:0;
        position: absolute;
        right: 60%;
        left: 40%;
        bottom: -220px;
    }

    .moon {
        position: absolute;
        left:60%;
        right:0%;
        bottom:70vh;
        opacity:1;
  }

  .cloud {
    position:fixed;
    left:60%;
        right:0%;
        bottom:10vh;
        opacity:0.5;
    }
    
    .cloudtwo {
        position:fixed;
            left:-200px;
            bottom:50vh;
            opacity:0.5;
    }

  .star {
    position: fixed;
    left:9%;
    right:80%;
    bottom:88vh;
    display: inline-block;
    width: 40px;  
    height:40px;
    background: #ffffff;
    clip-path: polygon(
        50% 0%, 
        61% 35%, 
        98% 35%, 
        68% 57%, 
        79% 91%, 
        50% 70%, 
        21% 91%, 
        32% 57%, 
        2% 35%, 
        39% 35%
      );
      transform: rotate(720deg);
      z-index: 3;
      opacity:1;
}

.startwo {
    position: fixed;
    left:90%;
    right:19%;
    bottom:57vh;
    display: inline-block;
    width: 20px;  
    height:20px;
    background: #ffffff;
    clip-path: polygon(
        50% 0%, 
        61% 35%, 
        98% 35%, 
        68% 57%, 
        79% 91%, 
        50% 70%, 
        21% 91%, 
        32% 57%, 
        2% 35%, 
        39% 35%
      );
      transform: rotate(720deg);
      z-index: 3;
      opacity:1;
}
  }

  @media (min-width: 801px) and (max-width: 1200px) {
    .gradient1, .gradient3 {
        opacity: 0;
    }
    .gradient2 {
        opacity: 1;
    }

    .sun {
        position: absolute;
        right: 50%;
        left: 50%;
        bottom:0px;
        opacity:1; 
    }

    .moon {
        position: absolute;
        left:100%;
        right:0%;
        bottom:0vh;
        opacity:0;
  }

  .cloud {
    position:fixed;
        right:-600px;
        bottom:50vh;
        opacity:0;
    }
    
    .cloudtwo {
        position:fixed;
        left:-500px;
        bottom:10vh;
        opacity:0;
    }
  .star {
    opacity:0.25;
  }

  .startwo {
    opacity:0.25;
  }

  .bigdipper img {
    width:0px;
    height:auto;
        opacity:0;
  }
  }

  @media (min-width: 1201px) {
    .sun {
    position: absolute;
    left: 80%;
    right: 0%;
    bottom:70vh;
    opacity:1;
    }

    .cloud {
        position:fixed;
            right:900px;
            bottom:55vh;
            opacity:0.5;
        }
        
        .cloudtwo {
            position:fixed;
                left:1000px;
                bottom:20vh;
                opacity:0.5;
        }

  .moon {
    position: absolute;
    left:80%;
    right:0%;
    bottom:70vh;
    opacity:0;
  }

  .star {
    bottom: 0vh;
    opacity:0;
  }

  .startwo {
    bottom: 0vh;
    opacity:0;
  }
  .bigdipper img {
    width:0px;
    height:auto;
        opacity:0;
  }
  }