/*textbox positioning*/

#text1{
  position: relative;
  left: 30px;
  top: 200px;
  line-height: 2;
  float: right;
}

#text2{
  position: relative;
  right: 30px;
  top: 700px;
}



/*sky style* credit https://www.madrasacademy.com/create-a-dynamic-starry-night-background-with-html-css-and-javascript//*/

.sky {
    width: 100%;
    /*change height from orginal*/
    height: 400vh;
    /* Deep galactic background gradient */
    background: linear-gradient(to bottom, #020107 0%, #201c2f 100%);
    position: relative;
    /*prevents sky from spilling over page*/
    overflow: hidden;
    
  }
  
  /* Base style for every star generated */
  .star {
    position: absolute;
    background-color: #ffffff;
    border-radius: 50%;
    /* twinkle animation */
    animation: twinkle var(--duration) infinite ease-in-out;
    animation-delay: var(--delay);
    overflow: hidden;
  }
  
  /* changing opacity */
  @keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
  }

  #horizon{
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; 
  }

  /*making lighthouse*/
  #light{
    
    width: 10px;
    height: 10px;

    background-color: #fffed5;
    border-radius: 50%;

    position: relative;
    
    top: 330vh;
    z-index: 2;
    animation: flash 2s infinite ease-in-out;
  }

  @keyframes flash {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(254, 255, 255, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 50rem rgba(255, 255, 255, 0);
    }
    
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }
    


  /*ocean css*/
  .ocean {
    width: 100%;
    /*change height from orginal*/
    height: 300vh;
    /* Deep galactic background gradient, reverse colors */
    background: linear-gradient(to bottom, #201c2f 100%, #000000 0%);
    position: relative;
  }