font-family: 'Nunito Sans', sans-serif;

:root {
    --accent-one:#FFB7C3; /* accent cherry blossom pink */
    --accent-two:#CCB4B8; /* accent light brown */
    --accent-text:#996870; /* accent text tawny brown */
    --bg-color:#FFF; /* background just white */
    --box:#FCF0F0; /* box bg sideways pink */
    --text:#291711; /* text licorice */
}

/* extras */

@-webkit-keyframes fadein {from {opacity:0;} to {opacity:1;}}
@keyframes fadein {from {opacity:0;} to {opacity:1;}}

/* --- scrollbar --- */
 
::-webkit-scrollbar {
    width:10px; 
    height:10px;
}
 
::-webkit-scrollbar-thumb {
    background:var(--accent-one);
    border:4px solid var(--bg-color);
    border-width:0 4px;
}

::-webkit-scrollbar-track-piece {
    background:var(--box);
    border:4px solid var(--bg-color);
    border-width:0 4px;
}

/* --- text selection --- */

::selection {
    background:var(--accent-two);
    color:var(--accent-text);
}

::-webkit-selection {
    background:var(--accent-two);
    color:var(--accent-text);
}

::-moz-selection {
    background:var(--accent-two);
    color:var(--accent-text);
}
 
/* --- tooltips --- */

#s-m-t-tooltip {
    background:#151515; /* tooltips background */
    color:#dcdcdc; /* tooltips text */
    max-width:250px;
    z-index:21474836479;
    margin:5px 20px;
    padding:7px 10px;
    border-radius:0px;
    letter-spacing:1px;
    font:normal 10px/200% 'B612', sans-serif;
    text-transform:uppercase;
}

/* ------ basic styles ------ */
 
body {
    word-wrap:break-word;
    overflow:auto;
    overflow-x:hidden;
    margin:0px;
    letter-spacing:0px;
    color:var(--text);
    background: linear-gradient(-45deg, #FFAC82, #FFB7C3, #FFC7AA, #FF8DA0, #FF8DA0);
  	background-size: 400% 400%;
  	animation: gradient 15s ease infinite;
  	height: 100vh;
    font: 12px/200% 'Nunito Sans', sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

img {border:none;}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.container {
  width: 70%;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: auto;
  height: 50vh;
  }
  
.header {
    width: 70%;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 10px;
    height: 10vh;
}
  
.left-buttons {
  margin: 10px;
  width: 10%;
  display: flex;
  float: left;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 50vh;
}

.left-buttons button {
  margin: auto;
  border: none; 
  border-radius: 15px;
  color: #FFB7C3;
  font-family: Nunito Sans, sans-serif;
  font-weight:900;
  font-size:20px;
  line-height: 200%;
  padding: 10px 24px; 
  cursor: pointer; 
  width: 100%; 
  display: block; /* Make the buttons appear below each other */
  margin-bottom: 20px; /* space between buttons */
  background: #FFF;

}

.left-buttons button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* button link styling */
.left-buttons button a {
  color: #FFB7C3;
  font-family: Nunito Sans, sans-serif;
  font-weight:900;
  font-size:20px;
  line-height: 200%;
  text-decoration: none;
}

.left-buttons button:hover {
  background-color: #FFF;
  color: #FFB7C3;
}

.left-buttons button a:hover {
  background-color: #FFF;
  color: #FFB7C3;
}

.main {
  float: left;
  width: 60%;
  height: 50vh;
  margin: 10px; 
  border: none; 
  border-radius: 15px;
  color: #FFB7C3;
  font-family: Nunito Sans, sans-serif;
  font-weight:700;
  font-size:12px;
  line-height: 150%;
  background: #FFF;
}

.rightcolumn {
  float: left;
  width: 20%;
  height: 50vh;
  margin: 10px; 
  border: none; 
  border-radius: 15px;
  color: #FFB7C3;
  font-family: Nunito Sans, sans-serif;
  font-weight:700;
  font-size:12px;
  line-height: 150%;
   background: #FFF;

}