body,p,html,h1,h2,h3,h4,h5,h6,dt,dd,dl,span,li,ul,ol{
    padding: 0;
    margin: 0;
    list-style: none;
}
body{
     transition: background-color 0.3s ease;
}
main#top{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom, #246ED1 0%, #2A83E5 36%, #5DB2FF 52%, #51AAFF 100%);
       
}


#trail{

    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    text-align: center;
    align-items: end;
    
    justify-content: center;
      z-index: 1000;
    @media screen and (max-width: 768px) {
        align-items: start;
        padding-top: 5vh;
      
}
}
#bkground{
    position:absolute;
   bottom: -10vw;
    
    width: 100%;
    min-width: 1500px;
   
    z-index: 0;
    display: flex;
    align-items: end;
        @media screen and (max-width: 768px) {
            top: 0;
       min-width: 1000px;
       bottom: -20vw;
       left: -20vh;
     
      
}

}
#bkground img{
    width: 100%;
    object-fit:cover;

}


#message {
    width: 100%;
    display: flex;
    justify-content:space-around;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
@media screen and (max-width: 768px) {
    background: none;
    flex-direction: column;
}

}
#message h1{
    padding: 2%;
    display: block;

}

#message h1 img{
    width: 100%;
    filter: drop-shadow(1px 0 10px #000);
}
#message h2{

    padding: 2%;
    font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: Italic;
  font-variation-settings:
    "wdth" 100;
    font-size: clamp(3rem, 7vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;    
    color: #fff;
    letter-spacing: .1rem;
    text-shadow: #000 1px 0 10px;
}

#message h2 time{
    font-size: clamp(2rem, 6vw, 4rem);
    padding-top: 1rem;
   
}