/*https://chas-hackathon.lovable.app/checklist?team=M%C3%B6lle*/

:root {
    --offwhite: #faebd7;
    --darkblue: #03021c;
    --pink: #feabd7;
    --hotpink: #ca217b;
}

body {
    font-family: "Poppins", sans-serif; /* Sets the font for the entire page */
    background-color: #FEABD7;
    background: linear-gradient(90deg, rgba(254, 171, 215, 1) 0%, rgba(202, 33, 123, 1) 50%, rgba(250, 235, 215, 1) 100%);
    color: var(--darkblue); /* Dark gray text color */
    margin: 0; /* Removes default margin */
    padding: 20px; /* Adds padding around the content */
}

header{
}

.hero{
    max-height: 200px;
    width: auto;

}


main{
    display: flex;
    flex-direction: column;
}

.us-container{
    border: solid ;
    display: flex;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.us{
margin: 6px;
padding: 6px;
border: solid;
border-radius: 6px;
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.us:hover{
scale: 102%;
}
.us img{
    height: 400px;
    width: auto;
}

article{
    display: flex;
    flex-direction: column;
}

section{
}

/*----BACKGROUND TOGGLE-----*/
.bg-button {
    height: 48px;
    width: 250px;
    display: inline-block;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    color: var(--offwhite);
    background-color: var(--darkblue);
    border: 1px solid var(--offwhite);
    border-radius: 10px;
    box-shadow: 5px 5px 0px var(--offwhite);
    transition: all 0.3 ease;
    cursor: pointer;
}

.bg-button:hover {
    background-color: var(--darkblue);
    color: var(--offwhite);
    border: 1px solid var(--hotpink);
    box-shadow: 5px 5px 0px var(--hotpink);
}

.bg-button:active {
    background-color: var(--hotpink);
    box-shadow: none;
    transform: translateY(4px);
}

body.alt-background {
    background: var(--offwhite);
    background-color: var(--offwhite);
    color: var(--darkblue);
}

@media(max-width: 800px) {
h1{
   font-size: 20px;
}
}