html, body {
    
    background-image: url("https://images.unsplash.com/photo-1531259683007-016a7b628fc3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=60");
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
    background-size: cover;
    height: 150%;
}
    img {
        display: flex;
        margin-left: auto;
        margin-right: auto;
        width: 6%;
        height: 6%;
    }
    
    h1 {
    text-decoration-color: white;
    text-align: center;
    color: whitesmoke;
    text-transform: uppercase;
    text-decoration: solid;
    }
    
     .jumbotron.jumbotron-fluid {
      background: none;
    }
    
    *{
      padding: 0;
      margin: 0;
      /* font-family: sans-serif; */
    }
    
    .container {
        text-align: center;
        position: relative;
        top: 15%;
        left: 50%;
        transform: translate(-50%, -50%);
    width: 100%;
    }
    
    .container span{
    color: white;
    text-transform: uppercase;
    display: block;
    }
    
    .text1{
    color: grey;
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 8px;
    margin-bottom: 20px;
    background: transparent;
    position: relative;
    animation: text 3s 1;
    }
    
    .text2 {
    font-size: 80px;
    color:grey;
    }
    
    @keyframes text {
        0%{
            color:red;
            margin-bottom: -40%;
        }
        30%{
            letter-spacing: 25px;
            margin-bottom:-40px ;
        }
        85%{
            letter-spacing: 8px;
            margin-bottom: -40px;
        }
    }
    
    
     /* a:focus {
         display: block;
         color: green;
         background-color: yellowgreen;
         transition: all .5s;
     } */
     aside {
         position: absolute;
         color: white;
         top: 35%;
         right: 10%;
         text-align: right;
     }
     h1 {
         line-height: 0;
         font-size: 4vw;
         font-weight: 700;
     }
     h3 {
         float: right;
         line-height: .3;
         font-size: 2.5vw;
         font-weight: lighter;
     }
     h4 {
         float: left;
         margin-left: -2%;
         font-size: 1.5vw;
         font-weight: lighter;
     }
     
     #trigger, #burger, #burger:before, #burger:after {
         position: absolute;
         top: 25px;
         left: 25px;
         background: grey;
         width: 30px;
         height: 5px;
         transition: .2s ease;
         cursor: pointer;
         z-index: 1;
     }
     #trigger {
         height: 25px;
         background: none;
     }
     #burger:before {
         content: " ";
         top: 10px;
         left: 0;
     }
     #burger:after {
         content: " ";
         top: 20px;
         left: 0;
     }
     #menu-toggle:checked + #trigger + #burger {
         top: 35px;
         transform: rotate(180deg);
         transition: transform .2s ease;
     }
     
     #menu-toggle:checked + #trigger + #burger:before {
         width: 20px;
         top: -2px;
         left: 18px;
         transform: rotate(45deg) translateX(-5px);
         transition: transform .2s ease;
     }
     #menu-toggle:checked + #trigger + #burger:after {
         width: 20px;
         top: 2px;
         left: 18px;
         transform: rotate(-45deg) translateX(-5px);
         transition: transform .2s ease;
     }
     #menu {
         position: absolute;
         margin: 0; padding: 0;
         width: 110px;
         height: 110px;
         background-color: black;
         border-bottom-right-radius: 100%;
         box-shadow: 0 2px 5px rgba(0,0,0,0.26);
         animation: not-checked-anim .2s both;
         transition: .2s;
     }
     #menu-toggle:checked + #trigger + #burger + #menu {
         animation: checked-anim 1s ease both;
     }
     #menu-toggle:checked + #trigger ~ #menu > li, a {
         display: block;
     }
     [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
         display: none;
     }

     /* gotham news */

    .news {
        position: relative;
        padding-top: 55%;
        padding-left: 20%;
        }

    .jumbotron {
        background-color: red;
        background-image: url("https://images.unsplash.com/photo-1497124401559-3e75ec2ed794?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=60");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover ;
        color:white;
        position: relative;
        height: 700px;
      }

    .display-5  {
        color: white;
        }

    .alert.alert {
    background-color: transparent;
     }

     .footer  {
        background-image: url("https://media1.giphy.com/media/l2QZXqfxmtgXIDOPS/giphy.gif?cid=790b76110ae7ee3fe4ecaccbc64fca7ebc3b394089be7024&rid=giphy.gif");
        background-repeat: no-repeat;
        position: relative;
        background-size: contain;
        background-position: center;
}

.video {
    position: relative;
    display: flex;
    max-width: 100%;
    height: auto;

}

    .video {
        padding-left: 15%;
        }