@import './fonts/_fonts.scss';

:root {
    --primary-color: #20a4e7;
    --secondary-color: #94A3B8;
}

html
{
    display: block;

}


html, body
{
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: black;
}

.img {
    max-width: 100%;
    height: auto;
}

.general{
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    text-rendering: optimizeSpeed;
}

.container {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-rendering: optimizeSpeed;
    z-index: 2;
    top: 5.6em;
    margin-left: 5.1em;
    object-fit: cover;
    pointer-events: auto;
    max-width: calc(100% - 5.1em);
}

.logo{
    box-sizing: border-box;
    align-items: center;
    display: flex;
    justify-content: start;
    position: fixed;
    text-align: center;
    width: 100%;
    height: 80%;
    pointer-events: none;
}

img.logoden{
    background-color: rgb(31, 27, 24);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    opacity: 1;
    z-index: 2;
    position: relative;
   width: auto;
   height: auto;
   pointer-events: auto;
}

h3.centralog{
    position: absolute;
   font-size: 2em;
   font-family: Pacifico;
   color: var(--primary-color);
   background-size: 10%;
   z-index: 2;
   opacity: 1;
   margin-top: 0.7em;
   margin-left: 1.1em;
}

h4.log{
    position: absolute;
    font-size: 1.3em;
    color: var(--secondary-color);
    font-family: 'Segoe UI';
    margin-top: 8.7em;
    margin-left: 1.7em;
    z-index: 2;
    opacity: 1;
    filter: contrast(2);
}
.generals{
    box-sizing: border-box;
    display: block;
    will-change: opacity;
}
.moon{
    box-sizing: border-box;
    display: grid;
    position: relative;
    top: 0; right: 0; bottom: 0; left: 0;
}

video.moonweb{
    width: 100%;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    display: block;
    object-fit: cover;
    pointer-events: all;
    grid-column: 1/3;
    grid-row: 1/3;
    position: relative;
}
.moontext1{
    opacity: 1;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    z-index: 1;
    grid-column: 1/3;
    grid-row: 1/3;
    filter: contrast(2);
    word-wrap: break-word;
    pointer-events: none;
}

p.moonmain{
    box-sizing: border-box;
    font-size: 1.3em;
    color: var(--secondary-color);
    font-family: Impact, Segoe UI;
   display: block;
   max-width: 30%;
   margin-right: 2%;
   text-indent: 1em;
   line-height: 1.2;
}

.register{
display: flex;
justify-content: center;
align-items: center;
    z-index: 10000;
    grid-column: 1/3;
    grid-row: 1/3;
   text-align: center;
   font-size: 1.5em;
   position: relative;
}

button {
    width: 19.1em;
    height: 3.2em; 
 margin: 0.6em 0.4em;
    padding: 0.3em 0.3em;
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 2px;
    color: #383736;
    border: 2px #383736 solid;
    border-radius: 4px;
    text-transform: uppercase;
    outline: 0;
    position: relative;
    overflow:hidden;
    background: none;
    z-index: 9999;
    cursor: pointer;
    transition:         0.08s ease-in;
    -o-transition:      0.08s ease-in;
    -ms-transition:     0.08s ease-in;
    -moz-transition:    0.08s ease-in;
    -webkit-transition: 0.08s ease-in;
    pointer-events: all;
  }

  .register button.btro {
  position: relative;
  z-index: 10001;
  pointer-events: auto;
}

.main-bottom,
.wrapper,
.moontext2,
.main-bottom h1,
.main-bottom p {
  pointer-events: none;
}

.main-bottom h1,
.main-bottom p {
  pointer-events: auto;
}

.btro:hover {
    color: var(--secondary-color);
    box-sizing: border-box;
  }

  .btro:active {
    color: var(--secondary-color);
    background-color: rgb(1, 1, 24);
    box-sizing: border-box;
    border: 2px #090705 solid;
  }

.main-bottom{
    box-sizing: border-box;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1;
    grid-column: 1/3;
    grid-row: 1/3;
    width: 100%;
}
.wrapper{
    align-items: flex-end;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    position: relative;
}

.moontext2{
    opacity: 1;
    align-items: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    word-wrap: break-word;
}


h1.moonmain2{
    box-sizing: border-box;
    font-size: 2.9em;
    color: var(--secondary-color);
    font-family: Impact, Segoe UI;
   display: block;
   max-width: 30%;
   left: 15%;
   line-height: 1.3;
   position: relative;
   white-space: nowrap;
   font-size: 2.0em;
   
}

