/*Styles like the one from the homepage*/
html {
    scroll-behavior: smooth;
}

body {
    background-color :#fdfdfd;
    /* color: #fdfdfd; */
    padding-left : 5%;
    padding-right: 5%;
}

h1, h2, h3, h4, h5, h6 {
    color: #1B4965;
    font-family: 'Poppins', sans-serif;
}

a {
    color: #1B4965;
    text-decoration: None;
}

a:hover {
    color: #5FA8D3;
}

.container-fluid{
    border : black;
}

.list-unstyled li {
    list-style-type: none;
}


.bi {
    color: #1B4965;
    padding-right:10px;
}

.highlight {
    background-color: #1B4965;
    color: #FFFFFF;
}

.navbar{
    background-color: #fdfdfd;
}
.navbar a {
    color: #1B4965; 
}

.navbar-brand{
    color : #5FA8D3;
}

.navbar-nav .nav-link {
    color: #1B4965;
}

#bigtext{
    font-family: 'Poppins', sans-serif;
    font-size : 30px;
}

#subtext{
    font-family: 'Open Sans', sans-serif;
    font-size : medium;
}


#aboutme{
    padding-top : 5%;
}

#experience{
    padding-top : 5%;
    padding-bottom: 5%;
    background-color : #fdfdfd;
}

#projects{
    padding-top : 5%;
    padding-bottom: 5%;
    background-color : #fdfdfd;
}

#contact{
    padding-top : 5%;
    padding-bottom: 5%;
    background-color : #fdfdfd;
    border-bottom: 5px solid #1B4965;
    transition: transform 0.3s, box-shadow 0.3s;
    align-items: left;
    justify-content : left;
}

/* New Gameplay Styles */
.flex-container {
  display: flex; /* This makes the container a flex container */
  /* Optional properties for alignment and spacing */
  justify-content: space-around; /* Distributes space evenly around items */
  align-items: center; /* Aligns items along the cross-axis (vertically) */
  gap: 10px; /* Adds space between flex items */
}

.item {
  /* Basic styling for the child divs */
    padding-top: 50px;
}

/* Responsive games */
.game-container {
    flex: 1 1 400px; /* grow, shrink, base width */
    max-width: 700px; /* original width */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-iframe {
    width: 100%;  /* fill the container */
    height: auto; /* height adjusts automatically */
    aspect-ratio: 1 / 1; /* keep square shape */
    border: 2px solid #ddd;
    border-radius: 12px;
}


/********************************************************/
.cards-row {
    max-width: 1420px; /* same as 2 games 700px + 20px gap */
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.task-card, .improvements-card {
    width: 49%; /* each card roughly half */
    border-radius: 20px;
    background-color: #f8f9fa;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.task-card:hover, .improvements-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.task-card h3, .improvements-card h3 {
    color: #343a40;
}

.task-card p, .improvements-card ul {
    font-size: 1rem;
    line-height: 1.5;
}

/********************************************************/

/* Button Styles */
.btn-primary {
    background-color: #1B4965;
    border-color: #1B4965;
    padding-top : 5px;
}
  
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.label{
    padding-bottom : 5px;
    padding-top : 5px;
}

#footer {
    margin-top: 20px;
    background-color: #fdfdfd;
    font-family: 'Poppins', sans-serif;
    transition: transform 0.3s, box-shadow 0.3s;
}