@import "../resources/fonts/fonts.css";

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: black;
    cursor: help;
}

#logo-group {
    position: absolute;
    width: fit-content;
    height: 36px;
    left: 0;
    top: 24px;
    right: 0;
    margin: auto;
    transition: left .2s;
}

#logo {
    position: absolute;
    left: 20px;
    top: 13px;
    transition: left .4s;
}

#logo-group:hover > #logo {
    left: 50px;
}

#logo-group:hover {
    left: -25px;
}

#stripes {
    opacity: 1;
}

#logo-group:hover > #stripes {
    animation: fadeinphoto 1s linear infinite;
}

@keyframes fadeinphoto {
    0% { opacity: 1; }
    50% { opacity: .5; }
    100% { opacity: 1; }
}

@keyframes fadeinphoto2 {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

#display-image, #display-image-2 {
    width: 300px;
    height: 300px;
    filter: grayscale(100%) contrast(1000%) blur(50px);
    overflow: hidden;
    animation: fadeinphoto2 2s linear infinite;

    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


#project-name {
    font-family: Modernist;
    font-weight: bold;
    color: white;
    font-size: 14px;
    cursor: cell;
    user-select: none;

    position: absolute;
    right: 20px;
    bottom: 20px;
}