/*
LinkLoom
Copyright 2024 Nando Lawson

Licensed under the GPL, Version 3 <https://github.com/nandolawson/LinkLoom/blob/main/LICENSE>.
This file may not be copied, modified, or distributed except according to those terms.
*/

/* Animation when site is loaded */
@keyframes fadein {
    0% {opacity: 0; transform: translateY(-10px);}
    100% {opacity: 1; transform: translateY(0);}
}

/* Make the whole site not clickable */
* {
    pointer-events: none;
    user-select: none;
}

html, body {
    background: var(--background);
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    pointer-events: auto;
}

/* Use the fadein animation */
main {
    animation: fadein 1s ease-out .5s forwards;
    opacity: 0;
}

#about {
    color: var(--accent);
    filter: drop-shadow(0 0 1rem black);
    font-size: 1rem;
    line-height: 1.5;
    opacity: .75;
    text-align: center;
}


#credits {
    display: block;
    font-family: var(--font);
    font-size: .75rem;
    padding: 15px;
    pointer-events: auto;
    position: relative;
    text-align: center;
}

#credits a {
    color: var(--accent);
    opacity: .25;
    pointer-events: auto;
    text-decoration: none;
    transition: all .5s cubic-bezier(.08, .59, .29, .99);
}

#credits a:hover {
    cursor: pointer;
    opacity: 1;
}


#links {
    display: block;
    margin: 27px auto;
    max-width: 400px;
    width: auto;
}

#links a {
    background-color: var(--button);
    border-radius: 30px;
    color: var(--accent);
    display: block;
    font-size: 1rem;
    margin-bottom: 10px;
    margin-left: 50px;
    margin-right: 50px;
    opacity: .75;
    padding: 10px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all .5s cubic-bezier(.08, .59, .29, .99);
}

#links a:hover {
    background-color: var(--accent);
    color: var(--button);
    cursor: pointer;
    opacity: 1;
}

#name {
    color: var(--accent);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    filter: drop-shadow(0 0 1rem black);
}

#picture img {
    border-radius: 50%;
    display: block;
    height: 128px;
    margin: 40px auto 20px;
    width: 128px;
}

#picture:empty + #name {
    margin: 40px auto 20px;
}

/* Wallpaper properties */
#wallpapers > * {
    animation: fadein 1s ease-out .5s forwards;
    opacity: 0;
    left: 0;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 0;
}