diff --git a/css/styles.css b/css/styles.css index f859dd5..ba7eb2c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -262,15 +262,62 @@ h3 { #description-carousel { display: flex; flex-direction: row; - margin: 10px; background: #222; border-radius: 15px; padding-left: 28px; padding-right: 28px; + margin: 0; + overflow: hidden; + height: fit-content; + position: relative; } -.description-carousel-item { +#description-carousel .description-carousel-item { color: white; + width: 100%; + flex: 0 0 100%; + height: fit-content; + margin-right: 33px; + transition: transform 0.3s ease; +} + +#description-carousel #carousel-left-button { + top: 0; + left: 0; + text-align: left; +} + +#description-carousel #carousel-right-button { + top: 0; + right: 0; + text-align: right; +} + +#description-carousel button { + position: absolute; + height: 100%; + border: none; + background: #0000; + color: white; + width: 30px; + cursor: pointer; +} + +#description-carousel button:hover { + font-size: 16px; +} + +#description-carousel .description-text { + left: 0; + color: #ccc; +} + +#description-carousel .description-game { + left: 0; + font-size: 1em; + font-weight: 400; + padding-bottom: 10px; + border-bottom: 1px solid #ccc; } @keyframes transform { @@ -371,6 +418,7 @@ h3 { width: 100%; display: flex; flex-direction: column; + margin-bottom: 8px; } /* POKEDEX STYLES */ @@ -958,60 +1006,6 @@ h3 { grid-row: 2; } - #description-carousel { - margin: 0; - overflow: hidden; - height: fit-content; - position: relative; - } - - #description-carousel .description-carousel-item { - width: 100%; - flex: 0 0 100%; - height: fit-content; - margin-right: 33px; - transition: transform 0.3s ease; - } - - #description-carousel #carousel-left-button { - top: 0; - left: 0; - text-align: left; - } - - #description-carousel #carousel-right-button { - top: 0; - right: 0; - text-align: right; - } - - #description-carousel button { - position: absolute; - height: 100%; - border: none; - background: #0000; - color: white; - width: 30px; - cursor: pointer; - } - - #description-carousel button:hover { - font-size: 16px; - } - - #description-carousel .description-text { - left: 0; - color: #ccc; - } - - #description-carousel .description-game { - left: 0; - font-size: 1em; - font-weight: 400; - padding-bottom: 10px; - border-bottom: 1px solid #ccc; - } - /* BELOW LANDING STYLES */ #below-landing {