@font-face {
    font-family: BiggerDisplay;
    src: url(HelveticaNeueCondensedBlack.ttf);
}

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

@font-face {
    font-family: SmallerDisplay;
    src: url(HelveticaNeue-Medium.otf);
}

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

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

html, body {
    --Background_Color: #aa0011;
    --TextColor: #111111;
    background-color: var(--Background_Color);

    margin: 0%;
    margin-left: 1%;
}

.Artwork {
    mix-blend-mode: multiply;
    color: var(Background_Color);
    
    position: relative;
    
    scale: 100%;

    width: auto;
    height: 20vw;
    
    z-index: 1;

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

.Artwork:hover {
    position: relative;
  
    cursor: pointer;

    scale: 105%;

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

    animation-name: ScalingUp;
    animation-duration: .2s;
}

.ImageContainer {
    width: 100%;
    height: auto;

    display: flex;
    flex-wrap: wrap;

    column-gap: 0.5vw;
    row-gap: 0.5vw;

    margin-left: 0.5vw;
}

.sidebar {
    position:fixed;
    top: 0px;
    left: 0px;

    width: 2%;
    height: 100%;

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

.title {
    font-size: 15vw;
    color: var(--TextColor);

    font-family: Morganite;

    margin: 0%;
    margin-top: -2vw;
    margin-left: 5px;
}

.subtitle {
    font-size: 50px;
    color: var(--TextColor);

    font-family: Morganite;

    margin: 0%;
    margin-left: 5px;
}

p {
    font-size: 36;
    color: var(--TextColor);

    font-family: Morganite;

    margin: 0%;
    margin-left: 5px;
}

hr {
    color: var(--TextColor)
}