.container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
}


ul {
list-style-type: none;
margin: 0 0 0 2vw;
padding: 0;
overflow: hidden;
}
.footer ul li{
float: left;
}

.right {
float: right;
text-align: left;
margin-right: 10px;

}
ul li b {
color: white;
text-align: center;
padding: 5px ;
text-decoration: none;
}

.right li b {
margin-right: 10px;
}



@media only screen and (orientation: portrait) {
    .footer {
       font-size: 1.9vh;
       padding: 3px;
       position: fixed;
       left: 0;
       bottom: 0;
       width: 100%;
       background-color: rgba(46, 46, 46, 0.712);
       color: white;
       text-align: center;
       
       
    }
.topnav {
    padding: 2px;
    left: 0;
    top: 0;
    width: 100%;
    background-color: rgba(208, 77, 30, 0.664);
    border-bottom: 4px solid rgba(99, 41, 20, 0.664);
    color: white;
    text-align: center;
}





.TeamName {
    height: 11.5vh;
    margin: auto;
    width: 100%;
    }
    /* .TeamLogoL img {
        display: block;
        height: 7vh;
        float: left;
        margin-left: 10%;
    } */
    .TeamOneName{
        height: auto;
        margin-top: 0;
        display: block;
        float: right;
        /* font-size:  clamp(12px, 1.6vw, 25px); */
        font-weight: 800;
        font-family: verdana;
        color: #ffffff;
        text-shadow: 1px 1px 1px #000000,
            1px 2px 1px #7f7f7f,
        1px 5px 5px rgba(16,16,16,0.4);
    }

    .TeamTwoName{
        height: auto;
        margin-top: 0;
        float: left;
        /* font-size:  clamp(12px, 1.6vw, 25px); */
        font-weight: 800;
        font-family: verdana;
        color: #ffffff;
        text-shadow: 1px 1px 1px #000000,
            1px 2px 1px #7f7f7f,
        1px 5px 5px rgba(16,16,16,0.4);
    }
    /* .TeamLogoR img {
        display: block;
        height: 7vh;
        float: right;
        margin-right: 10%;
    } */

    .t_one{
        margin: auto;
        width: 40%;
        float: left;
    }

    .t_two{
        margin: auto;
        width: 40%;
        float: right;
        } 
        .t_vs{
            display: block;
            width: 20%;
            font-size:  clamp(12px, 4.4vh, 65px);
            font-weight: 800;
            font-family: verdana;
        color: #ffffff;
        text-shadow: 1px 1px 1px #000000,
            1px 2px 1px #7f7f7f,
        1px 5px 5px rgba(16,16,16,0.4);
            margin-left: 0;
            margin-right: 0;
            float: left;
            } 
        
            .lbl_date {
                display: block;
                height: auto;
                margin: auto;
                width: 100%;
                }
                .date {
                    display: block;
                    margin: auto;
                    font-size:  clamp(8px, 1.5vh, 30px);
                    font-weight: 800;
                    font-family: verdana;
                color: #ffffff;
                text-shadow: 1px 1px 1px #000000,
                    1px 2px 1px #7f7f7f,
                1px 5px 5px rgba(16,16,16,0.4);
                    
                    
                    }

    .name_jackpot {
        align-items: center;
    }
    
    .name_jackpot img {
        height: 3.5vh;
    }



    .t_grand{
        align-items: center;
        margin: 0;
        padding: 0;
    width: 33%;
    float: left;
    }
    .t_major{
        align-items: center;
        margin: 0;
        padding: 0;
    width: 33%;
    float: left;
        }
        .t_minor{
            align-items: center;
            margin: 0;
            padding: 0;
        width: 33%;
        float: left;
            }
          

    .grand { 
        display: inline-block; 
        font-size:  clamp(3px, 1.5vh, 25px);
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.6);
        text-shadow: 1px 1px 1px #000000,
            1px 2px 1px #000000,
        1px 5px 5px rgba(16,16,16,0.4);
        border: solid 3px #6dacf9;
        -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
              border-radius: 4px;
        -webkit-box-shadow: 0px 0px 4px #6dacf9;
         -moz-box-shadow: 0px 0px 4px #6dacf9;
              box-shadow: 0px 0px 4px #6dacf9;
            }

            
    
    .major {
        display: inline-block; 
        font-size:  clamp(3px, 1.5vh, 25px);
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.6);
        text-shadow: 1px 1px 1px #000000,
            1px 2px 1px #000000,
        1px 5px 5px rgba(16,16,16,0.4);
        border: solid 3px #6dacf9;
        -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
              border-radius: 4px;
        -webkit-box-shadow: 0px 0px 4px #6dacf9;
         -moz-box-shadow: 0px 0px 4px #6dacf9;
              box-shadow: 0px 0px 4px #6dacf9;
        }
    
    .minor { 
        display: inline-block; 
        font-size:  clamp(3px, 1.5vh, 25px);
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.6);
        text-shadow: 1px 1px 1px #000000,
            1px 2px 1px #000000,
        1px 5px 5px rgba(16,16,16,0.4);
        border: solid 3px #6dacf9;
        -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
              border-radius: 4px;
        -webkit-box-shadow: 0px 0px 4px #6dacf9;
         -moz-box-shadow: 0px 0px 4px #6dacf9;
              box-shadow: 0px 0px 4px #6dacf9;
    }




    
}

