style.css

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: rgba(0, 0, 0, 0.877);
    transition-duration: 1s;
    overflow-x: hidden;
    font-family: 'Courier New', Courier, monospace;
}

a{
    text-decoration: underline;
}
#main{
    transition-duration: 0s;
    opacity: 0;
}
.texts {
    color: rgba(255, 255, 255, 0.877);
    position: fixed;
    top: 83vh;
    left: 50vw;
    transform: translateX(-50%);
    transition-duration: 1s;
}

#ext {
    height: 3500px;
}

#int {
    overflow-wrap: normal;
    position: fixed;
    left: 0;
    top: 0;
    transition-duration: 1.5s;
    opacity: 0;
}

#car{
    transition-duration: 1.5s;
    position: absolute;
    filter: invert(1);
    height:8vh;
    top:72vh;
    left:-120vw;
    opacity: 0.8;
    transform: scaleX(-1);
}
.plants{
    position: absolute;
    opacity: 0.5;
    filter: invert(1);
    height: 14vh;
    top:66vh;
    left:47vw;
}
#pl1{
    margin-left: 5vw;
    top:71vh;
    height: 9vh;
}
#pl2{
    margin-left: 9vw;
}
#pl3{
    margin-left: 17vw;
}
#pl4{
    margin-left: 23vw;
}
.h {
    background-color: rgba(255, 255, 255, 0.879);
    position: absolute;
    height: 1px;
    transition-duration: 1.5s;
}

.v {
    background-color: rgba(255, 255, 255, 0.879);
    position: absolute;
    width: 1px;
    transition-duration: 1.5s;
}

#a {
    position: fixed;
    width: 0vw;
    top: 80vh;
    left: 10vw;
    transition-duration: 1.5s;
}

#b {
    height: 59vh;
    top: 20vh;
    left: 16vw;
}

#c {
    height: 40vh;
    top: 45vh;
    left: 84vw;
}

#d {
    height: 60vh;
    top: 20vh;
    left: 50vw;
}

#e {
    top: 70vh;
    width: 34vw;
    left: 50vw;
}

#f {
    height: 13vh;
    top: 67vh;
    left: 52vw;
}

#g {
    height: 13vh;
    top: 67vh;
    left: 56vw;
}

#h {
    height: 13vh;
    top: 67vh;
    left: 60vw;
}

#i {
    height: 13vh;
    top: 67vh;
    left: 64vw;
}

#j {
    height: 13vh;
    top: 67vh;
    left: 68vw;
}

#k {
    height: 13vh;
    top: 67vh;
    left: 72vw;
}

#l {
    height: 13vh;
    top: 67vh;
    left: 76vw;
}

#m {
    height: 13vh;
    top: 67vh;
    left: 80vw;
}

#n {
    top: 71.1vh;
    width: 34vw;
    left: 50vw;
}

#o {
    top: 77vh;
    width: 34vw;
    left: 50vw;
}

#p {
    top: 76vh;
    width: 34vw;
    left: 50vw;
}

#q {
    top: 44vh;
    width: 26vw;
    left: 54vw;
    height:4px;
}

#r {
    top: 59vh;
    width: 26vw;
    left: 54vw;
}

#s {
    height: 15vh;
    top: 44vh;
    left: 54vw;
}

#t {
    height: 15vh;
    top: 44vh;
    left: 80vw;
}

#u {
    transition-duration: 1.2s;
    height: 15vh;
    top: 44vh;
    left: 63vw;
}

#v {
    transition-duration: 1.2s;
    height: 15vh;
    top: 44vh;
    left: 72vw;
}

#w {
    height:4px;
    transition-duration: 1.5s;
    top: 44vh;
    width: 26vw;
    left: 54vw;
}

#x {
    transition-duration: 1.5s;
    top: 59vh;
    width: 26vw;
    left: 54vw;
}

#y {
    transition-duration: 1.5s;
    height: 15vh;
    top: 44vh;
    left: 54vw;
}

