body {
background: url(https://files.catbox.moe/a2c4n5.gif);
}
a {
color: #a88;
font-weight: bold;
font-size: 14px;
}
a:hover {
font-style: italic;
}
strong {
font-size: 15px;
}
.wrapper {
width: 730px;
height: 400px;
background: transparent;
padding: 10px;
margin: 150px auto 10px;
border: 3px dashed #dcb;
border-radius: 30px;
}
.row {
width: 100%;
height: 100%;
background: #FFFAF5;
border: 3px solid #dcb;
border-radius: 20px;
padding: 10px;
}
.row:after {
content: "";
clear: both;
}
.column {
float: left;
}
.left {
width: 35%;
height: 100%;
background: #F2EEE6;
margin-right: 20px;
padding: 0 8px 8px 8px;
border-radius: 10px;
}
.left #search {
font-family: 'snoot';
font-size: 16px;
color: #a88;
letter-spacing: 1px;
background: #fff;
height: 22px;
padding: 3px 0 0 10px;
margin-top: 8px;
border-top: 2px solid #dcc;
border-left: 2px solid #dcc;
border-bottom: 2px solid white;
border-right: 2px solid white;
border-radius: 5px;
}
.left p {
font-family: 'snoot'; 
color: #a88;
line-height: 0.8;
}
ul {
background: transparent;
font-family: 'snoot'; 
list-style-type: none;
margin-bottom: -15px;
padding: 0;
position: relative;
top: -15px;
left: 26px;
}
ul li {
display: inline-block;
width: 60px;
height: 21px;
text-align: center;
margin-right: 10px;
background: linear-gradient(180deg, #F2EEE6 50%, #fff 100%);
border: 2px solid #EBE5DE;
border-bottom: none;
border-radius: 10px 10px 0 0;
}
ul li a {
font-size: 15px;
text-decoration: none;
}
.right {
width: 62%;
height: 87%;
background: #F2EEE6;
border-radius: 10px;
}
#ul2 {
margin-top: 21px;
}
#ul2 li {
background: linear-gradient(180deg, #fff 20%, #F2EEE6 50%);
border-top: none;
border-bottom: 1px solid #EBE5DE;
border-radius: 0 0 10px 10px;
}