@media only screen and (orientation: landscape) {
    .footer {
       font-size:  clamp(15px, 1.8vw, 45px);
       padding: 10px;
       position: fixed;
       left: 0;
       bottom: 0;
       width: 100%;
       background-color: rgba(46, 46, 46, 0.712);
       color: white;
       text-align: center;
       
    }
    .topnav {
        padding: 5px;
        left: 0;
        top: 0;
        width: 100%;
        background-color: rgba(208, 77, 30, 0.664);
        border-bottom: 4px solid rgba(99, 41, 20, 0.664);
        color: white;
        text-align: center;
     }


     .TeamName {
        width: 100%;
        }
        /* .TeamLogoL img {
            height: 10vh;
            float: right;
            margin-right: 10px;
        } */
        .TeamOneName{
            margin-top: 0px;
            float: right;
            font-weight: 800;
            font-family: verdana;
            color: #ffffff;
            text-shadow: 1px 1px 1px #000000,
                1px 2px 1px #7f7f7f,
            1px 5px 5px rgba(16,16,16,0.4);
        }

        .teamone{
            text-align: center;
            width: auto;
        }
    
        .TeamTwoName{
            margin-top: 0;
            float: left;
            font-size:  clamp(12px, 1.6vw, 25px);
            font-weight: 800;
            font-family: verdana;
            color: #ffffff;
            text-shadow: 1px 1px 1px #000000,
                1px 2px 1px #7f7f7f,
            1px 5px 5px rgba(16,16,16,0.4);
        }
        /* .TeamLogoR img {
            height: 10vh;
            float: right;
            margin-right: 10%;
        }
     */
        .t_one{
            width: 40%;
            float: left;
        }
    
        .t_two{
            width: 40%;
            float: right;
            } 
            .t_vs{
                display: block;
                width: 20%;
                font-size:  clamp(12px, 3.5vw, 65px);
                font-weight: 800;
                font-family: verdana;
            color: #ffffff;
            text-shadow: 1px 1px 1px #000000,
                1px 2px 1px #7f7f7f,
            1px 5px 5px rgba(16,16,16,0.4);
                margin-left: 0;
                margin-right: 0;
                float: left;
                } 
                .lbl_date {
                    height: auto;
                    margin: auto;
                    width: 100%;
                    }
                    .date {
                        margin: auto;
                        margin-top: -20px;
                        display: block;
                        font-size:  clamp(10px, 3vh, 30px);
                        font-weight: 800;
                        font-family: verdana;
                    color: #ffffff;
                    text-shadow: 1px 1px 1px #000000,
                        1px 2px 1px #7f7f7f,
                    1px 5px 5px rgba(16,16,16,0.4);
                        
                        
                        }






    .name_jackpot {
        display: inline-block;
        float: left;
        margin: 0 5px 0 0;
    }
    
    .name_jackpot img {
        float: left;
        height: 4.5vh;
        margin-top: 7px;
    }


    .t_grand{
        text-align: left;
        margin: 0;
        padding: 0;
    width: 33%;
    float: left;
    }
    .t_major{
        text-align: left;
        margin: 0;
        padding: 0;
        width: 33%;
        float: left;
        }
        .t_minor{
            text-align: left;
            margin: 0;
            padding: 0;
            width: 33%;
            float: right;
            }






.grand { 
    display: inline-block; 
    font-size:  clamp(15px, 2vw, 35px);
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 1px #000000,
        1px 2px 1px #000000,
    1px 5px 5px rgba(16,16,16,0.4);
    border: solid 1.5px #6dacf9;
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
    -webkit-box-shadow: 0px 0px 4px #6dacf9;
     -moz-box-shadow: 0px 0px 4px #6dacf9;
          box-shadow: 0px 0px 4px #6dacf9;}

.major {
    
     display: inline-block; 
     font-size:  clamp(15px, 2vw, 35px);
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 1px #000000,
        1px 2px 1px #000000,
    1px 5px 5px rgba(16,16,16,0.4);
    border: solid 1.5px #6dacf9;
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
    -webkit-box-shadow: 0px 0px 4px #6dacf9;
     -moz-box-shadow: 0px 0px 4px #6dacf9;
          box-shadow: 0px 0px 4px #6dacf9;
    }

.minor { 
    display: inline-block; 
    font-size:  clamp(15px, 2vw, 35px);
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 1px #000000,
        1px 2px 1px #000000,
    1px 5px 5px rgba(16,16,16,0.4);
    border: solid 1.5px #6dacf9;
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
    -webkit-box-shadow: 0px 0px 4px #6dacf9;
     -moz-box-shadow: 0px 0px 4px #6dacf9;
          box-shadow: 0px 0px 4px #6dacf9;
}

}