:root {
    --utdorange: #E87500;
    --utdgreen: #185844;
    --white: #FFFFFF;
    --hoverorange: #FFA03F;
    --road: #505050
}
html, body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--utdgreen);
    /* overflow-x: hidden; */
    font-family: 'Science Gothic', sans-serif;
}
.title {
  position: absolute;
  left: 38%;
  top: 43%;
    transform: rotate(-17deg);
  display: inline-block;
  font-family: "Science Gothic", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.066;
  margin: 0;

}

.comet-block {
  position: relative;
  top: -3vw;
  left: 0;
  width: 100%;
  height: 60%;
  z-index: 2;
  margin-bottom: 0;
}

.title-outline,
.title-fill {
  display: block;
}

.title-outline {
  color: var(--utdorange);
  -webkit-text-stroke: 10px var(--utdorange);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.title-fill {
  position: absolute;
  inset: 0;
  color: #fff;
}

.comet-image{
    position: absolute;
    top: -5vw;
   left: 50%;
   transform: translateX(-50%);
    width: 40vw;
}
.concrete {
    background-color: var(--road);
    height: 30vh;
    position: relative;
    margin-top: auto;
}

.concrete-image {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    height: 30vh;
}
.temoc-image {
    position: absolute;
    bottom: 0%;
    width: 20%;
    left: 39%;
    z-index: 3;
}

.tree-image {
    position: absolute;
    bottom: 20%;
    left:85%;
}

.tree-image2 {
    position: absolute;
    bottom: 20%;
    left: 6%;
}
.building-image {
    position: absolute;
    bottom: 0%;
    left:0vw;
    transform: translateX(-50%);
    bottom:8vw;
    transform: scaleX(-1);
}
.building-image2 {
    position: absolute;
    bottom: 0%;
    right: 0vw;
    bottom:8vw;
}



.white-border {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);

    width: 300px;
    height: 55px;

    border: 10px solid white;
}

.bottom-cta {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #fff;
    font-weight: 300;
    padding-bottom: 20px;
}

.cta-message {
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
}

.cta-message img {
    width: 4.2rem;
    height: 4.2rem;
    object-fit: contain;
}
a{
    text-decoration: none;
    width: 100%;

}
button{
    background-color: var(--utdorange);
    border: none;
    color: var(--white);
    padding: 8px 20px;
    font-family: "science gothic", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.3rem;
    align-self: center;
    width: 100%;
}

button:hover{
    background-color: var(--hoverorange);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.082);
    top: -3px;
}



@media(max-width:768px)
{
    .comet-block {
        transform: translateY(-3vh);
    }

    .comet-image {
        top: -2vh;
        width: 70vw;
    }
    .temoc-image{
        
        width: 40%;
        left: 29%;
    }
    .building-image,
    .building-image2 {
        bottom: 15vw;

}
    .title{
        left: 30%;
        top: 50%;
    }

}

@media (max-width: 600px) {
    .comet-block {
        transform: translateY(-3vh);
    }

    .comet-image {
        top: -2vh;
        width: 70vw;
    }

    .title {
        left: 48%;
        top: 35%;
        width: max-content;
        font-size: clamp(1.5rem, 11.5vw, 4rem);
        text-align: center;
        transform: translateX(-50%) rotate(-17deg);
    }

    .title-outline {
        -webkit-text-stroke-width: 8px;
    }

    .concrete {
        height: 25vh;
    }

    .concrete-image {
        height: 25vh;
    }

    .temoc-image {
        width: 55%;
        left: 23%;
        z-index: 3;
    }

    .building-image,
    .building-image2 {
        width: 42vw;
        z-index: 1;
    }

    .tree-image,
    .tree-image2 {
        width: 22vw;
        z-index: 2;
    }

    .white-border {
        width: 70%;
        height: 45px;
        border-width: 8px;
        z-index: 2;
    }

    .bottom-cta {
        width: 90%;
        z-index: 4;
        gap: 1.25rem;
    }

    .cta-message {
        width: 100%;
        font-size: clamp(0.85rem, 3.7vw, 1.5rem);
    }

    .cta-message img {
        width: clamp(2.8rem, 12vw, 4.2rem);
        height: clamp(2.8rem, 12vw, 4.2rem);
    }

}

@media (max-width: 500px) {
    .comet-block {
        transform: translateY(-3vh);
    }

    .comet-image {
        top: -2vh;
        width: 100vw;
    }

    .temoc-image {
        width: 60%;
        left: 20%;
    }

    .building-image,
    .building-image2 {
        width: 45vw;
        bottom:18vw;
    }

    .tree-image,
    .tree-image2 {
        width: 25vw;
    }

    .title{
        font-size: clamp(2.3rem, 13vw, 4rem);
        top:40%;
        left: 45%;
    }
    .bottom-cta{
        bottom: -1.5rem; 
        gap: 0.2rem;
        padding-bottom: 2rem;
        font-size: 0.8rem;
    }
}


@media (max-width: 400px) {
       .comet-block {
        transform: translateY(-3vh);
    }

    .comet-image {
        top: -2vh;
        width: 100vw;
    }

    .temoc-image {
        width: 70%;
        left: 15%;
    }

    .building-image,
    .building-image2 {
        width: 40vw;
        bottom:20vw;
    }

    .tree-image,
    .tree-image2 {
        width: 25vw;
    }

    .title{
        font-size: clamp(2.4rem, 13vw, 4rem);
        top:50%;
        left: 45%;
    }
    .comet-block {
        transform: translateY(-5vh);
        height: 40%;
        top:5vw;
    }
    .concrete {
        height: 40vh;
    }
    .bottom-cta{
        gap: 1.5rem;
        padding-bottom: 2rem;
        font-size: 0.8rem;
    }
    .white-border {
        width: 70%;
        top: 85px;
        height: 40px;
        border-width: 6px;
    }

}

@media (max-width: 320px) {
       .comet-block {
        transform: translateY(-3vh);
    }

    .comet-image {
        top: -2vh;
        width: 100vw;
    }


    .comet-block{
        
        height: 30%;
        width: 100%;
    }
    .comet-image{
        width: 120%;
        /* top: -2vw; */
    }
    .title{
        font-size: clamp(3rem, 15vw, 5rem);
        top:70%;
        left:45%;
    }
}