want to use css to make a toast,border-radius that can automatically wrap lines according to the number of words is always half the height. Here is the code I wrote. Toast has become an oval. Help me see what the problem is
.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body{
position: relative;
}
-sharptoast{
position:fixed;
left: 50vw;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom:10vw;
width: max-content;
max-width:80vw;
line-height:10vw;
font-size:20px;
color:-sharpfff;
background: rgba(0,0,0,.8);
border-radius:50%;
padding:5vw;
margin:0 auto;
z-index:9999;
}
</style>
</head>
<body>
<div id="toast">toast</div>
</body>
</html>