* {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    scroll-behavior: smooth;
    overflow: hidden;
    left: 0;
}

html{
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    scroll-behavior: smooth;
    background-color: #1E1E1E;
    background-image: linear-gradient(180deg, #000000 0%, #1E1E1E 50%);
}

body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background-color: #0bb3ff;
}

body::-webkit-scrollbar-thumb {
    background-color: #ff8000;
    border-radius: 6px;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: darken(#0bb3ff, 20%);
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

h1 {
    color: black;
    font-family: 'Lato', sans-serif;
    background-color: #00b5ff;
    background-image: linear-gradient(135deg, rgba(0,212,255,1) 20%, rgba(0,255,94,1) 90%);
    border-radius: 5px;
    animation: fadeIn 3s;
}

.competence {
    animation: appear 1.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes appear {
    0% {
        transform: translateY(-10%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}