/* template code from https://github.com/deweydex/HTML-CSS-SQL-JS */

* {
            font-family: "Times New Roman", Times, serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
/*
===============================
HEADER STYLE
===============================
*/
header {
    background-color: #ebc026;
    color: black;
    padding: 2rem 0;
    text-align: center;
}
header h1 {
    font-size: 5rem;
}
header p {
    font-size: 1.3rem;
}

/*
/*
===============================
NAV STYLE
===============================
*/
nav {
    background-color: #a58f40;
    padding: 0.7rem 0;
}

.nav-main {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 2.3rem;
}

nav .Nav-link { 
    color: black;
    text-decoration: none;
    padding: 0.5rem;
    
}

.Nav-link:hover {
    color: rgb(0, 0, 255);
}   

.Dropdown {
    color: black;
    position: relative;
}

.Dropdown-content {
    position: absolute;
    display: none;
    background-color: #a58f40;
    min-width: fit-content;
    padding-top: 10px;
    z-index: 1;
}

.Dropdown-content li {
    float: none;
    padding: 12px 16px;
    display: block;
    text-align: left;
}
.Dropdown-content a {
    color: black;
    text-decoration: none;
}

.Dropdown-content li:hover {
    background-color: rgba(34, 33, 33, 0.247);
}

.Dropdown:hover .Dropdown-content {
  display: block;
}

/*
===============================
MAIN STYLE
===============================
*/

main {
margin: 0 ;
padding: 2rem;
background-image: url(Images/background.png);
background-position: center;
background-size: cover;
/* background-color: aqua; */
}

#Content {
    margin: 0 auto;
    max-width: 1200px;
    margin-top: 2rem; margin-bottom: 2rem;
    background-color: rgba(0, 0, 255, 0);
    border-radius: 10px;
} 

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
   

.card {
    max-width: 500px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1.5rem;
    background-color: #f9fafb;
}

.text {
    background-color: rgb(236, 236, 236);
    width: 340px;
    height: 165px;
    overflow: scroll;
    overflow-x: hidden;
}

img {
    width: 250px;
    height: 250px;
    margin: 5px;
}

#what_is {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-wrap: nowrap
}

#info {
    max-width: 1200px
}



/*
===============================
FOOTER STYLE
===============================
*/

 #footer {
            background-color: #1f2937;
            color: white;
            text-align: center;
            padding: 1rem 0;
            
        }
        
.link {
    color: white

}

/*
===============================
OTHER
===============================
*/

#White {
    color: #f9fafb;
}