#backgroundcolor {
background-color: pink;
}
h1 {
font-family: "Comic Sans MS";
text-align: center;
}
.container {
width: 50vw;
padding: 20px;
background-color: #ffccff;
border: 2px solid black;
margin: 0 auto;
}
.random {
width: 100px;
margin: 50px auto;
}
.randomShape {
background-color: #ffe6ff;
display: block;
width:120px;
height:60px;
text-align: center;
color: #660066;
text-decoration: none;
font-family: "Comic Sans MS";
font-size: 27px;
line-height: 60px;
border-style: solid;
border-color: #660066;
border-width: 3px;
}
.randomShape:hover{
background-color:#ff99ff;
}
.back {
position: absolute;
top: 300px;
left: 50px;
}
.backShape {
display: block;
width: 100px;
height: 100px;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
background-color: #ffe6ff;
font-family: "Comic Sans MS";
line-height: 100px;
text-align: center;
text-decoration: none;
}
.backShape:hover {
background-color:#ff99ff;
color: #800080;
border-color: #006600;
}
.next {
position: absolute;
top: 300px;
right: 50px;
}
.nextShape {
display: block;
width: 100px;
height: 100px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
background-color: #ffe6ff;
font-family: "Comic Sans MS";
line-height: 100px;
text-align: center;
text-decoration: none;
}
.nextShape:hover {
background-color:#ff99ff;
color: #800080;
border-color: #006600;
}
.cat {
position: relative;
top: 100;
}
div#lH {
position: absolute;
width: 30px;
height: 30px;
overflow: hidden;
z-index: 1;
font-size: 25px;
text-align: center;
}
audio#aH {
position: absolute;
top: -5px;
left: -5px;
z-index: 2;
opacity: 0.01;
}
/*#box {*/
/* position: relative;*/
/* text-align: center;*/
/* display: block;*/
/*}*/
/*.vid {*/
/* position: relative;*/
/* text-align: center;*/
/* top: -820px;*/
/*}*/
/*.next {*/
/* margin-top: -900px;*/
/*margin-left: 1550px;*/
/* position: relative;*/
/* float: right;*/
/* background-color: #ffe6ff;*/
/* color: #006600;*/
/* border-color: #006600;*/
/*}*/
/*.nextShape {*/
/* background-color: #ffe6ff;*/
/* border-style: solid;*/
/* border-color: #660066;*/
/* border-width: 3px;*/
/* text-decoration: none;*/
/* color: #660066;*/
/* padding: 100px 100px;*/
/* border-radius: 0 0 10px 0;*/
/* box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);*/
/*}*/
/*.nextShape:hover {*/
/* background-color: #33cc33;*/
/* color: #006600;*/
/* border-color: #006600;*/
/*}*/
/*.back {*/
/* top: 0px;*/
/* position: relative;*/
/* float: left;*/
/*left: 100px;*/
/*}*/
/*.back:hover {*/
/* background-color: #33cc33;*/
/* color: #006600;*/
/* border-color: #006600;*/
/*}*/
/*.backShape {*/
/* background-color: #ffe6ff;*/
/* border-style: solid;*/
/* border-color: #660066;*/
/* border-width: 3px;*/
/* text-decoration: none;*/
/* color: #660066;*/
/* padding: 100px 100px;*/
/* clip-path: polygon(0 50%, 100% 0, 100% 100%);*/
/* border-radius: 0 0 10px 0;*/
/* box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);*/
/*}*/
/*.backShape:hover {*/
/* background-color: #33cc33;*/
/* color: #006600;*/
/* border-color: #006600;*/
/*}*/