p.moonmain3{
    box-sizing: border-box;
    font-size: 1.3em;
    color: var(--secondary-color);
    font-family: Impact, Segoe UI;
   display: block;
   margin-top: 1em;
   margin-bottom: 6em;
   line-height: 1.2;
   text-indent: 1em;
   text-decoration-line: underline;
   text-decoration-color: #070148;
   position: absolute;
   white-space: nowrap;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   filter: contrast(2);
 
}
p.moonmain4{
    box-sizing: border-box;
    font-size: 1.3em;
    color: var(--secondary-color);
    font-family: Impact, Segoe UI;
   display: block;
   margin-left: auto;
   margin-bottom: auto;
   margin-right: 6em;
   margin-top: 6em;
   position: absolute;
   text-decoration: line-through rgb(69, 1, 1);
   filter: contrast(2);
   white-space: nowrap;
  
}
p.moonmain5{
    box-sizing: border-box;
    font-size: 1.3em;
    color: var(--secondary-color);
    font-family: Impact, Segoe UI;
   display: block;  
   position: absolute;
   text-decoration: underline;
   filter: contrast(2);
   white-space: nowrap;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: 6em;
   margin-top: 6em;
}

h3.centralog {
    font-family: 'Pacifico', cursive; 
}

h4.log, 
p.moonmain, 
h1.moonmain2, 
p.moonmain3, 
p.moonmain4, 
p.moonmain5 {
    font-family: 'Roboto', sans-serif;
}


/**portrait*/
@media screen and (orientation : portrait)
and (min-width : 50px) 
and (max-width : 269px) { 
    button {
        width: 8.1em;
        height: 1.8em; 
    }
    .register{
        font-size: 0.8em;
        justify-content: center;
        margin-bottom: 0em;
        margin-top: 14em;
        margin-left: auto;
        margin-right: auto;
         }
    .moontext1{
        justify-content: center;
        height: 90%;
        width: 90%;
        grid-row: 1/3; 
        grid-column: 1/3;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
     }
     p.moonmain{
        max-width: 100%;
        height: 50%;
        margin-bottom: 0em;
        margin-top: 12em;
        font-size: 1.0em;
    }
        h3.centralog {
            font-size: 1.0em;
            margin-top: 0.8em;
            margin-left: 0.0em;
        }
                    h4.log {
                    font-size: 0.5em;
                    margin-top: 8.9em;
                    margin-left: 0em;
                }
                img.logoden{
                    width: 100px;
                   }    
                   .container{
                    justify-content: center;
                    
                    margin-left: 0em;
                    margin-right: 0em;
                   }
                   .logo{
                    justify-content: center;
                    margin-left: 0em;
                    margin-right: 0em;
                 }
                     h1.moonmain2{
                        font-size: 1.1em;
                     }
                     
}
@media screen  and (orientation : portrait)
and (min-width : 270px) 
and (max-width : 319px) { 
    button {
        width: 8.1em;
        height: 1.8em; 
    }
    .register{
        font-size: 0.9em;
        justify-content: center;
        margin-bottom: 0em;
        margin-top: 20em;
        margin-left: auto;
        margin-right: auto;
         }
    .moontext1{
        justify-content: center;
        height: 90%;
        width: 90%;
        grid-row: 1/3; 
        grid-column: 1/3;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
     }
     p.moonmain{
        max-width: 100%;
        height: 50%;
        margin-bottom: 0em;
        margin-top: 10em;
        font-size: 1.3em;
    }
        h3.centralog {
            font-size: 1.4em;
            margin-top: 0.8em;
            margin-left: 0.0em;
        }
                    h4.log {
                    font-size: 0.7em;
                    margin-top: 8.9em;
                    margin-left: 0em;
                }
                img.logoden{
                    width: 150px;
                   }    
                   .container {
                    justify-content: center;
                        margin-left: auto;
                        margin-right: auto;
                   }
                   .logo{
                    justify-content: center;
                    margin-left: auto;
                    margin-right: auto;
                 }
                     h1.moonmain2{
                        font-size: 1.1em;
                     }
                     
}

@media screen  and (orientation : portrait)
and (min-width : 320px) 
and (max-width : 374px)  { 
    
    .register{
        font-size: 1em;
        justify-content: center;
        margin-bottom: 0em;
        margin-top: 14em;
        margin-left: auto;
        margin-right: auto;
         }
    .moontext1{
        justify-content: center;
        height: 90%;
        width: 90%;
        grid-row: 1/3; 
        grid-column: 1/3;
        display: flex;
        margin-left: 1em;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
     }
     p.moonmain{
        max-width: 100%;
        height: 50%;
        margin-bottom: 0em;
        margin-top: 10em;
        font-size: 1.3em;
    }
        h3.centralog {
            font-size: 1.4em;
            margin-top: 0.8em;
            margin-left: 0.0em;
        }
                    h4.log {
                    font-size: 0.7em;
                    margin-top: 8.9em;
                    margin-left: 0.0em;
                }
                img.logoden{
                    width: 150px;
                   }    
                   
                   .container{
                    justify-content: center;
                        margin-left: auto;
                        margin-right: auto;
                   }
                   .logo{
                    justify-content: center;
                    margin-left: auto;
                    margin-right: auto;
                 }
                     h1.moonmain2{
                        font-size: 1.5em;
                     }
                     
}

