*, *:after, *:before {margin: 0; padding: 0; border: 0; box-sizing: border-box;} :root { --cabeceira_height: 20dvh; } @font-face { font-display: auto; font-family: ethnocentric; src: url("../font/mini.otf"); } body { width: 100vw; background-color: black; background-image: url("../img/buried.png"); animation: body 3s linear 0s 3 normal none; } #main {position: relative;max-width: 1920px;margin: auto;overflow: hidden; height: 100dvh;} .fondo {position:absolute ; width: 50%; height: 50dvh; background-image: url("../img/background.jpg"); background-size: 200% 200%; filter: grayscale(80%);} #img1{ background-position: 0% 0%; translate: 200% 200%; animation: imag1 6s linear 10s 1 normal forwards, opacity_1_01 3s linear 19.5s 1 normal forwards; } @keyframes imag1 {100% {translate: 0 0;}} #img2 { background-position: 100% 0%; translate: -100% 200%; animation: imag2 6s linear 10s 1 normal forwards, opacity_1_01 3s linear 19.5s 1 normal forwards; } @keyframes imag2 {100% {translate: 100% 0;}} #img3 { background-position: 0% 100%; translate: 200% -100%; animation: imag3 6s linear 10s 1 normal forwards, opacity_1_01 3s linear 19.5s 1 normal forwards; } @keyframes imag3 {100% {translate: 0 100%;}} #img4 { background-position: 100% 100%; translate: -100% -100%; animation: imag4 6s linear 10s 1 normal forwards, opacity_1_01 3s linear 19.5s 1 normal forwards; } @keyframes imag4 {100% {translate: 100% 100%;}} #telao { position: absolute; width: 100%; height: 100%; opacity: 0; background-color: white; animation: flash 3s linear 17s 1 normal none; } #box_img { position: absolute; width: 100%; height: 100%; overflow: hidden; } #cabeceira { position: absolute; width: 100%; height: var(--cabeceira_height); display: grid; grid-template-columns: 30% auto; overflow: hidden; } #logo { width: 100%; height: 100%; opacity: 0; background-image: url("../img/logo_malta_ti.svg"); background-size: 50%; background-repeat: no-repeat; background-position: center; -webkit-user-select: none; user-select: none; margin-left: 100%; animation: logo 3.5s linear 20s 1 normal forwards; } @keyframes logo { 0% {opacity: 0; margin-left: 100%; background-size: 50% 50%;} 50% {opacity: .3; margin-left: 0; background-size: 50% 50%;} 100% {opacity: 1; margin-left: 0; background-size: 95% 95%;} } #titulo { position: relative; opacity: 0; text-align: center; transform: translateY(100%); animation: titulo 2.5s linear 22s 1 normal forwards; } @keyframes titulo { 0% {transform: translateY(100%); opacity: 0;} 80% {opacity: .3;} 100% {transform: translateY(0%); opacity: 1;} } #titulo h1 { position: relative; font-family: ethnocentric; top: 45%; transform: translateY(-50%); font-size: min(5vw, 88px); color: #6699FF; text-shadow: 1px 1px 4px black, 0 0 25px #0050ef, 0 0 5px #003cb4;  -webkit-user-select: none; user-select: none; animation: titulo_h1 10s linear 25s infinite normal none; } @keyframes titulo_h1 { 0% {text-shadow: 0 -1px 0 #0ff, 1px 0 0 #0ff, 0 1px 0 #0ff, -1px 0px 0 #0ff, 1px -1px 0 #0ff, 1px 1px 0 #0ff, -1px 1px 0 #0ff, -1px -1px 0 #0ff;} 1% {text-shadow: 0 -2px 0 #0ff, 2px 0 0 #0ff, 0px 2px 0 #0ff, -2px 0px 0 #0ff, 2px -2px 0 #0ff, 2px 2px 0 #0ff, -2px 2px 0 #0ff, -2px -2px 0 #0ff;} 2% {text-shadow: 0 -3px 0 #0ff, 3px 0 0 #0ff, 0 3px 0 #0ff, -3px 0px 0 #0ff, 3px -3px 0 #0ff, 3px 3px 0 #0ff, -3px 3px 0 #0ff, -3px -3px 0 #0ff;} 3% {text-shadow: 0 -4px 0 #0ff, 4px 0 0 #0ff, 0 4px 0 #0ff, -4px 0px 0 #0ff, 4px -4px 0 #0ff, 4px 4px 0 #0ff, -4px 4px 0 #0ff, -4px -4px 0 #0ff;} 5% {text-shadow: 0 0 0 #69f;} } #titulo h2 { font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; position: absolute; color: white; bottom: -50%; left: 50%; transform: translateX(-50%); font-size: min(2.5vw, 30px); text-wrap: nowrap; cursor: pointer; animation: titulo_h2 2.5s linear 24s 1 normal forwards; } @keyframes titulo_h2 { from {bottom: -50%;} to {bottom: 0;} } #titulo h2 img{ width: min(2.5vw, 30px); vertical-align: sub; animation: titulo_img 12s linear 36s infinite normal none; } @keyframes titulo_img { 0% {rotate: 0deg;} 12% {rotate: 40deg;} 24% {rotate: 0deg;} } #titulo h2 hr { position: absolute; width: 0; height: 0; background-color: white; border-radius: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: hr_anim 20s cubic-bezier(0.85, 0, 0.15, 1) 30s infinite normal none; } @keyframes hr_anim { 0% {opacity: 0; width: 0; height: 0;} 5% {opacity: 0.4; width: 100%; height: 100%;} 7% {opacity: 0.4; width: 100%; height: 100%;} 12% {opacity: 0; width: 0; height: 0;} } #grid-container { position: absolute; width: 100%; height: calc(100dvh - var(--cabeceira_height)); bottom: 0; -webkit-user-select: none; user-select: none; display: grid; grid-template-columns: repeat(5, auto); grid-template-rows: repeat(4, auto); opacity: 0; animation: opacity_0_1 5s linear 6s 1 normal forwards; } .grid-item { padding: 10px; background-size: contain; background-repeat: no-repeat; background-position: center center; opacity: .6; } #grid-container :nth-child(1) { background-image: url("../img/img01.png"); } #grid-container :nth-child(2) { background-image: url("../img/img02.png"); } #grid-container :nth-child(3) { background-image: url("../img/img03.png"); } #grid-container :nth-child(4) { background-image: url("../img/img04.png"); } #grid-container :nth-child(5) { background-image: url("../img/img05.png"); } #grid-container :nth-child(6) { background-image: url("../img/img06.png"); } #grid-container :nth-child(7) { background-image: url("../img/img07.png"); } #grid-container :nth-child(8) { background-image: url("../img/img08.png"); } #grid-container :nth-child(9) { background-image: url("../img/img09.png"); } #grid-container :nth-child(10) { background-image: url("../img/img10.png"); } #grid-container :nth-child(11) { background-image: url("../img/img11.png"); } #grid-container :nth-child(12) { background-image: url("../img/img12.png"); } #grid-container :nth-child(13) { background-image: url("../img/img13.png"); } #grid-container :nth-child(14) { background-image: url("../img/img14.png"); } #grid-container :nth-child(15) { background-image: url("../img/img15.png"); } #grid-container :nth-child(16) { background-image: url("../img/img16.png"); } #grid-container :nth-child(17) { background-image: url("../img/img17.png"); } #grid-container :nth-child(18) { background-image: url("../img/img18.png"); } #grid-container :nth-child(19) { background-image: url("../img/img19.png"); } #grid-container :nth-child(20) { background-image: url("../img/img20.png"); } #ejna { position: absolute; font-family: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 1.5em; font-weight: bold; color: rgba(0, 0, 255, .5); text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.3); bottom: 0; right: 0; cursor: pointer; } #texto { position: fixed; width: 100%; height: calc(100dvh - var(--cabeceira_height)); margin-top: var(--cabeceira_height); display: grid; align-content: space-evenly; overflow-x: hidden; overflow-y: auto; -webkit-user-select: none; user-select: none; } #texto a:link, #texto a:visited { color: white ; } #texto a:hover { color: darkblue; } #texto p { font-family: Georgia, 'Times New Roman', Times, serif; font-weight: bold; color: white; text-shadow: 1px 1px 4px black, 0 0 25px blue, 0 0 5px darkblue; position: relative; left: 100%; letter-spacing: 2px; font-size: min(3vw, 58px); text-indent: 50px; border-radius: 20px; } #texto :nth-child(1) { animation: left0 3s linear calc(25s + 0s) 1 normal forwards; } #texto :nth-child(2) { animation: left0 3s linear calc(25s + 1s) 1 normal forwards; } #texto :nth-child(3) { animation: left0 3s linear calc(25s + 2s) 1 normal forwards; } #texto :nth-child(4) { animation: left0 3s linear calc(25s + 2.5s) 1 normal forwards; } #texto :nth-child(5) { animation: left0 3s linear calc(25s + 1.5s) 1 normal forwards; } #texto :nth-child(6) { animation: left0 3s linear calc(25s + 0.5s) 1 normal forwards; } #texto :nth-child(7) { animation: left0 3s linear calc(25s + 3s) 1 normal forwards; } #texto :nth-child(8) { animation: left0 3s linear calc(25s + 3.5s) 1 normal forwards; } #texto :nth-child(9) { animation: left0 3s linear calc(25s + 4.5s) 1 normal forwards; } #texto :nth-child(10) { animation: left0 3s linear calc(25s + 4.0s) 1 normal forwards; } @keyframes left0 { from {left: 100%;} to {left: 0;} } @keyframes body { 20% {background-color: rgb(238, 187, 187);} 40% {background-color: rgb(241, 208, 208);} 60% {background-color: rgb(248, 155, 155);} 100%{background-color: #413f3f;} } @keyframes flash {0% {opacity: .5;} 35% {opacity: .9;} 45% {opacity: .4;} 100% {opacity: .1;}} @keyframes opacity_1_01 { from {opacity: 1} to {opacity: .1;}  } @keyframes opacity_0_1 { from {opacity: 0;} to {opacity: 1;} } @media screen and (max-width: 915px) { #titulo h2 img{ width: min (2.5vw, 16px); } #titulo h2{ font-size: min(2.5vw, 16px); } #grid-container { grid-template-columns: repeat(4, auto); grid-template-rows: repeat(5, auto); } #texto p { font-size: 3vw; text-indent: 5px; } } @media screen and (max-width: 414px) { :root { --cabeceira_height: 10dvh; } #texto p { font-size: 3.6vw; } }