body{
    background-image: url('https://files.catbox.moe/9u6vwo.gif');
    background-repeat:no-repeat;
    background-size: cover;
    font-family: jua;
    font-size: 1.4vw;
    margin-top: 3%;
    margin-bottom: 3%;
    color: #800000;
}

@font-face {
font-family: jua; 
src: url(https://dl.dropbox.com/s/bnjlkqqg1fm4otb/Jua.ttf);
}

.container{
    display: flex;
    flex: nowrap;
    width: 50%;
    height: 400px;
    border: 3px solid #800000;
    border-radius: 20px;
    z-index: 1;
    margin: auto;
    background-image: linear-gradient(to right, pink 25%, white 26%, white 24%);
    margin-top: 1%;
    padding: 1px;
    box-shadow: 0 4px 10px 0 rgb(255, 255, 255), 0 6px 20px 0 rgb(255, 255, 255);
}

.left{
    position: relative;
    width: 150px;
    height: 100%;
    overflow: auto;
  border-radius: 20px;
    scrollbar-width: none; 
    -ms-overflow-style: none;
  text-align: center;
}

.right{
    position: relative;
    left: 11px;
    width: 410px;
    height: 97.5%;
    overflow: auto;
  border-radius: 0px;
    scrollbar-width: none; 
    -ms-overflow-style: none;
    padding: 5px;
}

[id] {
	display: none;
}
[id]:target {
  display:contents;
}

.button:hover {
	background:linear-gradient(to bottom, #fff2f4 5%, #ffffff 100%);
	background-color:#fff2f4;
  transform: scale(1.05);
}

.button:active {
	position:relative;
	top:1px;
}

.button {
  transition: transform 0.4s ease;
  background:linear-gradient(to bottom, #ffffff 5%, #fff2f4 100%);
	background-color:#ffffff;
	border-radius:21px;
	border:1.5px solid #F8506C;
	display:inline-block;
	cursor:pointer;
	color:#800000;
	font-family:jua;
	font-size:11px;
	font-weight:bold;
	padding:8px 25px;
	text-decoration:none;
  max-width:120px;
}