@media screen  and (orientation : portrait)
and (min-width : 375px) 
and (max-width : 424px)  { 
    
    .register{
        font-size: 1em;
        justify-content: center;
        margin-bottom: 0em;
        margin-top: 14em;
        margin-left: auto;
        margin-right: auto;
         }
    .moontext1{
        justify-content: center;
        height: 90%;
        width: 90%;
        grid-row: 1/3; 
        grid-column: 1/3;
        display: flex;
        margin-left: 1em;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
     }
     p.moonmain{
        max-width: 100%;
        height: 50%;
        margin-bottom: 0em;
        margin-top: 10em;
        font-size: 1.3em;
    }
        h3.centralog {
            font-size: 1.4em;
            margin-top: 0.8em;
            margin-left: 0.0em;
        }
                    h4.log {
                    font-size: 0.7em;
                    margin-top: 8.9em;
                    margin-left: 0.0em;
                }
                img.logoden{
                    width: 150px;
                   }    
                   
                   .container {
                    justify-content: center;
                        margin-left: auto;
                        margin-right: auto;
                   }
                   .logo{
                    justify-content: center;
                    margin-left: auto;
                    margin-right: auto;
                 }
                     h1.moonmain2{
                        font-size: 1.5em;
                     }
                     
}
@media screen  and (orientation : portrait)
        and (min-width : 425px) 
        and (max-width : 767px)  { 
            .register{
                font-size: 1em;
                justify-content: center;
                margin-bottom: 0em;
                margin-top: 10em;
                margin-left: auto;
                margin-right: auto;
                 }
            .moontext1{
                justify-content: center;
                height: 90vh;
                width: 90vw;
                grid-row: 1/3; 
                grid-column: 1/3;
                display: flex;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
             }
             p.moonmain{
                max-width: 100%;
                height: 50%;
                margin-bottom: 0em;
                margin-top: 10em;
                font-size: 1.3em;
            }
                h3.centralog {
                    font-size: 1.4em;
                    margin-top: 0.8em;
                    margin-left: 0.0em;
                }
                            h4.log {
                            font-size: 0.7em;
                            margin-top: 8.9em;
                            margin-left: 0.0em;
                        }
                        img.logoden{
                            width: 150px;
                           }    
                           .container{
                            justify-content: center;
                                margin-left: auto;
                                margin-right: auto;
                           }
                           .logo{
                            justify-content: center;
                            margin-left: auto;
                            margin-right: auto;
                         }
                             h1.moonmain2{
                                font-size: 1.8em;
                             }
                             
        }
        @media screen  and (orientation : portrait)
        and (min-width : 768px) 
        and (max-width : 1023px)  { 
            .register{
                font-size: 1em;
                justify-content: center;
                margin-bottom: 0em;
                margin-top: 10em;
                margin-left: auto;
                margin-right: auto;
                 }
            .moontext1{
                justify-content: center;
                height: 90%;
                width: 90%;
                grid-row: 1/3; 
                grid-column: 1/3;
                display: flex;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
             }
             p.moonmain{
                max-width: 100%;
                height: 50%;
                margin-bottom: 0em;
                margin-top: 10em;
                font-size: 1.3em;
            }
                h3.centralog {
                    font-size: 1.4em;
                    margin-top: 0.8em;
                    margin-left: 0.0em;
                }
                            h4.log {
                            font-size: 0.7em;
                            margin-top: 8.9em;
                            margin-left: 0.0em;
                        }
                        img.logoden{
                            width: 150px;
                           }    
                           .container{
                            justify-content: center;
                                margin-left: auto;
                                margin-right: auto;
                           }
                           .logo{
                            justify-content: center;
                            margin-left: auto;
                            margin-right: auto;
                         }
                             h1.moonmain2{
                                font-size: 1.8em;
                             }
                             
        }

      