#z {
    transition-duration: 1.5s;
    height: 15vh;
    top: 47vh;
    left: 80vw;
}

#a1 {
    width: 36vw;
    top: 79vh;
    right: 0vw;
}

#b1 {
    width: 33vw;
    top: 78vh;
    right: 0vw;
}

#c1 {
    width: 30vw;
    top: 77vh;
    right: 0vw;
}

#d1 {
    width: 27vw;
    top: 76vh;
    right: 0vw;
}

#e1 {
    top: 40vh;
    width: 36vw;
    left: 50vw;
}

#f1 {
    top: 39vh;
    width: 36vw;
    left: 50vw;
}

#g1 {
    top: 39vh;
    height: 1vh;
    left: 86vw;
}

#h1 {
    top: 79vh;
    height: 1vh;
    left: 14vw;
}

#i1 {
    top: 78vh;
    height: 1vh;
    left: 17vw;
}

#j1 {
    top: 77vh;
    height: 1vh;
    left: 20vw;
}

#k1 {
    top: 76vh;
    height: 1vh;
    left: 23vw;
}
#l1 {
    top: 20vh;
    width: 38vw;
    left: 14vw;
}

#m1 {
    top: 19vh;
    width:38vw;
    left: 14vw;
}
#n1 {
    top: 19vh;
    height: 1vh;
    left: 14vw;
}
#o1 {
    top: 19vh;
    height: 1vh;
    left: 52vw;
}
#p1 {
    top: 62vh;
    width: 6vw;
    left: 54vw;
}

#q1 {
    top: 62vh;
    width:6vw;
    left: 74vw;
}
#r1 {
    top: 62vh;
    height: 2vh;
    left: 54vw;
}
#s1 {
    top: 62vh;
    height: 2vh;
    left: 74vw;
}
#t1 {
    top: 62vh;
    height: 2vh;
    left: 60vw;
}
#u1 {
    top: 62vh;
    height: 2vh;
    left: 80vw;
}
#v1 {
    top: 64vh;
    width: 6vw;
    left: 54vw;
}

#w1 {
    top: 64vh;
    width:6vw;
    left: 74vw;
}
#x1{
    height:20vh;
    left:29vw;
    top:56vh;
}
#y1{
    height:20vh;
    left:47vw;
    top:56vh;
}
#z1{
    width:18vw;
    left:29vw;
    top:56vh;
}
#a2 {
    height:4px;
    top: 24vh;
    width: 26vw;
    left: 20vw;
}

#b2 {
    top: 39vh;
    width: 26vw;
    left: 20vw;
}

#c2 {
    height: 15vh;
    top: 24vh;
    left: 20vw;
}

#d2 {
    height: 15vh;
    top: 24vh;
    left: 46vw;
}

#e2 {
    height: 15vh;
    top: 24vh;
    left: 29vw;
}

