@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

h1 {
    font-family: "Oswald";
    color: darkblue;
    text-align: center;
    font-size: 4vw;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

.navbar {
    background-color: black
}

.navbar-brand{
    color: white;
}

.navbar-toggler-icon {
    color: white;
}

.nav-link {
    color: white;
}


.card {
    margin: 0 auto;          
    text-align: center;
    max-width: 400px;        
}

/* Dev Image */
.card-img-top {
    display: block;
    width: 100%;             
    height: auto;            
    object-fit: cover;       
    border-radius: 6px 6px 0 0;
}

.card-body {
    padding: 12px;
    text-align: center;
}

.btn-primary {
    padding: 10px;
    margin: 10px;
}

.footer-first {
    padding: 5px;
    margin: 10px;
    background-color: black;
}

div.homeBtn {
    text-align: center;
}

ul.resource {
    text-align: center;
}

a[href="https://www.w3schools.com/bootstrap5/bootstrap_cards.php"] {
    background: green;
}

#test{
    color: blue;
}

.buttonColor {
    background-color: blue;
    color: black;
}

ul {
    list-style-type: none;
}

.resources {
    text-align: center;
    padding: 10px;
    margin: 10px;
}

#resourceLink1, #resourceLink2 {
    padding: 10px;
    text-align: center;
    color: green;
}

#projectsBody {
    text-align: center;
    align-items: center;
    align-content: center;
    background-color: darkolivegreen;
}

#projectPics {
    display: block;
    margin: auto;
    padding: 10px;
}

#container {
    text-align: center; /* Optional: centers the inline blocks */
}

.item-block {
    display: inline-block; /* Makes divs sit side-by-side */
    width: 150px; /* Optional: set a fixed width */
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    vertical-align: top; /* Aligns items to the top if they have different heights */
}

#skillsContainer .skill-block {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 6px;
    background: #f8f9fa;
}
