@font-face{
    font-family: 'Oswald';
    src: url('/static/fonts/Oswald-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Raleway';
    src: url('/static/fonts/Raleway-VariableFont_wght.ttf');
}

@font-face{
    font-family: 'Lato';
    src: url('/static/fonts/Lato-Regular.ttf')
}

@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins-Medium.ttf');
}

@font-face{
    font-family:'Nunito';
    src: url('/static/fonts/Nunito-VariableFont_wght.ttf');
    font-weight:bold;
}

body{
    background-color:rgb(30,30,30);
    margin:0;
    font-family: 'Lato', sans-serif;
    overflow-x:hidden;
}

h1{
    margin:0;
    margin-top:3vh;
    border:0;
    font-family:'Oswald', sans-serif;
    font-weight:bolder;
}

a{
    color:white;
    text-decoration:none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: 'Poppins', sans-serif;
}

a:hover{
    color:yellowgreen;
    transition: color 0.3s ease;
}

html, body {
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    overflow-x:hidden;
}


.outline{
    color:transparent;
    -webkit-text-stroke: 2px rgb(60, 60, 60);
    mix-blend-mode:darken;
}

.blob {
    position: absolute;
    width: 150px; 
    height: 150px;
    background-color:rgb(118, 232, 65);
    border-radius: 51% 49% 63% 37% / 26% 29% 71% 74% ; 
    z-index: 1;
    animation: bob-default 2.5s infinite;
    animation-timing-function: ease-in-out;
}

@keyframes bob-default {
    0% {
        transform: translateX(-50%) translateY(30%);
    }
    50% {
        transform: translateX(-50%) translateY(10%);
    }
    100% {
        transform: translateX(-50%) translateY(30%);
    }
}

@keyframes bob-1 {
    0% {
        transform: translateX(-50%) translateY(0%);
    }
    50% {
        transform: translateX(-50%) translateY(-20%);
    }
    100% {
        transform: translateX(-50%) translateY(0%);
    }
}

@keyframes bob-2 {
    0% {
        transform: translateX(22vw) translateY(30%);
    }
    50% {
        transform: translateX(22vw) translateY(40%);
    }
    100% {
        transform: translateX(22vw) translateY(30%);
    }
}

@keyframes bob-3 {
    0% {
        transform: translateX(70vw) translateY(-50%);
    }
    50% {
        transform: translateX(70vw) translateY(-40%);
    }
    100% {
        transform: translateX(70vw) translateY(-50%);
    }
}