@media screen and (orientation : portrait)
 and (min-width : 1024px)
  and (max-width : 1439px) { 
       
    .moontext1{
        height:80%;
        width: 100%;
    }
        p.moonmain{
            justify-content: center;
            font-size: 1.2em;
          
        }
        h3.centralog {
            font-size: 1.4em;
            margin-top: 0.8em;
            margin-left: 0.7em;
        }
                    h4.log {
                    font-size: 0.7em;
                    margin-top: 8.9em;
                    margin-left: 1.8em;
                }
                img.logoden{
                    width: 150px;
                   }    
                   .register{
                    font-size: 1.0em;
                   justify-content: center;
                   margin-bottom: 0em;
                   margin-top: 0em;
                   margin-right: 2em;
                     }
                     .logo{
                       justify-content: start;
                        }
                        .container{
                       margin-top:0em;
                       margin-left: 5em;
                        }
                     h1.moonmain2{
                        font-size: 2.0em;
                     }

            
    } 
    @media screen  and (orientation : portrait)
 and (min-width : 1440px) { 
        p.moonmain{
           
            font-size: 1.7em;
        }
        .register{
            display: flex;
            justify-content: center;
            align-items: center;
                z-index: 1;
                grid-column: 1/3;
                grid-row: 1/3;
                pointer-events: none;
               text-align: center;
               font-size: 1.5em;
               margin-top: 1em;
            }
            h1.moonmain2{
                font-size: 2.5em;
             }
    }
    
 /**landscape*/

