*{
    box-sizing:border-box;
    padding: 0;
    margin: 0;
}
:root{
    --background:#fbfbfb ; 
    --light:#501a42 ; 
    --dark:#1A0C54 ; 
    --midtone:#4e3c56 ; 
    --border:#EDDCF0 ;
}
body{
    background:var(--background);
    text-align:center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.hero{
    display: flex;
    align-items: center;
    width:100%;
    justify-content:center;
    gap:40px;
    max-width:1100px;
    margin:0 auto;
    padding: 20px;
    background: var(--light);
    margin-top:30px;
    color:var(--border);
    border-radius:20px;
    flex-direction:column;

}

.hero-text, .hero-image {
    flex-basis: 50%;
    flex-grow: 1;
    padding: 20px;
    align-items: center;
    display:block;
    margin:0 auto;
    max-width:100%;
}

.hero-image img {
    max-width:100%;
    margin: 10px auto;
    padding: 10px;
    background: var(--border);
    border-radius: 8px;
    display:block;
}


nav{
    display:flex;
    justify-content:center;
    gap:15px;
    margin:30px auto;
    flex-wrap:wrap;
    text-decoration: none;
}
nav a{
    display:inline-block;
    padding:12px;
    background:var(--midtone);
    color:var(--border);
    border-radius:8px;
    transition:0.3s ease;
    text-decoration: none;
}
nav a:hover{
    background:var(--light);
    color:var(--border);
}
.main{
    margin-top:30px;
    max-width:1100px;
    margin:0 auto;
}
.main h2{
    margin-bottom:10px;
    background: var(--border);
    padding: 20px;
    border-radius:20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: center;
    flex-wrap: wrap;
    width: 90%;
    margin: 20px auto;

}
.gallery{
    grid-column: 1/-1;
    display: flex;
    margin: 20px;
    justify-content:center;
    gap:20px;
}
.gallery img{
    width:200px;
    height:200px;
    object-fit:cover;
    display:block;
    border:8px solid var(--light);
}
img{
    display:block;
}
.main-display h1 {
    padding: 150px;
    text-align: center;
}
.thumb {
    cursor:pointer;
    padding: 20px;
}
.thumb img {
    display: block;
    width: 100%;
    object-fit: cover;
}
.content{
    display:flex;
    align-items: flex-start;
    gap: 15px;
    max-width: 1100px;
    margin: 40px auto;
}
.content-wrap{
    display:flex;
    align-items:flex-start;
    gap:15px;
    max-width:1100px;
    margin:20px auto;

}
.sidebar{
    width:280px;
    flex-shrink: 0;
}
@media(max-width:700px){
    .content-wrap{
        flex-direction: column;
    }
    .sidebar{
        width:100%;
    }
}
.sidebar h3{
    margin-top:10px;

}
ol {
    list-style-type:disc;
    list-style-position: inside;
    padding: 20px;
    margin-top: 20px;
    padding:20px;
    background: var(--border);
    text-align:left;
    line-height: 1.5;
}

li ul {
    text-align: left;
    list-style-type:disc;
}
.photo-wall{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    flex:1;
    padding:10px;
    background:var(--border);

}
.photo-wall div {
    width: 100%;
}
.photo-wall div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container {
    width: 90%;
    max-width: 1200px;
    background: var(--light);
    min-height: 500px;
    margin: 20px auto;
    border: 8px solid var(--border);
    border-radius: 8px;
}
.card {
    background: var(--light);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    margin: 50px auto;
    padding: 32px;
    width:min(900px, 90%);
    max-width: 90%;
    border: 3px solid var(--light);
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.text-card {
    text-align: left;
    color:var(--border);
    gap:20;
}
.text-card h1,
.text-card h2,
.text-card h3{
    margin-bottom:12px;
}
.text-card a{
    color:var(--border);
}

.avatar {
    width: 100%;
    max-width:650px;
    height: auto;
    flex: 0 1 450px;
}

.avatar img {
    display: block;
    width: 100%;
    height: auto;
    border: 20px solid var(--border);
    border-radius: 8px;}
footer{
    margin-bottom:50px;
    display: inline-block;
    padding: 12px;
    background: var(--border);
    border-radius: 8px;
    transition: 0.3s ease;
    text-decoration: none;
}
.button a{
    text-decoration: none;
}
.button:hover a{
    color: var(--border);
    
}
.button:hover{
    background:var(--light);
}
h2{
    margin-top: 20px;
}
p{
    margin-bottom: 5px;
}
@media(min-width:700px) {
    .photo-wall {
        display: grid;
        grid-template-columns: repeat(1, 1fr);

    }
        .card {
            display: flex;
            flex-direction: column;
            text-align: center;
        }
       
        
    
}

@media(min-width:900px) {
    .photo-wall {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

    }
    .hero{
        flex-direction:row;
    }
}

@media(min-width:1200px) {

    .photo-wall {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

    }
    .hero{
        flex-direction:row;
    }

}
.buttons