html, body, a {
cursor: url(/Images/Cindy/ladybug-cursor.gif), progress!important;
}
html {
background: url(/Images/Cindy/ladybug-background.jpg);
background-size: 15%;
}
body {
font-family: 'Amiko';
float: none;
margin: 0 auto;
padding-bottom: 20px;
width: 900px;
}
h1 {
color: white;
font-family: 'Arima Madurai';
font-size: 60px;
letter-spacing: -5px;
margin: 0;
text-shadow: 2px 2px 2px black, -2px 2px 2px black, -2px -2px 2px black, 2px -2px 2px black;
text-transform: capitalize;
}
.audioplay-object {
background: black;
border-radius: 100%;
box-shadow: 0 0 3px black;
height: 33px;
margin-bottom: 8px;
margin-top: -20px;
padding: 3px;
width: 33px;
}
.audioplay-object:before, .audioplay-object:after {
color: black;
content: '▲';
filter: drop-shadow(0 0 3px black);
font-size: 20px;
position: absolute;
}
.audioplay-object:before {
margin-left: -28px;
margin-top: -13px;
transform: rotate(-45deg);
}
.audioplay-object:after {
margin-left: 7px;
margin-top: -43px;
transform: rotate(45deg);
}
#top-pic {
border: 3px solid black;
border-radius: 10px;
}
h2 {
background: black;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px black;
color: white;
font-family: 'Arima Madurai';
margin: 0;
width: 400px;
}
#table {
background: black;
border: 3px solid black;
border-radius: 10px;
box-shadow: 0 0 10px black;
height: 250px;
width: 500px;
}
#table a {
box-shadow: 0 0 10px inset black;
color: white;
font-family: 'Arima Madurai';
letter-spacing: 1px;
position: relative;
text-decoration: none;
text-shadow: 1px 1px red, -1px 1px red, -1px -1px red, 1px -1px red;
text-transform: uppercase;
transition: 0.3s;
}
.row1-box1, .row1-box2, .row1-box3, .row2-box3 {
height: 110px;/*they should all be these dimensions, actually*/
overflow: hidden;
}
.row1-box1 a:hover, .row1-box2 a:hover, .row1-box3 a:hover, .row2-box1 a:hover, .row2-box2 a:hover {
filter: brightness(0.6);
-webkit-filter: brightness(0.6);
}
.row1-box1 {
border-radius: 5px 0 0 0;/*idk why this one won't work in the link*/
}
.row1-box1 a {
background: url(/Images/Cindy/ladybug-box-1.jpg) center;
background-size: 100%;
padding: 95px 65px 0px 65px;
top: 47px;
}
.row1-box2 a{
background: url(/Images/Cindy/ladybug-box-2.jpg) top center;
background-size: 140%;
padding: 94px 58px 0px 58px;
top: 47px;
}
.row1-box3 a{
background: url(/Images/Cindy/ladybug-box-3.jpg);
background-size: 100%;
border-radius: 0 5px 0 0;
padding: 94px 46px 0 46px;
top: 47px;
left: -1px;
}
.row2-box1 a {
background: url(/Images/Cindy/ladybug-box-4.jpg) top center;
background-size: 130%;
border-radius: 0 0 0 5px;
padding: 0 50px 90px 50px;
top: -45px;
}
.row2-box2 a {
background: url(Images/Cindy/ladybug-box-5.png);
background-size: 135%;
padding: 0 49px 90px 50px;
top: -45px;
}
.row2-box3 {
background: #ed1b24;
border-radius: 0 0 5px 0;
}
#table p:before {
color: white;
content: 'Hello!';
font-family: 'Arima Madurai';
font-size: 18px;
position: absolute;
margin-left: 40px;
margin-top: -30px;
text-transform: uppercase;
}
#table p {
font-family: 'Amiko';
font-size: 11px;
text-align: center;
}
#content {
background: white;
border: 1px solid black;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 8px black;
width: 400px;
}
#about {
padding: 1px 1px;
}
h3 {
background: black;
color: white;
font-family: 'Arima Madurai';
height: 60px;
letter-spacing: 2px;
line-height: 40px;
left: -1px;
position: relative;
top: -20px;
width: 402px;
}
#about h3:after {
bottom: 0;
color: #ed1b24;
content: 'The gal who coded this page';
font-family: 'Amiko';
font-size: 10px;
font-weight: normal;
left: 100px;
position: absolute;
}
.transbox {
font-size: 12px;
}
.transbox ul {
position: relative;
top: -25px;
left: -10px;
}
.transbox li:before {
content: ' ';
background: url(/Images/Cindy/ladybug-icon.png);
height: 16px;
margin-left: -18px;
position: absolute;
width: 16px;
}
#about p {
font-size: 11px;
padding: 0 30px;
position: relative;
top: -20px;
}
#about p:before, #about p:after {
background: url(/Images/Cindy/quotation-marks.jpg);
background-size: 100%;
content: " ";
height: 25px;
position: absolute;
width: 25px;
}
#about p:before {
margin-left: -25px;
margin-top: -20px;
}
#about p:after {
margin-left: 5px;
transform: rotate(180deg);
}
#video h3 {
height: 40px;
}
#video p {
font-size: 12px;
margin-top: -25px;
}
.vid {
border: 3px solid black;
border-radius: 10px;
box-shadow: 0 0 3px black;
}