@charset "UTF-8";

@import url(https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro);
:root{ --primary-background: #201b1f; --secondary-color: #201b1f;
--theme-text-clr: #ffffff;
--font: 'Neue Haas Grotesk Display Pro', Arial, system-ui, --apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
} .box {
background-color: var(--primary-background);
height: 60px;
width: 100%;
position: fixed;
bottom: 0;
z-index: 4;
text-align: center;
margin: 0;
padding: 0;
display: flex;
align-items: center;
box-shadow: 0px -5px 3px color-mix(in srgb, var(--theme-text-clr) 20%, transparent);
}
.transform {
-webkit-transition: all 1s ease;  
-moz-transition: all 1s ease;  
-o-transition: all 1s ease;  
-ms-transition: all 1s ease;  
transition: all 1s ease;
}
.transform-active {
background-color: #fff;
height: 300px;
width: 100%;
}
#button {
-webkit-appearance: none;
display:block;
text-decoration: none;
position: absolute;
color: var(--theme-text-clr);
font-family: arial;
font-weight: bolder;
background-image: none;
background-color: transparent;
width: 100%;
height: auto;
margin: 0.5em 0 0 0;
padding: 0;
border: 0;
font-size: 1.5em;
border-bottom-color: black;
z-index: 4;
cursor: pointer;
}
#button:hover {
color: #939393;
transition: 1s;
}