body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
    background-color: #000000;
    height: auto; 
}
a {
    color: #ff9500;
}
.header {
    background-color: #ffffff;
    position: absolute;
    width: 100%;
    z-index: 3;
    top: 0;
    padding-bottom: 0;
}
    .header ul {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        background-color: #ffffff;
        padding-bottom: 0;
    }
    .header li a {
        display: block;
        padding: 20px 20px;
        text-decoration: none;
        color: #ff9500; 
        font-size: 25px; 
        font-family: 'Amatic SC', cursive;
        letter-spacing: 1px; 
        font-weight: 700; 
    }
        .header li a:hover,
        .header .mButton:hover {
            background-color: #ffffff;
            color: #000000;
        }
   .header .logo {
        display: block;
        float: left;
        font-size: 2em;
        padding: 20px 20px;
        text-decoration: none;
        padding-bottom: 0;
    }
    .header .menu {
        clear: both;
        max-height: 0;
        transition: max-height .2s ease-out;
    }
    .header .mIcon {
        cursor: pointer;
        display: inline-block;
        float: right;
        padding: 50px 20px 59px;
        position: relative;
        user-select: none;
    }
        .header .mIcon .navIcon {
            background: #ff9500;
            display: block;
            height: 3px;
            position: relative;
            transition: background .2s ease-out;
            width: 30px;
        }
            .header .mIcon .navIcon:before,
            .header .mIcon .navIcon:after {
                background: #ff9500;
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                transition: all .2s ease-out;
                width: 100%;
            }
            .header .mIcon .navIcon:before {
                top: 8px;
            }
            .header .mIcon .navIcon:after {
                top: -8px;
            }
    .header .mButton {
        display: none;
    }
        .header .mButton:checked ~ .menu {
            max-height: 300px;
        }
        .header .mButton:checked ~ .mIcon .navIcon {
            background: transparent;
        }
            .header .mButton:checked ~ .mIcon .navIcon:before {
                transform: rotate(-45deg);
            }
            .header .mButton:checked ~ .mIcon .navIcon:after {
                transform: rotate(45deg);
            }
        .header .mButton:checked ~ .mIcon:not(.steps) .navIcon:before,
        .header .mButton:checked ~ .mIcon:not(.steps) .navIcon:after {
            top: 0;
        }
@media (min-width: 48em) {
    .header li {
        float: left;
    }
        .header li a {
            padding: 40px 30px;
        }
    .header .menu {
        clear: none;
        float: right;
        max-height: none;
    }
    .header .mIcon {
        display: none;
    }
}



.navBan {
    width: 100%;
    height: auto;
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /*padding-top: 0;*/
    position: relative;
    margin-top: 200px;
    margin-bottom: 100px;  
}

.contentBorder {
    width: 75%;
    margin: auto;
    height: auto;
    border: solid #ff9500 3px;
    padding-top: 0; 
    min-width: 200px; 
}

#headingNavbar {
    color: #ff9500;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font-family: 'Amatic SC', cursive;
    font-weight: 700; 
    letter-spacing: 3px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 40px;
    text-shadow: 2px 2px #3d3d3d;
}

.paragraphNavbar {
    text-align: center;
    color: #ff9500;
    margin-right: auto;
    margin-left: auto;
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 300; 
    font-size: 20px;
}

.paragraphNavbar a {
    text-align: center;
    color: #808080;
    transition: 0.5s;
    text-decoration: none;
}

.paragraphNavbar a:hover {
     text-align: center;
     color: #ff9500;
     transition: 0.5s;
}




.buttonClass {
    font-family: 'Amatic SC', cursive;
    font-weight: 500; 
    letter-spacing: 2px;
    color: #ff9500;
    font-size: 20px;
    padding: 10px;
    border: 1px solid #ff9500;
    background-color: #000;
    transition: .5s;
}

.buttonClass:hover {
    font-family: 'Amatic SC', cursive;
    font-weight: 500; 
    color: #808080;
    font-size: 20px;
    padding: 10px;
    border: 1px solid #808080;
    background-color: #000;
    transition: .5s;
}



.footer {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 500; 
    height: 100px;
    background: #fff;
    color: #ff9500;
    text-align: center;
    padding-top: 50px;
    letter-spacing: 3px;
    /*position: relative;*/
}

.footerName {
    text-transform: uppercase; 
    font-weight: bold; 
}

.footer a {
    text-decoration: none; 
}

/*Blackjack Style*/

#app {
    text-align: center;
}

#cont21 {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    height: auto;
    text-align: center;
    /*overflow:auto;
	border: medium groove #0D1A13;
	line-height: 135%;*/
}

.cardTitle {
    color: #ff9500;
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 500; 
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
}

.cardAmount {
    text-align: center;
    color: #808080;
    font-size: 30px;
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 500; 
    text-transform: uppercase;
}

.btn21 {
    font-family: 'Amatic SC', cursive;
    font-weight: 500; 
    letter-spacing: 2px;
    width: 120px;
    color: #ff9500;
    font-size: 20px;
    padding: 10px;
    border: solid 1px #ff9500;
    background-color: #000;
    transition: .5s;
}


.btn21:hover {
    font-family: 'Amatic SC', cursive;
    font-weight: 500; 
    width: 120px;
    color: #808080;
    border: solid 1px #808080;
    font-size: 20px;
    padding: 10px;
    background-color: #000;
    transition: .5s;
    }

.btn21:active {
    font-family: 'Amatic SC', cursive;
    font-weight: 500; 
    letter-spacing: 2px;
    width: 120px;
    color: #ff9500;
    font-size: 20px;
    padding: 10px;
    border: solid 1px #ff9500;
    background-color: #000;
    transition: .5s;
}

.btn21:disabled {
    font-family: 'Amatic SC', cursive;
    font-weight: 500; 
    letter-spacing: 5px;
    width: 120px;
    color: #373737;
    border: solid 1px #373737;
    font-size: 20px;
    padding: 10px;
    background-color: #000;
    transition: .5s;
}

/*tic tac toe style*/

.gameInstructions {
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 500; 
    color: #ff9500;
    font-size: 25px;
    text-align: center; 
}

#Player {
    text-align: center;
    color: #ff9500;
    font-size: 25px;
}

#ticTacToeBoard {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: 60%;
    height: auto;
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 500; 
}

#subTitleTicTacToe {
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 500; 
    font-size: 50px;
    letter-spacing: 5px;
    padding-bottom: 40px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.t {
    height: 80px;
    width: 80px;
    font-size: 45pt;
    text-align: center;
    border: 1px solid #ffffff;
    font-family: "Comic Sans MS", cursive, sans-serif;
    cursor: pointer;
}

#tic {
    margin-right: auto;
    margin-left: auto;
    color: #ff9500;
}


    #tic tr:first-child td {
        border-top: 0;
    }

    #tic tr:last-child td {
        border-bottom: 0;
    }

    #tic tr td:first-child {
        border-left: 0;
    }

    #tic tr td:last-child {
        border-right: 0;
    }



@media (max-width: 480px) {

#headingNavbar {
    font-size: 30px;
}

.paragraphNavbar {
    font-size: 18px;
}

}