body{
    color: white;
    background:linear-gradient(navy,indigo);
    background-attachment:fixed;
    margin: 0;
    min-height: 100vh;           /* Ensures the layout stretches to the full window height */
    display: grid;
    grid-template-columns: 3fr 1fr;    /* Splits width: Main gets 75% (3 fractions), Aside gets 25% (1 fraction) */
    grid-template-rows: auto 1fr auto;
}

header, footer {
    grid-column: 1 / -1;         /* Forces the header and footer to stretch across all columns */
    background-color: black;
    padding: 5px;
    text-align: center;
}

main{
    padding: 10px;
}

aside{
    background-color: darkslateblue;
    padding: 10px;
}

div.media{
    background-color: black;
    height: 80vh;
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
}

img.media,video.media,audio.media{
    background-color:silver;
    max-width: 100%;
    max-height: 100%;
    cursor:zoom-in;
}

a{
    color:white;
}

a.btn{
text-decoration:none;
    background-color: darkblue;
    padding: 5px;
    border: 1px solid;
    display: inline-block;
    flex:1;
}

section{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: darkblue;
    /*border: 1px solid;*/
    gap: 10px;
}

section img{
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    /*border: 1px solid;*/
    object-position: 50%;
}

section img:hover{
    animation: move linear alternate infinite 2s;/*change to 0 and set via code later*/
}

@keyframes move {
    0%{object-position: 0% 0%;}
    100%{object-position: 100% 100%;}
}