@import "reset.css";

#audiobox {
    display:flex;
}
.audioitem {
    width:33vw
}
.audiotitle {
    text-align:center;
    font-size:30pt;
    margin:10px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    transition:transform 1s;
}
.audiotitle:hover {
    transform:scale(1.1);
}
.audioitem > audio {
    margin:10px;
    margin: 0 auto; 
    display: block;
    margin-top:30px;
    margin-bottom:30px;
}
#videobox {
    display:flex;
}
.viditem {
    width:50vw;
    padding:20px;
}
#videoitem1 {
    border-right:solid;
}
.vidtitle {
    font-size:30pt;
    text-align:center;
    padding:10px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color:pink;
    color:rgb(199,53,160);
    transition: transform 1s;
    border-radius:10px;
}
.vidtitle:hover {
    transform:scale(1.05);
}
.viddesc {
    font-size:20pt;
    text-align:center;
    font-family:"itim";
}
.video {
    text-align:center;
    margin:30px;
}
#title {
    text-align:center;
    font-size:50pt;
    padding:15px;
    background-color:pink;
    color:rgb(199,53,160);
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    transition:transform 1s;
}
#title:hover {
    transform:scale(1.1);
}
#desc {
    font-size:20pt;
    text-align:center;
    padding:30px;
    margin:20px;
    padding-top:10px;
    border-bottom:solid;
    font-family:"itim";
}
#foot {
    text-align:center;
    font-size:14pt;
    padding:15px;
    background-color:pink;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color:rgb(199,53,160);
}
body {
    background-image:url(media/pinkbg.jpg);
    background-size:40vw;
}
audio {
    background-color:pink;
    padding:10px;
    border-radius:15px;
    transition:background-color 1s;
}
audio:hover {
    background-color:rgb(199,53,160);
}