body {
        text-align: center;
        font-family: 'Roboto Slab', serif;
        background-color: #222; /* Dark background color */
        color: #cae6ec; /* Light text color */
        margin: 0 auto;
	font-size: 1.5vw;
    }

    a {
        color: #7FFFD4;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    a:hover {
        color: #009999;
    }
    
img {
padding:inherit;
margin:auto;
width: 100%;
display: block;
}

    p {
        max-width: 100%;
        margin: 0 auto;
    }
    table {
        margin: 0 auto; /* Center-align the table */
        max-width: 50%;
    }
    hr.solid {
border-top: 1px solid;
border-color: #694594;

}
.header{
  padding: 1px;
  text-align: center;
  background: #694594;
  color: white;
  font-size: 3.5vw;
  margin-bottom: 0px;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 17px auto;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #694594;
  color: white;
}





    iframe {
        aspect-ratio: 16/9; 
	display: block;
        margin: 0 auto; /* Center-align iframes */
	width:100%;
	height:100%;

    }
    footer {
        margin-top: 20px; /* Add some space above the footer */
        background-color: #694594;
        padding: 20px; /* Add padding to make the background color visible */
         

    }

    .social-links a {
        margin: 10px; /* Add spacing between social media icons */
            text-decoration: none; /* Remove default underline for links */
            color: #333; /* Set link color */    
        }

        table img {
    max-width: 100%;
    height: auto;
}

.games-list {
    list-style: none; /* Remove bullets */
    padding: 0; /* Remove default padding */
}

.games-list li {
    margin-bottom: 10px;
    background-size: 100% 100%; /* Set the size of your image */
    line-height: 30px; /* Set the line height to match the image size */
}

/* Adjust the size of the images */
.games-list li a img {
    width: 50%;
    height: auto;
}

.images {
	text-align: left;
	max-width: 50%;
	margin: 0 auto;
}

.row {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}
.column {
	flex: 50%;
	width: 100%;
	padding: 0 4px;
}
.column a img {
margin-top: 8px;
vertical-align: middle;
}

.lightbox-gallery a img {
    /* max-width: 50%; /* Set the maximum width */
    /*height: auto; /* Maintain aspect ratio */
    /*margin-bottom: 10px; */
}

ul.projects {
    list-style: circle;
}

.title {
max-width: 50%;
margin: 0 auto;
text-align: left;
}

.projects{
text-align: left;
max-width: 50%;
margin: 0 auto;
    p {
        max-width: 100%;
        margin: 0 auto;
    }

}
	
ul.skills {
list-style: circle;
}

.skills{
text-align: left;
max-width: 50%;
margin: 0 auto;
padding: 8px;
}

.resume{
text-align: left;
max-width: 50%;
margin: 0 auto;
}

.games{
margin: 0 auto;
max-width: 50%;
text-align: left;
}

.reel{
margin: 0 auto;
max-width: 50%;
text-align: left;
}
ul.resume {
list-style: circle;
}

.awards{
text-align: left;
max-width: 50%;
margin: 0 auto;
}


ul.awards {
list-style: circle;
}

/* mobile screen stuff */
@media only screen and (max-width: 600px){
	body {
		font-size: 3.2vw;
	} 
	.header{
		font-size: 4.5vw;
	}
	.games-list li a img {
		max-width: 100%;
		height: auto;
	}
	.lightbox-gallery a img {
		max-width: 100%; /* Set the maximum width */
		height: auto; /* Maintain aspect ratio */
		margin-bottom: 10px;
	}

	p {
		max-width: 90%;
		margin: 0 auto;
	}    
	    
	iframe {
		aspect-ratio: 16/9;
		display: block;
		margin: 0 auto; /* Center-align iframes */
		margin-top: 10px;
		width: 100%;
		height: 100%;
	}
	.title {
		max-width: 90%;
		margin: 0 auto;
		text-align: left;
	}

	.projects {
		text-align: left;
		max-width: 90%;
		margin: 0 auto;
		p {
			max-width: 100%;
			margin: 0 auto;
		} 

	}

	.games{
		margin: 0 auto;
		max-width: 90%;
		text-align: left;
	}


}
.turbo {
    text-shadow: 2px 2px 20px #694594;
    font-size: 45;
    color: white;
}