@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Lobster&family=Oswald&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

header {
    font-family: 'Poppins', sans-serif;
    color: white;
    display: flex;
	width: 90%;
	height: 10vh;
	margin: auto;
    align-items: center;
}

.logo-container,
.nav-links,
.cart {
	display: flex;
}

.logo-container {
	flex: 1;
}
.logo {
	font-weight: 400;
	margin: 5px;
}
nav {
	flex: 2;
}
.nav-links {
	justify-content: space-around;
    list-style: none;
}
.nav-linkc {
    text-decoration: underline;
    color: black;
    font-weight: bold;
    font-size: 18px;
}
.cart {
	flex: 1;
	justify-content: flex-end;
}

.container-1, .container-2, .container-3, .container-4, .container-5{
    background-color: rgb(0, 0, 0);
    background-color:rgba(0, 0, 0, 0.4);
    width: 75%;
    margin: 0 auto;
    text-align: center;
    border-radius: 20px;
}
.container-2 a {
    color:black;
    font-size: 15px;
    text-decoration: underline;
}
.header-1 {
    text-align: center;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.5);
    background: rgba(78,201,127,0.5);
    background: -moz-linear-gradient(left, rgba(78,201,127,1) 0%, rgba(217,255,0,0.5) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(78,201,127,0.5)), color-stop(100%, rgba(217,255,0,1)));
    background: -webkit-linear-gradient(left, rgba(78,201,127,1) 0%, rgba(217,255,0,0.5) 100%);
    background: -o-linear-gradient(left, rgba(78,201,127,1) 0%, rgba(217,255,0,0.5) 100%);
    background: -ms-linear-gradient(left, rgba(78,201,127,1) 0%, rgba(217,255,0,0.5) 100%);
    background: linear-gradient(to right, rgba(78,201,127,1) 0%, rgba(217,255,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ec97f', endColorstr='#d9ff00', GradientType=1 );
}

#videoBG {
    position: fixed;
    z-index: -1;
}

@media(min-aspect-ratio: 16/9) {
    #videoBG {
        width: 100%;
        height: auto;
    }
}

@media(max-aspect-ratio: 16/9) {
    #videoBG {
        width: auto;
        height: 100%;
    }
}

p {
    margin-top: 10px;
    text-align: center;
    font-size: x-large;
    font-family: 'Oswald', sans-serif;
    color: white;
}
li {
    text-align: center;
    font-size: 20px;
    color: black;
    
}

.my-profile {
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-family: 'Kaushan Script', cursive;
    font-size: 15px;
    color: white;
}

#follow-me {
    margin-top: 10px;
}

.twitter {
    color: white;
}
.container-5 a {
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 20px;
    opacity: 75%;
    text-decoration: underline;
}

.container-5 a:hover {
    font-size: 25px;
    opacity: 100%;
}

h2{
    color: rgb(255, 255, 255);
    margin-top: 15px;
    font-family: 'Oswald', sans-serif;
}

h1,h3 {
    color: rgb(205, 210, 255);
}

.header-1 h1 {
    text-align: center;
    color: rgb(255, 255, 255);
    font-family: 'Lobster', cursive;
    font-size: 50px;
    padding: 5px;
}

.header-1 a {
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 15px;
    opacity: 75%;
    text-decoration: underline;
}

.header-1 a:hover {
    font-size: 20px;
    opacity: 100%;
}

.flex-box-container-1, .flex-box-container-2, .flex-box-container-rps , .flex-box-container-pick-color,
.flex-blackjack-row-1, .flex-blackjack-row-2 , .flex-blackjack-row-3 {
    background-color: rgb(0, 0, 0);
    background-color:rgba(0, 0, 0, 0.4);
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.flex-blackjack-row-1 {
    background: rgba(87,161,27,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(87,161,27,1)), color-stop(100%, rgba(62,92,36,0.7)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    background: radial-gradient(ellipse at center, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a11b', endColorstr='#3e5c24', GradientType=1 );
    
}

.flex-blackjack-row-2 {
    background: rgba(87,161,27,1);
    background: -moz-linear-gradient(top, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(87,161,27,1)), color-stop(100%, rgba(62,92,36,0.7)));
    background: -webkit-linear-gradient(top, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    background: -o-linear-gradient(top, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    background: -ms-linear-gradient(top, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    background: linear-gradient(to bottom, rgba(87,161,27,1) 0%, rgba(62,92,36,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a11b', endColorstr='#3e5c24', GradientType=0 );
}

.flex-blackjack-row-1 div {
    border-left: 2px solid black;
    border-right: 2px solid black;
    padding: 10px;
    flex: 1;
    text-align: center;
    min-height: 350px;
}

.flex-blackjack-row-1 img {
    margin: 5px;
}

table , th, td {
    color: blanchedalmond;
    padding: 5px;
    text-align: center;
}

th {
    background-color: rgba(22, 21, 21, 0.7);
}

td {
    background-color: rgba(32, 31, 31, 0.7);

}

.flex-box-container-1 div {
    display: flex;
    padding: 10px;
    align-items: center;
}


.flex-box-container-2 img {
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.7);
    margin: 10px;
}

.flex-box-container-rps img {
    border-radius: 10px;
    margin: 5px;
}

.flex-box-container-rps img:hover {
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.7); 
}

.flex-box-container-pick-color button {
    margin: 5px;
}