:root{
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}
*{
    margin: 0 ;
    padding: 0;
    box-sizing: border-box;
    
}

body{
    background-color: #f8f6eb;
    display:flex;
    flex-direction: column;
}
.container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    
    
}

.container>*{
    margin:.25rem;
}
.top{
    background-image: url("/TSAPhotos/TSAMay2022/TSAmain.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height:100vh;

    

}

#goldimg{
    height:4rem;
    display:block;
    
    margin: auto;
    position:relative;
    top: 1vh;
    margin-top: 2rem;
    animation-duration: 2s;
    animation-name: tsatransition;

    
}


.top>h1{
    padding:10px;
    text-align: center;
    margin:auto;
    color:#36454F;
    animation-name: sloganfade ;
    animation-duration: 4s;
}

.container>.firstheader{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    padding:3rem;
    
    color:#36454F;
    font-size: 2rem;
    
}

.firstheader{
    padding:1rem;
}


.container>h2{
    text-align: center;
    padding:1rem;
}
.video{
   padding:1rem;
   
   display: flex;
   justify-content: center;

   
}
.video>iframe{
    
    width:80vh;
   border-radius: 5px;
   box-shadow: 10px 10px 5px#c5b358;
}


.dtp{
    display:flex;
    flex-direction: row;
    margin:0;
    
    justify-content:center;
    align-content: center;
    
    
    padding:4rem;
    background-color: #36454F;
  
    color: white;
    font-size: 1.25rem;
  

    /*background-image: url("/TSAPhotos/mousetrapcar.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: saturate(85%) brightness(99%) ;*/
    


    
}
.dtp-item{
    padding:1rem;
    
    border-right:1px solid #c5b358;
}

.news{
    display: flex;
    flex-direction: column;
    padding:1rem;

    background-color: #36454F;
    justify-content: center;
   
    
}


.news>div{
    padding:20px;
    margin:1rem;
    border-radius: 5px;
    background-color: #f8f6eb;
    box-shadow: 5px 5px black;
}

.news{
    border-bottom: 1px solid #c5b358;
}

.news-item>p>a{
    color:#c5b358;

}


footer{
    height:10vh;
    padding-left: 1rem;
    color:white;
    background-image: linear-gradient(#36454F,black);
}

@keyframes tsatransition{
    from {transform: translate(0,-100vh);}
    to {transform: translate(0px,0px);}
}

@keyframes sloganfade{
    0%{
        color:white;
        filter: blur(20px);
    }
    50%{
        color:#c5b358;
        filter: blur(5px);
    }
    100%{
        color:#36454F;
        filter: blur(0px);
    }
}