@font-face {
    font-family: Morganite;
    src: url(Morganite-Black.ttf);
}

html, body {
    --Background_Color: #aa0011;
    --TextColor: #101010;
    background-color: var(--Background_Color);
    background-image: url("Background.jpg");
;
    width: 100vw;
    height: 100%;

    margin: 0px;

    overflow-x: hidden;
}

@keyframes ScalingUp {
    from {scale: 100%;}
    to {scale: 105%;}
}

@keyframes ScalingDown {
    from {scale: 105%;}
    to {scale: 100%;}
}

.Artwork {
    border-radius: 5px;
    border: solid 1px var(--TextColor);

    max-height: 500px;
    max-width: 90vw;

    width: 100%;
    height: 100%;
    object-fit: cover;

    mix-blend-mode: multiply;
    
    position: relative;
    
    scale: 100%;
    
    z-index: 1;

    animation-name: ScalingDown;
    animation-duration: .25s;
}

.Artwork:hover {
    border: solid 1px #ffffff;

    cursor: pointer;
    scale: 105%;

    mix-blend-mode: normal;
    z-index: 2;

    animation-name: ScalingUp;
    animation-duration: 0.05s;
}

.image_container {
    padding: 10px;

    width: 90%;
    height: auto;

    display: flex;
    flex-wrap: wrap;

    column-gap: 10px;
    row-gap: 10px;

    scroll-behavior:unset;
}

.image_box {
    width: fit-content;
    height: auto;
}

a {
    text-decoration: none;
}

hr {
    color: var(--TextColor)
}


h1 {
    font-size: 144px;
    color: var(--Background_Color);

    font-family: Morganite;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 100px;
    margin-right: 0px;
}

.Background {
    width: 100vw;
    height: 500px;

    display: flex;
    align-items: center;

    background-color: var(--TextColor);
}

.Background:hover {
    cursor: pointer;
    background-color: #ffffff;
}