#f2 {
    height: 15vh;
    top: 24vh;
    left: 38vw;
}
#g2{
    width:25vw;
    left:25vw;
    top:50vh;
    height: 15px;
}
#h2 {
    width: 15px;
    height: 26vh;
    top: 50vh;
    left: 23vw;
}
#i2{
    width:11vw;
    left:32.5vw;
    top:54vh;
}
#j2{
    width:11vw;
    left:32.5vw;
    top:55vh;
}
#k2{
    height:1vh;
    left:32.5vw;
    top:54vh;
}
#l2{
    height:1vh;
    left:43.5vw;
    top:54vh;
}
#m2{
    background-color: rgba(255, 255, 255, 0.423);
    width: 12.5vw;
    height:7vh;
    left:32vw;
    top:58vh;
}
#n2{
    height:1vh;
    left:44vw;
    top:67vh;
}
#o2{
    height:0vh;
    left:-43vw;
    top:80vh;
}
#p2{
    height:15vh;
    left:11vw;
    top:65vh;
}
#q2{
    border-radius: 50%;
    width: 0vw;
    height:0vw;
    left:-46vw;
    top:62vh;
}
#r2{
    border-radius: 50%;
    width: 0vw;
    height:0vw;
    left:8vw;
    top:62vh;
}
#s2{
    height: 5vh;
    top:75vh;
    left:7vw;
}
#t2{
    height: 5vh;
    top:75vh;
    left:3vw;
}
#u2{
    height: 5vh;
    top:75vh;
    left:-1vw;
}
#v2{
    height: 5vh;
    top:75vh;
    left:-5vw;
}
#w2{
    height: 5vh;
    top:75vh;
    left:-9vw;
}
#x2{
    height: 5vh;
    top:75vh;
    left:-13vw;
}
#y2{
    height: 5vh;
    top:75vh;
    left:-17vw;
}
#z2{
    height: 5vh;
    top:75vh;
    left:-20vw;
}
#a3{
    height: 5vh;
    top:75vh;
    left:-24vw;
}
#b3{
    height: 5vh;
    top:75vh;
    left:-28vw;
}
#c3{
    height: 5vh;
    top:75vh;
    left:-32vw;
}
#d3{
    height: 5vh;
    top:75vh;
    left:-36vw;
}
#e3{
    height: 5vh;
    top:75vh;
    left:-40vw;
}
#f3{
    opacity: 0;
    width: 51vw;
    top:77vh;
    left:-42vw;
}
#g3{
    height: 4px;
    opacity: 0;
    width: 61vw;
    top:59vh;
    left:-45vw;
}
#h3{
    opacity: 0;
    height: 0vh;
    top:80vh;
    left:-38vw;
    width: 3px;
}
#i3{
    opacity: 0.6;
    height: 7vh;
    width:14vw;
    top:75vh;
    left:84vw;
    transition-duration: 1.5s;
}
#j3{
    opacity: 0.6;
    height: 7vh;
    width:30vw;
    top:75vh;
    left:124vw;
    transition-duration: 1.5s;
}
.trees{
    position: absolute;
    height: 30vh;
    top:50vh;
    left:82vw;
    opacity: 0;
    transition-duration: 1.5s;
}
#tr2{
    height: 40vh;
    top:40vh;
    margin-left: 35vw;
}
#tr3{
    width:68vw;
    height:3vh;
    left:85vw;
    top:77vh
}

#myBtn {
    display: block; 
    position: fixed; 
    bottom: 40px; 
    left:50%;
    transform: translateX(-50%);
    z-index: 99; 
    border: none; 
    outline: none;
    color: rgba(255, 255, 255, 0.87); 
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer; 
    border-radius: 10px; 
    font-size: 20px; 
    transition-duration: 0.3s;
  }
  
  #myBtn:hover {
    color: #939393d6;
  }

  #credits{
    margin-top: 40%;
    color: rgba(255, 255, 255, 0.945);
    text-align: center;
    font-size: 10px;
    margin-bottom: 20px;
  }

  
.section {
    margin-top: 40px;
    height: 10vh;
    position: relative;
    width: 100%;
    padding-bottom:100px;
    font-family: 'Times New Roman', Times, serif;
  }
  
  .section::before {
    margin-top: 0px;
    animation: bounce 3s ease infinite;
    color: #fff;
    content: '╲╱';
    left: 50%;
    margin-left: -0.7rem;
    letter-spacing: -1px;
    line-height: 4rem;
    opacity: 1;
    position:absolute;
    text-align: center;
  }
  
  @keyframes bounce {
    50% {
      transform: translateY(-50%);
    }
  }
.toptext{
    margin-top: 40%;
    color: rgba(255, 255, 255, 0.945);
    text-align: center;
}  

@media screen and (min-width: 400px) {
    #int{
        left:30%;
        transform: scaleX(0.4);
    }
    .trees{
        transform: scaleX(2.4) scaleY(1);
    }
    .plants{
        transform: scaleX(2.4) scaleY(1);
    }
    #car{
        transform: scaleY(1) scaleX(-2.4)
    }
}