@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

* {
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
}
html {
    scrollbar-width: none;
}
html::-webkit-scrollbar {
    visibility: hidden;
}

section {
    width: 100%;
    height: 100vh;
}
section::after {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 998;

	content: " ";
    background-image: url("img/noise.png");
    mix-blend-mode: overlay;
}

#attached {
    position: fixed;
	width: 100vw;
	height: 100vh;
    z-index: 999;
}
#attached #scroll {
	position: absolute;
    width: 100%;
    height: .5rem;
    bottom: 0;

    background-color: white;
    transform-origin: 0%;
}
#attached #language-picker {
	color: white;
    font-family: Ubuntu Mono;
    cursor: pointer;
}
#attached #language-picker #menu {
	position: absolute;
    padding: 0.5rem;    
}
#attached #language-picker #list {
	position: absolute;
    padding: 0.5rem;

	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    transform: scale(1, 0);
}

#welcome {
    display: flex;
    justify-content: center;
    align-items: center;

    background: radial-gradient(circle at 0% 80%, hsl(330, 84%, 67%), transparent 70%), hsl(36, 100%, 65%) radial-gradient(circle at 100% 30%, hsl(185, 75%, 53%), transparent 70%); 
}

#welcome h1 {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    color: white;
    text-shadow: 0 0.3rem 0 hsl(278, 57%, 58%);
}
#welcome::after {
    opacity: 15%;
}

#about {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: linear-gradient(165deg, hsl(279, 100%, 2%), hsl(279, 100%, 3%) 100%); 
    font-family: "Tiny5", sans-serif;
}
#about::after {
    opacity: 60%;
}
#about .star {
    position: absolute;

    user-select: none;
    -moz-user-select: none;
    
    background-color: white;
    box-shadow: 0 0 5px rgb(162, 0, 255), 0 0 25px rgba(162, 0, 255, 50%), 0 0 125px rgba(162, 0, 255, 25%);
    aspect-ratio: 1/1;
}
#about p {
    z-index: 2;

    user-select: none;
    -moz-user-select: none;

    color: white;
    font-weight: 500;
    font-size: 3rem;
    text-shadow: 0 0 5px rgb(162, 0, 255), 0 0 25px rgba(162, 0, 255, 50%), 0 0 125px rgba(162, 0, 255, 25%);
    cursor: pointer;
}