@font-face {
    font-family: Mosk;
    src: url(./fonts/Mosk Light 300.ttf);
    font-weight: 300;
}
@font-face {
    font-family: Mosk;
    src: url(./fonts/Mosk Light 700.ttf);
    font-weight: 700;


}


::-webkit-scrollbar {
    width: 20px;
  }

  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px grey;
    border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #ffffff13; 
  }


*{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
                                  font-family: "Mosk", sans-serif;
                                  
text-decoration:none;



}

html, body{
    margin: 0;
    padding: 0;
    
    overflow: hidden;
    
}

.logotop:hover{
    transform: scale(1.2) rotate(10deg);
    -webkit-transform: scale(1.2);
    animation: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
    -webkit-animation: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
}

.logotop{
    margin-left: 20px;
    margin-top: 20px;
    animation: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
    -webkit-animation: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
    
}

.logobottom{
    margin-left: 20px;
    margin-bottom: 20px;
    z-index: 12;
    position: absolute;
    bottom: -10;
    animation: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
    -webkit-animation: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;

}
  

h3{
    font-family: "Mosk", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bold{
    font-family: 'Mosk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 17pt;
    margin-left: 20px;
    margin-top: 20px;
    
}

.refcont{
border-radius: 3px;
width: 100%
padding-left: 30% ;
     padding-right: 30%
}

.text{
    font-family: 'Mosk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
    font-size: 17pt;
    margin-left: 20px;
    margin-top: 20px;
    color: black !important;
}

a{
    color: black !important;
    font-style: italic;

}
a:hover{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

.waves{
    overflow: hidden !important;
    z-index: 1;
    vertical-align: bottom;
    position: absolute;
right:    0;
bottom:   -10;
}


@media (prefers-color-scheme: dark) {
html, body{
        cursor: url(./assets/cursordark.png), auto;
        background: black;
    }
    :link{
        cursor: url(./assets/clickdark.png), pointer;
    }

.logotop{
    fill: white;
}    
.bold, .text, a{
        color: white !important;
    }

    #logolight{
        display: none !important;

    }
    #logodark{
        display: initial !important;
    }

}


@media (prefers-color-scheme: light) {
    html, body{
        cursor: url(./assets/cursor.png), auto;
    }
    :link{
        cursor: url(./assets/click.png), pointer;
    }

    .bold, .text, a{
        color: black !important;
    }
    #logolight{
        display: initial !important;

    }
    #logodark{
        display: none !important;
    }

    
}


@media only screen and (max-aspect-ratio: 1/1){
   
   #oben{
    padding-left: 0% !important;
     padding-right: 0% !important;
    }
}