/* 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: auto;
    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;
}

#name {
    color: var(--accent);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    filter: drop-shadow(1px 1px 3px rgb(163, 20, 51)) invert(75%);
    user-select: text;
}

#about {
    color: var(--accent);
    filter: invert(95%);
    font-size: 16px;
    line-height: 1.5;
    opacity: .5;
    text-align: center;
    margin: 10px;
    user-select: text;
}


#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: 20px auto;
    max-width: 600px;
    width: auto;
}

#links a {
    background-color: var(--button);
    border-radius: 10px;
    color: var(--accent);
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 18px;
    margin-left: 50px;
    margin-right: 50px;
    opacity: .7;
    padding: 5px;
    pointer-events: auto;
    position: relative;
    text-align: left;
    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;
}


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

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

.icon {
	width:1.5rem;
	height:1.5rem;
    margin-left: 1.2rem;
	margin-right:0.5rem;
    vertical-align:middle;
    display:inline-block;
    opacity: 0.75;
	flex-shrink:0;
}

.linktext {
    vertical-align:middle;
    display:inline-block;
    opacity: 1;
	flex-shrink:0;
}

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

/* pendings */
.mail {
    color: var(--accent);
    filter: invert(95%);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    opacity: .5;
    text-align: center;
    margin: 10px;
    user-select: text;
}



/* Font Face Definitions
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  @font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:400;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:600;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:700;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:800;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans') format('svg');
}