ArtPage.css

.artpage {
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-rows: 1fr 20fr;
    height: 100vh;
    grid-template-areas:
        "favorite exhibition setings"
        "left exhibition right";
}

@viewport {
  width: 100vw;
}


.exhibition-piece {
    display: flex;
    grid-area: exhibition;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.exhibition-piece-title {
    grid-area: exhibitiontitle;
    text-align: center;
    font-size: 4vh;
}

.author{
    font-size: 2.5vh;
}

.poem {
    font-size: 2.7vh;
}

svg{
    border: 0.1vw solid black;
}

.svg-artwork {
    margin-top: 5vh;
    width: 20%;
}

.dropdown {
    grid-area: setings;
    display: flex;
    flex-direction: row-reverse;
    margin-right: 2vh;
    margin-top: 2vw;
}

/* .settings-icon {
    margin-right: 2vh;
    margin-top: 2vw;
} */

.favorite-button {
    grid-area: favorite;
    margin-left: 2vh;
    margin-top: 2vw;
}

.background-one {
    background-color: rgb(175, 213, 170);
    background-size: 100% 100%;
}

.background-two {
    background-color: rgb(108, 178, 209);
    background-size: 100% 100%;
}

.background-three {
    background-color: rgb(254, 200, 216);
    background-size: 100% 100%;
}

.background-four {
    background-color: rgb(255, 223, 211);
    background-size: 100vh;
}

.font-arial {
    font-family: Arial, serif;
}

.font-calibri {
    font-family: Calibri, serif;
}

.font-sans {
    font-family: "Comic Sans MS", serif;
}

@media (orientation: portrait) {
    .artpage{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows:  1fr 20fr 1fr; 
        grid-template-areas:
            "favorite exhibitiontitle exhibitiontitle setings"
            "exhibition exhibition exhibition exhibition"
            "left . . right";
    }

    .exhibition-piece {
        font-size: 1.9vh;
        text-align: center;
    }
    .exhibition-piece-title {
        grid-area: exhibitiontitle;
        text-align: center;
        font-size: 2vh;
    }

    .svg-artwork {
        margin-top: 2%;
        width: 20vh;
    }

    .favorite-button {
        grid-area: favorite;
        place-self: center;
        height: 10vh;
        width: 10vh;
    }

    .dropdown-toggle {
        margin: 1vh ;
        font-size: 2vh;
    }

}