@font-face{font-family: "JetBrains";src: url('./fonts/JetBrainsMono-VariableFont_wght.ttf');}
@font-face{font-family: "Varela";src: url('./fonts/VarelaRound-Regular.ttf');}
@font-face{font-family: "Archivo";src: url('./fonts/Archivo.ttf');}
@font-face{font-family: "Lato";src: url('./fonts/Lato/Lato-Regular.ttf')};
body{margin:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden;font-family:'Roboto';color:#424242;/*background:#81c784;margin:100px*/}

body.navigating {
    user-select: none !important;
}

div.no-preview{background-color:#fafafa;background-position:50% 50%;background-repeat:no-repeat;background-image:url('../img/no_preview.svg');background-size:80%;}

::selection{background-color: #01579b;color: white;}
::-moz-selection {background-color: #01579b;color: white;}
::-webkit-input-placeholder {color: #bdbdbd;/* Edge */}
:-ms-input-placeholder {color: #bdbdbd;/* Internet Explorer 10-11 */}
::placeholder {color: #bdbdbd;}

.loader {border: 3px solid #bf9b30;border-top: 3px solid #eeeeee;border-bottom: 3px solid #eeeeee;border-radius: 50%;width:32px;height: 32px;animation: spin 0.2s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

.fadein{-webkit-animation:opac 0.8s;animation:opac 0.8s}
@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}

.unselectable{
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.anim_bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}
@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}


.hoverable:hover {box-shadow:none;}

i.icon{display:inline-block;font-style:normal;}

.premium-gradient {
    font-family: Varela;
    color: #212121;
    font-weight: bold;
    background-image: linear-gradient(45deg, var(--primary-lighten),  var(--secondary-lighten));
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0;
}

u.highlight {
    text-decoration: none;
    background: rgba(251, 192, 45, 0.6);
    border-radius: 2px;
}