/*
this follows the naming conventions of open props
*/
:host{
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center; 
    background-color: var(--surface-1);
    height:100%;
    width:100%;
    --full-width:100%;
    --full-height:100%
}
.container{
    background-color: var(--surface-2);
    gap: var(--size-5);
    width: var(--full-width);
    height: var(--full-height);
    display:grid;
    overflow:hidden;
}

main{
    display: flex;
    flex-direction:column;
    justify-content: space-evenly;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    animation: var(--animation-fade-in);
    box-shadow: var(--shadow-3);
    width:90%;
    color: var(--ink-1);
    background-image: var(--gradient-23);
}

div>main{
    color:var(--pink-1);
}

/* On mouse-over, add a deeper shadow */
main:hover {
    box-shadow: var(--shadow-3);
}

a{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}
img {
    object-fit: scale-down;
    max-width: 100%;
}


summary{
    list-style:none;
    margin-top: 5px;
    font-weight: 800;
}

summary::-webkit-details-marker {
    display: none;
}

a:link{
    text-decoration:none;
}



h1, h2 {
    text-align: left;
    margin-left: 5px;
}