@media screen and (orientation : landscape)
    and (min-width : 425px) 
    and (max-width : 767px) { 
        .moontext1{
            height: 100vh;
            width: 100vw;
            margin-top: auto;
            margin-left: auto;
        }
            p.moonmain{
                justify-content: center;
                font-size: 0.6em;
              
            }
            h3.centralog {
                font-size: 1.1em;
                margin-top: 0.8em;
                margin-left: 0.7em;
            }
                        h4.log {
                        font-size: 0.6em;
                        margin-top: 7.9em;
                        margin-left: 1.4em;
                    }
                    img.logoden{
                        width: 120px;
                       }    
                       
                       button {
                        width: 9.3em;
                        height: 1.8em; 
                    }
                    .register{
                        font-size: 0.6em;
                        justify-content: center;
                        margin-bottom: 3em;
                        margin-top: 0em;
                        margin-left: auto;
                            margin-right: auto;
                         }
                         .container{
                            justify-content: start;
                            margin-top: 1em;
                            margin-left: 3em;
                            margin-right: auto;
                           }
                           .logo{
                            justify-content: start;
                            margin-left: auto;
                            margin-right: auto;
                            margin-top: auto;
                            margin-bottom: auto;
                         }
                         h1.moonmain2{
                            font-size: 1.0em;
                         }
    }
    @media screen  and (orientation : landscape)
    and (min-width : 768px) 
    and (max-width : 1023px) { 
        .moontext1{
            justify-content: flex-end;
            height:80vh;
            width:100vw;
        }
            p.moonmain{
                justify-content: flex-end;
                font-size: 1.1em;
    
              
            }
            h3.centralog {
                font-size: 1.4em;
                margin-top: 0.8em;
                margin-left: 0.7em;
            }
                        h4.log {
                        font-size: 0.7em;
                        margin-top: 8.9em;
                        margin-left: 1.8em;
                    }
                    img.logoden{
                        width: 150px;
                       }    
                       .register{
                        font-size: 1.0em;
                       justify-content: center;
                       margin-bottom: auto;
                       margin-top: 17em;
                       margin-right: auto;
                       margin-left: auto;
                         }
                         .logo{
                           justify-content: start;
                            }
                            .container{
                           margin-top:0em;
                           margin-left: 5em;
                            }
                         h1.moonmain2{
                            font-size: 1.5em;
                         }
   }
    
    @media screen  and (orientation : landscape)
    and (min-width : 1024px) 
    and (max-width : 1439px) { 
        .moontext1{
            height:80%;
            width: 100%;
        }
            p.moonmain{
                justify-content: center;
                font-size: 1.2em;
              
            }
            h3.centralog {
                font-size: 1.4em;
                margin-top: 0.8em;
                margin-left: 0.7em;
            }
                        h4.log {
                        font-size: 0.7em;
                        margin-top: 8.9em;
                        margin-left: 1.8em;
                    }
                    img.logoden{
                        width: 150px;
                       }    
                       .register{
                        font-size: 1.0em;
                       justify-content: center;
                       margin-bottom: 0em;
                       margin-top: 0em;
                       margin-right: 2em;
                         }
                         .logo{
                           justify-content: start;
                            }
                            .container{
                           margin-top:0em;
                           margin-left: 5em;
                            }
                         h1.moonmain2{
                            font-size: 2.0em;
                         }
   }
   @media screen and (orientation : landscape)
    and (min-width : 1440px){ 
           p.moonmain{
               font-size: 1.7em;
               margin-top: auto;
              margin-bottom: auto;
           }
           .register{
           display: flex;
           justify-content: center;
           align-items: center;
               z-index: 1;
               grid-column: 1/3;
               grid-row: 1/3;
               pointer-events: none;
              text-align: center;
              font-size: 1.5em;
              margin-top: 0em;
              margin-left: auto;
              margin-right: auto;
           }
         img.logoden{
            background-color: rgb(31, 27, 24);
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            opacity: 1;
            z-index: 2;
            position: relative;
           width: auto;
           height: auto;
       }
       h3.centralog {
        font-size: 2.3em;
        margin-top: 0.8em;
        margin-left: 0.7em;
    }
                h4.log {
                font-size: 1.2em;
                margin-top: 8.4em;
                margin-left: 1.4em;
            }
     .logo{
        justify-content: start;
        margin-top:auto;
        margin-bottom: auto;
        margin-left: 5em;
        margin-right: 5em;
         }
         .container{
            justify-content: start;
        margin-top:5em;
        margin-bottom: auto;
        margin-left: 5em;
        margin-right: 5em;
         }
     img.logoden{
        width: 250px;
       }    
       h1.moonmain2{
        font-size: 2.5em;
     }
    
    }
  
    @media only screen
    and (max-width : 412px) 
    and (max-height : 700px) { 
        .register{
            font-size: 0.6em;
            justify-content: center;
            margin-bottom: 0em;
            margin-top: 13em;
            margin-left: auto;
            margin-right: auto;
             }
        .moontext1{
            justify-content: center;
            height: 100vh;
            width: 100vw;
            grid-row: 1/3; 
            grid-column: 1/3;
            display: flex;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
         }
         p.moonmain{
            max-width: 70%;
            height: 50%;
            margin-bottom: 0em;
            margin-top: 10em;
            font-size: 0.8em;
        }
            h3.centralog {
                font-size: 1.1em;
                margin-top: 0.8em;
                margin-left: 0.0em;
            }
                        h4.log {
                        font-size: 0.6em;
                        margin-top: 7.9em;
                        margin-left: 0.0em;
                    }
                    img.logoden{
                        width: 120px;
                       }    
                       .container{
                        justify-content: center;
                            margin-left: auto;
                            margin-right: auto;
                            margin-top: 4em;
                       }
                       .logo{
                        justify-content: center;
                        margin-left: auto;
                        margin-right: auto;
                     }
                         h1.moonmain2{
                            font-size: 1.0em;
                         }
                         
    }
    
    @media only screen 
   and (max-width : 360px) 
   and (max-height : 598px) {
    .register{
        font-size: 0.5em;
        justify-content: center;
        margin-bottom: 0em;
        margin-top: 15em;
        margin-left: auto;
        margin-right: auto;
         }
    .moontext1{
        justify-content: center;
        height: 100vh;
        width: 100vw;
        grid-row: 1/3; 
        grid-column: 1/3;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
     }
     p.moonmain{
        max-width: 70%;
        height: 50%;
        margin-bottom: 0em;
        margin-top: 10em;
        font-size: 0.7em;
    }
        h3.centralog {
            font-size: 1.0em;
            margin-top: 0.8em;
            margin-left: 0.0em;
        }
                    h4.log {
                    font-size: 0.5em;
                    margin-top: 7.9em;
                    margin-left: 0.0em;
                }
                img.logoden{
                    width: 100px;
                   }    
                   .container{
                    justify-content: center;
                        margin-left: auto;
                        margin-right: auto;
                        margin-top: 4em;
                   }
                   .logo{
                    justify-content: center;
                    margin-left: auto;
                    margin-right: auto;
                 }
                     h1.moonmain2{
                        font-size: 0.6em;
                     }
                     
}
@media only screen 
   and (max-width : 240px) 
   and (max-height : 320px) {
    .register{
        font-size: 0.5em;
        justify-content: center;
        margin-bottom: 0em;
        margin-top: 17em;
        margin-left: auto;
        margin-right: auto;
         }
                     
}
@media only screen 
   and (max-width : 320px) 
   and (max-height : 300px) {
    .register{
        justify-content: center;
        margin-bottom: 0em;
        margin-top: 19em;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.4em;
         }
               p.moonmain{
                font-size: 0.6em;
                height: 40vh;
               }      
}
@media screen and (max-width: 768px) {
    .moonweb {
      width: 100%; 
      height: auto; 
    }
  }