@font-face{
   font-family: astrological;
   src: url("../public/fonts/Astrodings.ttf");
}
.font-astrological{
   font-family: astrological;
}
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
   background-color: #000;
   color: #fff;
   }
div.container{    
   display: grid;
   height: 100vh;
   grid-template-rows: 55% 45%;
   padding: 0;
   margin: 0;
}
#sky{
	position: relative;
	flex: 5;
}
#beach{
	position: relative;
	flex: 5;
}
a{
   text-decoration: none;
   color: white;
   padding: none;
   margin: none;
}
p.font-astrological{
   margin: 0;
}
.moon{
   position: absolute;
   font-size: 160px;
}
.star{
   position:absolute;
   width:6px;
   height:6px;
   border-radius:50%;
   background:white;
}
.telescope{
   position:absolute;
   width:140px;
   height:160px;
   filter: brightness(.6) contrast(1.5) saturate(.8);
}
.big{
   width:12px;
   height:12px;
}

.small{
   width:3px;
   height:3px;
}
.star{
   box-shadow:

   0 0 5px white,
   0 0 10px white,
   0 0 25px white;
}

.star:hover{

   transform:scale(1.8);

}
iframe {
    position: absolute;
    width: 50%;
    height: 40%;
    border: none;
    top: 60%;
    left: 50%;
}
.scene {
    aspect-ratio: 16 / 9;
    position:relative;
    width:100vw;
    height:100vh;
}

.background {
    position:absolute;
    width:100%;
    height:100%;
    /* object-fit:cover; */
}

.telescope {
    position:absolute;
    width:150px;

    left:5%;
    top:52%;
}