div { display: flex; justify-content: center; align-items: center; } body { margin: 0px; } .container { width: 100vw; flex-direction: column; } .nav { width: 100vw; height: 7vh; flex-direction: row; background-color: #11132b; position: fixed; z-index: 999; top: 0; left: 0; } .leftnav { margin-left: 10vw; margin-right: auto; } .rightnav { margin-left: auto; margin-right: 10vw; } .logo { height: 4vh; } .logo:hover { animation: logo_bigger 1s; animation-fill-mode: forwards; } @keyframes logo_bigger { 100% { transform: scale(1.2); } } ul, li { list-style: none; } .itemlist { margin: 5vh 0 0 0; display: none; position: absolute; width: 4.6vw; border-radius: 5px; border-color: #353B65; border-width: 1px; background-color: #373737; padding: 5px 0; } .list { margin-left: 2vw; } .lists { flex-direction: column; justify-content: space-between; align-items: center; color: #8d8a8a; position: relative; margin: 0 0.5vw; } .lists:hover .itemlist { display: block; } .itemf { font-size: large; text-align: center; margin: 1.3vh 0.3vw; width: 4.5vw; } .item { font-size: small; display: block; text-align: center; border-radius: 2px; padding: 5px 0; color: white; } .item:hover { background: linear-gradient(-135deg, #89f7fe, #66a6ff); } .item:hover+.itemlist { display: block; } .index { font-size: large; color: white; width: 4.5vw; } .icon { height: 4vh; margin: 1vh; } .navbars { width: 100vw; height: 7vh; background-color: #11132b; top: 0; left: 0; } .content { justify-content: flex-start; flex-direction: column; height: 93vh; width: 100vw; background-color: #11132B; } .searchcon { flex-direction: inherit; justify-content: center; width: 100vw; height: 93vh; } .simg { width: 100vw; height: 93vh; object-fit: cover; } .sbar { position: absolute; flex-direction: row; justify-content: flex-start; width: 40vw; height: 10vh; background-color: rgba(255, 255, 255, 0.5); border-radius: 1.5em; } .sicon { height: 7vh; margin: 1vh 2vw; } .sin { border: none; outline: none; height: 9vh; width: 30vw; font-size: 50px; color: #373737; background-color: rgba(255, 255, 255, 0); } .horse, .videos { flex-direction: column; width: 100vw; height: 120vh; background-color: #11132b; } .tz { margin: 5vh 5vw; height: 3vh; } .circle { margin: 1vh; display: block; width: 3vh; height: 3vh; border-radius: 50%; background: linear-gradient(66deg, #76e9d6, #9faee6); } .rhorse { width: 70vw; height: 80vh; justify-content: left; } .ltz { margin-bottom: 1vh; color: white; } .hr { width: 70vw; height: 60vh; object-fit: cover; position: absolute; } .p1 { z-index: 2; } .p2 { z-index: 1; } .p3 { z-index: 0; } .timebar { position: absolute; justify-content: left; height: 0.5vh; width: 6vw; background-color: #fef2bc; top: 7.5vh; left: 0; } .cbar { height: 0.3vh; width: 6vw; background-color: yellow; } .deps { left: 67vw; top: 175vh; position: absolute; margin-left: auto; margin-top: auto; justify-content: center; z-index: 10; } .dep { width: 6vw; height: 8vh; color: blue; opacity: 0.9; cursor: pointer; } .d1 { background-color: #fce26b; } .d2 { background-color: #f1e6ba; } .d3 { background-color: #dbdac9; } .ret { z-index: 15; left: 25vw; top: 135vh; position: absolute; width: 25vw; height: 30vh; transform-origin: center -100px; } .scr, .footer { flex-direction: column; width: 100vw; height: 120vh; background-color: #000000; } .scps { perspective: 100vw; width: 80vw; height: 97vh; } .sp { width: 20vw; object-fit: cover; position: absolute; } .s3 { transform: translate(-21vw, 16vh); } .s2 { transform: translate(3vw, -14vh); } .s1 { transform: translate(26vw, 1vh); } .vs { width: 80vw; height: 50vh; } .v { margin: 3vw; width: 35vw; height: 40vh; } .footer { width: 100vw; height: 40vh; } .tzw { font-size: xx-large; margin-top: 10vh; color: white; font-family: 'dmd'; } @font-face { font-family: 'dmd'; src: url('1.ttf'); } .bm { color: #999999; margin-bottom: 10vh; } ::-webkit-scrollbar { display: none; }