diff --git a/src/App.css b/src/App.css index 5626767..b9a8efd 100644 --- a/src/App.css +++ b/src/App.css @@ -149,8 +149,9 @@ h2 { cursor: pointer; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151); position: absolute; - top: 950px; - left: 210px; + bottom: 10px; + right: 10px; + z-index: 2; } .faq-button svg { height: 1.5em; @@ -247,6 +248,11 @@ h2 { content: attr("Sidebar"); } */ +.sidebar { + position: relative; + z-index: 0; +} + .sidebar-button { width: 50px; height: 50px; @@ -322,9 +328,10 @@ h2 { margin: 0; padding: 0; display: flex; + position: relative; flex-direction: column; justify-content: center; - z-index: 0; + z-index: 1; } .sidebar-list .row { @@ -1871,7 +1878,7 @@ redudant. Not putting under calendar chart styles for obvious reasons. */ .carousel { position: relative; width: 100%; - height: 100%; + height: 100%; overflow: hidden; } @@ -1882,16 +1889,16 @@ redudant. Not putting under calendar chart styles for obvious reasons. */ width: 100%; height: 100%; display: none; - transition: opacity 0.5s; + transition: opacity 0.5s; } .carousel-slide.active { display: grid; opacity: 1; - align-items: center; + align-items: center; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 2fr; - grid-template-areas: + grid-template-areas: 'img-top title' 'img-bot content'; } @@ -1961,7 +1968,7 @@ redudant. Not putting under calendar chart styles for obvious reasons. */ transform: translateX(-50%); display: flex; justify-content: center; - z-index: 1; + z-index: 1; } .carousel-indicators button { @@ -1969,9 +1976,9 @@ redudant. Not putting under calendar chart styles for obvious reasons. */ border: none; background-color: #fff; cursor: pointer; - font-size: 24px; + font-size: 24px; padding: 5px; - border-radius: 50%; + border-radius: 50%; } .carousel-indicators button.active { @@ -1987,11 +1994,11 @@ redudant. Not putting under calendar chart styles for obvious reasons. */ border-radius: 12px; border: none; cursor: pointer; - font-size: 36px; + font-size: 36px; padding: 10px; padding-bottom: 15px; z-index: 1; - + } .carousel-prev { @@ -2004,9 +2011,9 @@ redudant. Not putting under calendar chart styles for obvious reasons. */ .carousel-prev:hover, .carousel-next:hover { background-color: #ccc; - filter: brightness(120%); + filter: brightness(120%); } .carousel-prev:active, .carousel-next:active { - background-color: #aaa; + background-color: #aaa; } \ No newline at end of file