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: 0px 0px 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;
}