I’m working on a webpage that has audio that will be played on click. For the audio player, I just wanted there to be a play button so I removed all the elements using the display: none; feature. I’m happy with the overall look and the audio plays when clicked but I have a few problems. I want to increase the size of the play button but I’m not sure how to do it. I’ve tried playing around with the width and height of multiple elements but that hasn’t worked. There’s also a white semi-circle near the play button which I cannot get rid of. Here’s what it looks like so far 
As you can see there are white semi-circles on the left and right side and the play button is quite small. I’d like to know how to get rid of the circles and increase the size of the button. Here’s my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
<a href="#" class="logo">[My Coily Story]</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</div>
<div class="collage"></div>
<div class="audio">
<audio id="player" controls autoplay>
<source src="1.mp3">
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 501.5px;
width: 755px;
left: 350px;
top: 150px;
border: solid 8px;
border-color: white;
}
.audio {
position: absolute;
top: 140px;
left: 20px;
background-color: black;
height: 50px;
}
audio::-webkit-media-controls-panel {
background-color: black;
width: 200%;
left: 20px;
}
audio::-webkit-media-controls-play-button{
background-color: white;
filter: invert(100%);
left: 260px;
top: 10px;
font-size: 20px;
}
audio::-webkit-media-controls-mute-button{
display: none;
}
audio::-webkit-media-controls-timeline-container{
display: none;
}
audio::-webkit-media-controls-current-time-display{
display: none;
}
audio::-webkit-media-controls-time-remaining-display{
display: none;
}
audio::-webkit-media-controls-timeline{
display: none;
}
audio::-webkit-media-controls-volume-slider-container{
display: none;
}
audio::-webkit-media-controls-volume-slider{
display: none;
}
audio::-webkit-media-controls-seek-back-button{
display: none;
}
audio::-webkit-media-controls-seek-forward-button{
display: none;
}
audio::-webkit-media-controls-fullscreen-button{
display: none;
}
audio::-webkit-media-controls-rewind-button{
display: none;
}
audio::-webkit-media-controls-return-to-realtime-button{
display: none;
}
audio::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
Any help is greatly appreciated.