@charset "utf-8";
/* CSS Document */
body{
	padding: 0;
	margin: 0;
	color: white;
	overflow-y: hidden; /* Hide vertical scrollbar */
}
.area {
    overflow: auto;
	height: 100vh; /* Set height to viewport height */

}

/* Hide vertical scrollbar for inner content */
.area::-webkit-scrollbar {
    display: none;
}

.area {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

		#container{
    		position: relative;
			max-width: 500px;
    		border: 5px solid green;
    		border-radius: 10px;
    		text-align: center;
    		margin: auto;
    		z-index: 11;
		}
		#questionBox{
			padding:5px;
			
		}
	
		a{
			text-decoration: none;
			color: black;		
		}
		a:hover{
			color:blue;
			
		}
		.headerBox{
			font-size: 1.5em;
			margin-top: 0;
			margin-left: 50px;
			text-align: center;
			
		}
		.questionMark{
			margin-top:0;
			display: block;
    		background: #4444ff;
    		color: #fff;
   			border-radius: 50%;
    		width: 40px;
    		height: 40px;
    		line-height: 40px;
    		text-align: center;
    		font-size: 20px;
    		font-family: Verdana;
			position: absolute;
			margin: 10px;
		}
		
		.titleBar{
			text-align: center;
			margin-right: 30%;
			font-size: 2em;
			background-color: transparent;
		}
		#messageBox{
			max-width: 500px;
  			padding: 20px;
			border-radius: 10px;
			margin:auto;
			box-shadow: 0 5px 10px rgb(0 0 0 / 0.2);
			position: relative;
			z-index: 11;
			border: 3px solid green;
			margin-bottom: 20px;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); /* Dark to transparent gradient */
			
		}
		.messageBoxHeader{
			margin:0;
			padding:0;
			width: 100%;
			padding-bottom: 5px;
			text-align: center;
			background-color: black;
		}
		
		
		.button{
			display: block;
			border: 2px solid;
			padding: 10px;
			margin-bottom: 0px;
			background-color: aqua;
		}
		.button:hover{
			background-color: aquamarine;
		}
		
		.link{
			width: 40%;
			border: 2px solid;
			padding: 2px;
			margin-bottom: 2px;
			background-color: aqua;
		}
		.link:hover{
			background-color: aquamarine;
		}
		.flex-container {
            display: flex;
            flex-wrap: wrap;
        }
        .flex-item {
           flex: 1 1 calc(100%); /* Adjust width to account for the gap*/
           box-sizing: border-box;
        }
		.main-container {
            display: flex;
            margin: 20px; /* Adding some margin for better appearance */
        }

        .content {
            flex: 4;
            padding: 10px;
        }

        .new-text-group {
            flex: 1 calc(20%);
            padding: 10px;
            margin-left: 20px; /* Optional: Add margin for spacing */
			text-shadow:
                -1px -1px 0 #000,  
                 1px -1px 0 #000,
                -1px  1px 0 #000,
                 1px  1px 0 #000; /* Outline color */
			
        }
		.new-text-group h3{
			margin-left: 40px;
			color: red;
			
		}
		#img, #imgTwo{
			display: none;
			max-width: 500px;
		}
		.hover-effect {
            color: blue;
            cursor: pointer;
			position: relative;
 			display: inline-block;
        }

        .hover-effect:hover {
            color: orange;
            cursor: pointer; /* This changes the cursor to a hand pointer */
        }
		.hover-effect img {
  			transition: transform 0.3s ease;
		}
		.hover-effect:hover img {
		  transform: scale(2); /* Scale the image to 3 times its original size */
		  z-index: 10;
		}
.flowId{
	padding-bottom:20px;
}
@media (min-width:768px) {
    .content {
        width: auto;
    }
}