body{background-color:rgb(221,221,221);font-family:Arial,Helvetica,sans-serif;color:rgb(0,0,0);margin:0;padding:0;transition:all 0.5s ease}
nav{display:flex;justify-content:center;height:10vh}
.spnhld{display:flex;align-items:center;justify-content:center;height:10vh}
.spnhld span{margin:4vh;font-size:2vh;color:rgb(255,255,255);transition:all 0.5s ease;animation:spread 0.8s ease-out forwards;opacity:0}
@keyframes spread{50%{margin:0;opacity:0}100%{margin:4vh;opacity:1}}
nav span:hover{color:rgb(192,192,192)}
.holderhead{display:flex;height:30vh;width:100%;overflow:hidden;position:relative;z-index:1;animation:reveal 1s ease 0.5s forwards;flex-direction:column;color:white}
@keyframes reveal{50%{height:30vh}100%{height:90vh}}
.holderhead::before{background-image:url('hdmdY.jpg');content:"";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;z-index:-1;position:absolute;overflow:hidden}
.holderhead::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:10vh;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgb(221,221,221)  100%);pointer-events:none}
@keyframes entrybox1{75%{width:0vh}100%{width:100%}}
.lghld{align-items:center;display:flex;justify-content:center}
.rnv,.the,.ftr{color:rgb(255,255,255);margin:2vh;font-size:10vh;opacity:0}
.rnv{animation:dsb 2s ease forwards;transform:translate(-10vh,7vh)}
.the{animation:dsb3 2s ease forwards;transform:translate(15vh,12vh)}
.ftr{animation:dsb2 2s ease forwards;transform:translate(10vh,-7vh)}
@keyframes dsb{25%{transform:translate(-10vh,7vh);opacity:0}50%{transform:translate(-10vh,0);opacity:1}75%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:1}}
@keyframes dsb2{25%{transform:translate(10vh,-7vh);opacity:0}50%{transform:translate(10vh,0);opacity:1}75%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:1}}
@keyframes dsb3{25%{transform:translate(15vh,12vh);opacity:0}50%{transform:translate(0,12vh);opacity:1}75%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:1}}
.entrybox1{width:0vh;height:1vh;background-color:rgb(255,255,255);animation:entrybox1 3s ease-in-out forwards 0.9s}
.entry{text-align:center;width:90vh;transition:all 0.3s ease-in-out;background-color:rgba(255,255,255,0);border-radius:5vh;padding:1vh}
.entry:hover{background-color:rgba(31,31,31,0.61)}
.entryholder{display:flex;align-items:center;justify-content:center;animation:entry 1s ease forwards 1.3s;transform:translateY(-5vh);opacity:0;font-size:2vh}
@keyframes entry{60%{transform:translateY(-5vh);opacity:0}100%{transform:translateY(0);opacity:1}}
.entrybox{width:0vh;height:0.7vh;background-color:rgb(255,255,255);animation:entrybox 3s ease-in-out forwards 0.9s;border-radius:5px}
@keyframes entrybox{75%{width:0vh}100%{width:90vh}}
/*____________________________________________________________*/
 

.cardholder{align-items:center;justify-content:center;padding:5vh;display:flex}
.aboutholder{height:90vh;width:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.about{height:90vh;width:80vh;background-color:grey;margin:5vh;border-radius:2vh;animation:gup 1s ease forwards 1s;transform:translateY(25vh);opacity:0;overflow:hidden;position:relative;color:white;transition:width 0.5s ease-in-out;display:flex;align-items:center;flex-direction:column;cursor:pointer}
.about h1{font-size:5vh;margin-top:5vh}
.about:hover{z-index:1;width:100vh}
.element{align-items:center;display:flex;flex-direction:column;font-size:3vh;margin:3vh}
.element span{font-size:4vh;font-weight:bold}
.stat{display:flex;justify-content:center;flex-direction:row;transform:translateY(90vh);transition:all 0.5s ease-in-out}
.about:hover > .stat{transform:translateY(50vh)}
.about::before{height:100%;width:100%;content:"";position:absolute;background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;display:block;z-index:-1}
#mdY::before{background-image:url('mdY.jpg')}
#mdX::before{background-image:url('mdX.jpg')}
@keyframes gup{50%{opacity:0;transform:translateY(25vh)}100%{opacity:1;transform:translateY(0)}}
#trk{width:180vh;transition:all 0.4s ease}
#trk:hover{width:201vh;border-radius:0}
#trk::before{background-image:url('https://digitalassets.tesla.com/tesla-contents/image/upload/f_auto,q_auto/Cybertruck-Second-Hero-Desktop.jpg')}
.vidholder{display:none;position:fixed;z-index:1000;top:0;bottom:0;left:0;right:0;position:fixed;align-items:center;justify-content:center;background-color:rgba(0,0,0,0.5)}
.vid{align-items:center;justify-content:center;display:none;border-radius:5vh;position:fixed;height:60vh;width:80vh;background-color:white;z-index:1000;box-shadow:0 0 10px rgba(0,0,0,0.3);color:black;flex-direction:column;animation:open 0.3s ease forwards;transform:translateY(10vh);opacity:0}
@keyframes open{50%{transform:translateY(10vh)}100%{transform:translateY(0);opacity:1}}
.vid h1{font-size:5vh}
#exit{font-size:3vh;font-weight:bold;cursor:pointer;margin:3vh}
#exit:hover{text-decoration:underline}