@use postcss-cssnext;
@use postcss-simple-vars;
@use postcss-nested;

.cookieElement {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: transform .3s;
}

.cookieElement.is-visible {
  transform: translateY(0%);
}








/* Code from here is not needed */

@import 'https://fonts.googleapis.com/css?family=Droid+Sans:400,700';

:root {
  --darkGray: #37485E;
  --white: #f9f9f9;
  --red: #db4d56;
  --darkGreen: color(var(--green) blackness(20%))
}

body {
  font-family: 'Droid Sans', sans-serif;
  background-color: var(--white);
  color: var(--darkGray);
}

.info {
  margin-top: 30%;
  margin-left: 50px;
  max-width: 500px;
  
  h1 {
    font-size: 50px;
    margin-bottom: 0;
    font-weight: 700;
  }
}

.cookieElement {
	display: flex;
	background-color: var(--darkGray);
	align-items: center;
	justify-content: space-around;
	padding: 10px 20px 10px 20px;
	color: var(--white);
	a { white-space: nowrap;
    color: var(--red);
    
      &:hover {
        color: var(--darkGreen);
    }
  }
}

.setCookieBtn {
	cursor: pointer;
	-webkit-appearance: none;
	border: 1px solid #EA2E49;
	color: #FF0000;
	font-size: 14px;
	background-color: transparent;
	height: 28px;
	margin-left: 10px;
	outline: 0;}
.setCookieBtn:hover {
	color: #00FF00;
	border-color: #008000;
};
}