.container {
width: 100%; height: calc(100vh - 14px)
}
- intro-page{
background-color: #121212; }
- intro-header{
height:100vh }
- intro-header svg{
height: 50%; padding-top: 5em; }
- intro-page #intro-header {
width: 100%; margin: 0 auto; position:absolute; z-index:1;
}
- intro-page #intro {
z-index: 2; height: calc(100vh - 14px); width: 100%; top:0;
position:absolute; }
- text-wrapper{
position: absolute; top: 50%; left: 50%; transform: translate(-50%,20%); width: 100%; z-index: 4; pointer-events:none }
- intro-page #intro #title::after{
content: 'project X'; position: absolute; color: transparent; -webkit-text-stroke-color: rgba(255,255,255,0.2); -webkit-text-stroke-width: 1px; text-stroke-color: rgba(255,255,255,0.2); text-stroke-width: 1px; font-size: 9em; text-transform: uppercase; font-family: 'lato-heavy'; transform: translate(-53%,-80%); top: 50%; left: 50%; width: -webkit-fit-content; }
- desc-wrapper{
padding-top: 30px; display:block; width: fit-content; margin: 0 auto;
}
- center-desc{
display: flex; justify-content: center;
width: -webkit-fit-content; }
- desc-wrapper span {
color: white; font-family: "lato-regular"; font-size: 3em; text-align:right;
}
- test-width{
visibility: hidden
}
.container h1{ text-transform: uppercase; font-size: 70px;
font-family: "lato-heavy"; text-align: center; margin: 0;
}
- intro-page #intro h1 {
color: #FAFAFC;
font-size:9em; }
- intro-page #intro #lower{
color: transparent; stroke-color: rgba(255,255,255,0.4); transform: translate(-0.3em,-0.8em); }
- bubbles-container{
height: calc(100% - 364px); position: absolute; bottom: 0px; width: 100%; box-sizing: border-box; }
- problem-page {
background-color: #FAFAFC;
}
- problem-page #problem-header h1{
color:#6281EF } @media (max-width:768px){
- intro-page #intro h1 {
font-size:4em; }
- intro-page #intro #title::after{
font-size:4em; transform: translate(-53%,-130%); }
- problem-header{
padding-top:50px }
- problem-header h1{
font-size: 3.3em; } }