#projectTitle { font-size: xx-large; } #projectTitleSubtitle { margin-top: auto; margin-bottom: auto; } #projectTitleSubtitle h1 { margin-bottom: 0; } #projectHeader { padding-top: 20px; gap: 20px; display: flex; } #project { display: flex; flex-direction: column; gap: var(--box-gap); width: 100%; } #downloadLink { color: gray; height: fit-content; margin-top: auto; margin-bottom: auto; margin-left: auto; text-align: right; /* text-shadow: 2px 2px black; */ } #downloadButton:hover { cursor: pointer; } #projectHeader img { outline: 2px solid gray; height: 5em; image-rendering: pixelated; } #projectTitleAuthor { display: flex; } #projectAuthor { margin-left: .6em; margin-top: auto; /* margin-bottom: .4em; */ } #projectImageCarrousel { outline: 2px solid gray; padding: 1rem; display: flex; flex-direction: column; width: 50%; } #projectCarrouselImageHolder { height: 100%; gap: 1em; overflow: auto; scroll-margin-left: 10px; overflow-x: scroll; white-space: nowrap; } .projectImage { transition: .4s; height: 95%; max-width: 10em; object-fit: cover; /* filter: grayscale(); */ } /* .projectImage:hover { filter: none; opacity: .8; max-width: 100%; object-fit: unset; } */ #projectImagesAndInfo { display: flex; gap: 2em; height: 12em; } #projectInfo { outline: 2px solid var(--accent-color); background-color: var(--accent-background); flex-grow: 1; padding: 1em; overflow-y: auto; } .projectInfoGitHubReleases.less { overflow: hidden; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical } @media only screen and (max-width: 1280px) { #projectImagesAndInfo { flex-direction: column; flex-grow: unset; } #projectImagesAndInfo { height: unset; } #projectInfo { height: 13em; } #projectImageCarrousel { height: 13em; width: unset; } }