Profile-Page/css/styles.css

89 lines
1.6 KiB
CSS

* {
scrollbar-width: thin;
scrollbar-color: #3b3b3b #202020;
}
/* This class is applied while fonts are still loading. */
html.wf-loading #hero {
opacity: 0;
}
/* This class is applied when all fonts are loaded */
html.wf-active #hero {
opacity: 100%;
}
body {
background-color: black;
color: whitesmoke;
width: 95dvw;
}
#hero-section {
width: 100dvw;
height: 100dvh;
align-content: center;
margin: 0;
padding: 0;
/* position: absolute;
left:0;
right: 0; */
transition: 3s ease-in;
transition-property: opacity;
}
#hero {
font-size: 7em;
line-height: 0.85;
text-align: center;
font-variant-caps: petite-caps;
font-weight: bold;
top: 45dvh;
width: 100%;
}
#hero-titles {
text-align: center;
font-size: 2em;
font-variant-caps: all-petite-caps;
width: 100%;
text-align: center;
}
#arrow-hint {
position: absolute;
top: 94dvh;
/*left: 50vh; */
width: 98dvw;
text-align: center;
color: rgb(255, 255, 255);
opacity: 0%;
transition: 4s ease-in-out 13s;
transition-property: opacity, visibility;
}
#certifications-page {
width: 98dvw;
height: 100dvh;
vertical-align: top;
}
#certifications-title {
font-size: 4em;
line-height: 0.85;
text-align: center;
font-variant-caps: petite-caps;
}
.certification {
font-size: 1em;
text-align: center;
}
#page-content {
/* opacity: 0%;
visibility: hidden; */
transition: 3s ease-in 500ms;
margin: 0 auto;
padding: 10px;
position: relative;
}