diff --git a/index.html b/index.html index d03cafe0..2e2a1699 100644 --- a/index.html +++ b/index.html @@ -189,6 +189,88 @@ pointer-events: none; z-index: 9999; } + + /* cookie-consent */ + #cookie-consent { + position: fixed; + bottom: 10px; + left: 70px; + background-color: #e3e4fc; + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 300px; + height: fit-content; + z-index: 10000; + border-radius: 10px; + margin-bottom: 5px; + margin: 20px; + border-right: 4px solid transparent; + border-bottom: 4px solid transparent; + transition: border-color 0.3s; + border: 1px solid rgb(4, 4, 215); + border-bottom: #3950ac; +} + +#cookie-consent:hover { + border-right:6px solid #0207a3; + border-bottom:6px solid #3202a3; +} + +#cookie-consent p { + color: black; /* Make the text black for better visibility */ + text-align: center; /* Center align the text */ +} + +.accept-cookies, +.reject-cookies { + width: 260px; /* Decrease the button width */ + height: 35px; /* Decrease the button height */ + color: white; + background-color: #150267; + border: none; + border-radius: 5px; /* Add rounded corners */ + cursor: pointer; + transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s; /* Smooth transition for effects */ +} + +.reject-cookies { + margin-top: 10px; +} + +.accept-cookies:hover, +.reject-cookies:hover { + transform: scale(0.95); + box-shadow: 0 0 15px rgb(75, 215, 239,0.6); /* Reduce the shadow size */ +} + +.accept-cookies:hover { + background-color: rgb(57, 159, 222); + color: #0d0b0b; + border: 1px solid rgb(2, 2, 53); +} + +.reject-cookies:hover { + background-color: rgb(57, 159, 222); + color: #0d0b0b; + border: 1px solid rgb(2, 2, 53); +} + +#learn-more-link, +#show-less-link { + color: #f90814; + text-decoration: none; + cursor: pointer; + font-size: 16px; +} + +#cookie-content { + display: none; + margin-top: 10px; +} + @media (max-width: 725px) { .circle-container{ @@ -287,6 +369,90 @@