/* styles.css */
@font-face {
    font-family: 'DrGlitch';
    src: url('./Doctor\ Glitch.otf') format('truetype');
}

body {
    height: 200vh; /* Makes the page scrollable */
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', sans-serif;
    background-color: #2e2d2d;
    color: white;
}

.home {
    position: sticky;
    top: 0;
    background-image: url(images/daw.png);
    background-size: cover;
    background-position: 0px 0px;
    width: 100%;
    height: 100vh;
}

.line {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 10px;
    height: 95vh;
    background-color: white;
    border-radius: 10px;
    transform: translateX(34vh);
    display: block;
}

@keyframes moveLine {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.spacer {
    height: 10vh;
    width: 10px;
}

.home-wrapper {
    height: 50vh;
}

.header {
    width: 100%;
    height: 5vh;
    background-color: #2e2d2d;
    display: flex;
    margin: auto;
    align-items: center;
}

.header .item {
    margin: 0 10px 0 10px;
    height: 100%;
    width: 7%;
    color: white;
    text-align: center;
    display: grid;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
    margin: auto;
}

.header .item:hover {
    background-color: #585858;
}

.fadeout {
    animation: fadeout 0.5s forwards;
}

.fadein {
    animation: fadein 0.5s forwards;
}

@keyframes fadeout {
    from {
        opacity: 100%;
    }
    to {
        opacity: 0%;
    }
}

@keyframes fadein {
    from {
        opacity: 0%;
    }
    to {
        opacity: 100%;
    }
}

.head-text {
    font-size: 50px;
}

.glitch {
    font-family: DrGlitch;
}

.center {
    text-align: center;
    width: auto;
    margin: auto;
}

.paragraph {
    font-size: 20px;
}

.profile {
    width: 150px; 
    height: 150px; 
    border-radius: 50%;
}

.icon {
    width: 150px; 
    height: 150px; 
    border-radius: 10px;
    object-fit: cover;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.portfolio-icon {
    cursor: pointer;
    transition: 0.3s;
    margin: 10px;
}

.portfolio-icon:hover {
    opacity: 75%;
}

.samples audio {
    margin: 10px;
}