newtab.css

@font-face {
    font-family: "Noto Sans Mono";
    src: url("NotoSansMono-Regular.ttf");
}

* {
    font-family: "Noto Sans Mono", serif;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#apod-wrapper {
    height: 100%;
    padding: 48px;
    box-sizing: border-box;
    position: relative;
    background: no-repeat center center;
    background-size: cover;
}

#apod-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#apod-time-and-title, #info {
    position: absolute;
    z-index: 1;
}

#apod-time-and-title {
    display: flex;
    justify-content: space-between;
    right: 48px;
    left: 48px;
    top: 48px;
}

#apod-time-and-title > * {
    flex: 0 0 auto;
    border-radius: 8px;
}

#title, #time, #info {
    background-color: white;
    padding: 0 16px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#title {
    text-align: end;
}

#time {
    font-size: 6em;
}

#info {
    bottom: 0;
    left: 48px;
    right: 48px;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
}

#info-content {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
}

#info-copyright {
    padding-bottom: 16px;
}

#info-title-container {
    display: flex;
}

#info-title-container img {
    transition: transform 0.5s ease-in-out;
}

#info-title {
    flex-grow: 1;
}

#info:hover #info-title-container img {
    transform: rotate(180deg);
}