/*
	General styles
	
	Sets up template-wide styles and includes each template type CSS file.
	
	Styles links with a ▸ after them; if you don't want that, add a .plain
	class to the link like so:
	
		<a href="#" class="plain"><img src="images/icon.png" /></a>
				
*/

* {
	box-sizing: border-box;
}

html {
	background-color: #333;
}

body {
   background-color: #2d203a; /* Set your desired background color */
  }
}




.video-container {
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 56.25%;
    overflow:hidden;
}


.video-container.vertical { 

    padding-bottom: 177.78%;
}

.video-container.ratio_4_3 { 

    padding-bottom: 75%;
}


.card .video-container {
    border-bottom:4px solid var(--primary);
}
.video-caption {
    margin:2px 0 5px;
        color:#343;
}
.video-title {
    font-size:1.5rem;    
}
.video-caption p {
    font-size:1rem;
    color:#6a705c;
}
.video-container iframe,
.video-container video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}



 .iframe-container {
        position: relative;
     display:flex;
     justify-content: center;
     align-items: center;
        /*width: 100%;
        padding-bottom: 56.25%; *//* Aspect ratio (height:width) 9:16*/
        overflow: hidden;
    }
    
    .iframe-container iframe {
        /*position: absolute;
        top: 0;
        left: 0;*/
        width: 960px;
        height: 540px;
        border: none;
    }

.game-container {
   position: relative;
   width: 100%;
	height: 0;
  overflow: hidden;
   padding-top: 56.25%; /* 16:9 aspect ratio (height:width) */
 }


.game-iframe {
   position: absolute;
   top: 0;
   left: 0;
    width: 100%;
	height: 100%;
	 border: 0;
        }
        
        
        
        
        


.interactive-thumbnail{

    margin-top:10px;
}


img {
    max-width: 100%;
    height: auto;
}
  
.glow-button {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 25px;
    background-color: #83f2a5;
    color: #000000;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    font-size: 28px;
    font-weight: bold;
    border-radius: 15px;
    transition: background-color 0.3s ease;
}

.glow-button:hover {
    background-color: #eeef5d;
    /* Add a box-shadow for a glowing effect */
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
}

hr {
    height: 4px; /* Set the height of the line */
    background-color: #2d203a; /* Set the color of the line */
    width: 100%;
}

.starter-template {
  padding: 10px 15px;
  text-align: center;
}

 
.custom-navbar {
    background-color: #2d203a;
}

.navbar-nav {
    width: 100%;
    text-align: center;


}

.navbar-nav .nav-item {
    display: inline-block;
    float: none;
    }

.navbar-toggler {
	order: -1; /* Move the toggler to the left */
    margin-right: 15px; /* Add some margin to separate it from the other content */
    }

.navbar-nav {
    margin-left: auto; /* Move the navbar items to the right */
    }


.navbar-nav a {
    color: white !important;
    font-size: 1vw;
    }
    
.navbar-brand {
    color: white !important;
    font-size: 1vw;
    }
    
.navbar-nav a:hover {
    color: lightgray; /* Change the color on hover */
}

.navbar-inverse {
    background-color: #2d203a;
    color: white;
}

.navbar-inverse a:hover {
    color: lightgray; /* Change the color on hover */
}

a:active {
    color: #33608a; 
}

a {
    color: #33608a; 
}

h2 {
  color: #2d203a; 
  font-weight: bold;
  font-size: 2.4vw;
}

h1 {
  color: #31003d; 
  font-weight: bold;
  font-size: 2.9vw;
}

h3 {
  color: #2d203a; 
  font-weight: bold;
  font-size: 1.9vw;
}

p, ul, li {
font-size: 1.4vw;
}

.light-grey-border {
    border: 2px solid lightgrey; 
    border-radius: 20px; 
}
.custom-container {
    background-color: #FFFFFF; /* Use the specified grey color */
    padding: 30px; /* Add some padding for content inside the container */
}

.footer {
    width: 100%;
    background-color: #fff; /* Light gray background color */
    padding: 20px 0; /* Add padding for spacing */
    color: #333; /* Text color for the footer */
    text-align: center; /* Center-align the text */
}
.panel-default > .panel-heading {
    background-color:#2d203a;
}

.image-container {
   position: relative;
   display: inline-block;
}

.image-container img {
    max-width: 100%;
    height: auto;
}
.chef-container {
   position: relative;
   display: inline-block;
}

.chef-container img {
    max-width: 100%;
    height: auto;
}
.galaxy-container {
   position: relative;
   display: inline-block;
}

.galaxy-container img {
    max-width: 100%;
    height: auto;
}
.jungle-container {
   position: relative;
   display: inline-block;
}

.jungle-container img {
    max-width: 100%;
    height: auto;
}
.marine-container {
   position: relative;
   display: inline-block;
}

.marine-container img {
    max-width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
        }

.overlay a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
        }

        .image-container:hover .overlay {
            opacity: 1;
        }
.image-container {
  position: relative;
  display: inline-block;
}

.thumbnail {
  max-width: 100%;
  height: auto;
}

.popup {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 50%;
  height: auto;
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: 1; /* Ensure the pop-up image appears on top */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container:hover .popup {
  opacity: 1; /* Show the pop-up image on hover */
}

.image-stack {
	display: grid; 
	grid-template-columns: repeat(12, 1fr);
	position: relative; 
}

@media screen and (max-width: 800px) {
.glow-button {
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 5px;
}

@media screen and (max-width: 600px) {
img {
    max-width: 70%; /* Adjust the percentage as needed */
}
h1 {
    font-size: 4vw; /* Adjust the value as needed for smaller screens */
}
h2 {
    font-size: 3.4vw; /* Adjust the value as needed for smaller screens */
}
h3 {
    font-size: 2.9vw; /* Adjust the value as needed for smaller screens */
}
p {
    font-size: 2.4vw; /* Adjust the value as needed for smaller screens */
}
ul, li {
    font-size: 2.4vw; /* Adjust the value as needed for smaller screens */
}

    </style>