/* Variables */

:root {
   
   /* Container */
   --bg: #222222;
   --title: #ffffff;
   --text: #ffffff;
   
   /* Deny Button */
   --deny-text: #ffffff75;
   --deny-text-hover: #ffffff;
   
   /* Accept Button */
   --accept-bg: #202020;
   --accept-bg-hover: #313131;
   --accept-text: #ffffff;
}

/* Container */

.cookies-container {
   left: 0;
   bottom: 0;
   width: 100%;
   display: flex;
   z-index: 20000;
   position: fixed;
   align-items: center;
   padding: 1.4rem 2.4rem;
   justify-content: space-between;
   background-color: var(--bg);
}

.cookies-container > div:first-of-type {
   width: 70% !important;
}

@media (max-width: 768px) {
   .cookies-container {
      flex-direction: column !important;
      align-items: flex-start !important;
   }
   .cookies-container > div:first-of-type {
      width: 100% !important;
   }
}

.cookies-container.hidden {
   display: none;
}

/* Text */

.cookies-container span {
   display: block;
   font-weight: 700;
   font-size: 1.6rem;
   color: var(--title);
   margin-bottom: .6rem;
}

.cookies-container p {
   color: var(--text);
   margin-bottom: 0;
}

.cookies-container p > a {
   color: var(--text);
   text-decoration: underline;
}

.cookies-container p > a:hover {
   text-decoration: none;
}

/* Buttons Row */

.cookies-buttons {
   display: flex;
   align-items: center;
}

@media (max-width: 768px) {
   .cookies-buttons {
      margin-left: 0;
      margin-top: 1.5rem;
   }
}

/* Deny Button */

.cookies-buttons > .deny {
   border: none;
   padding: .8rem 1.2rem;
}

.cookies-buttons > .deny:hover {
   color: var(--deny-text-hover);
}

/* Accept Button */

.cookies-buttons > .accept {
   border: none;
   margin-left: 1.8rem;
   border-radius: .4rem;
   padding: .8rem 1.2rem;
   color: var(--accept-text);
   background-color: var(--accept-bg);
}

.cookies-buttons > .accept:hover {
   background-color: var(--accept-bg-hover);
}