body{
    background-color: rgb(161, 38, 255);
    background-image: url('background.jpg');
    background-attachment: fixed;
    background-size: cover;
}

#titlename {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: oblique;
    color: lavender;
}

#mainnav {
    margin-left: 18%;
    margin-right: 18%;
}

#mainnav ul {
    list-style-type: none;
    margin: 0;
    padding: 1%;
    background-color: rgb(242, 219, 255);
    display: flex;
    text-align: center;
    justify-content: center;
    gap: 25%;
    font-size: larger;
    border: rgb(69, 0, 104) solid 5px;
    border-radius: 20px;
}

#mannav ul li{
    padding: 8%;
    margin: 10%;
    text-align: center;
    display: block;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: white
}

#mainnav ul li a:hover{
    background-color: rgb(168, 255, 168);
}

#audiv {
    margin-top: 2%;
    border: 2px black solid;
    float: right;
}

#searchdiv {
    align-content: center;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

#searchbar {
    width: 100%
}

#searchtitle {
    text-align: center;
    color: lavender;
}

#searchsubmit {
    margin-left:45%;
    margin-right:45%;
    padding: 2%;
    width: auto;
    height: auto;
    font-size: larger;
    border: black solid 2px;
    border-radius: 20px;
}

#searchbar {
    font-size: x-large;
    height: 7%;
    outline: 0;
    background: whitesmoke;
    padding: 0 1.6rem;
    border-radius: 10px;
    appearance: none; 
    transition: all var(--dur) var(--bez);
    transition-property: width, border-radius;
    z-index: 1;
    position: relative;
}

#bodynav {
    border: solid black 3px;
    border-radius: 15px;
    background: whitesmoke;
    margin-inline: 5%;
    text-align: center;
    padding-inline: 5%;
}

#searchsubmit:hover {
    background-color:rgb(75, 186, 151);
}

h1 {
    color: lavender;
}

#sourcetable {
    color: lavender;
    width: 30%;
    float: right;
    display: inline;
}

#watchedbutton {
    float: left;
    display: inline-start;
    justify-self: center;
    width: auto;
    height: auto;
    font-size: larger;
    border: black solid 2px;
    border-radius: 20px;
}

#watchedbutton:hover {
    background-color: rgb(75, 186, 151);
}

#my-video {
    margin-left: 15%;
    margin-right: 25%;
    align-self: center;
}