neocities tutorial #4 css

// delete this line <meta name="viewport" content="width=device-width, initial-scale=1.0">
// important for correct mobile viewing

// font
@font-face {
  font-family: MS San Serif;
  src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/MS%20Sans%20Serif.ttf);
  }

// body code (just copy and paste this directly)
// prevents infinite scroll
body
  {
    overflow-y: hidden;
  }

// optional - copy and paste this directly
// for colors of "linked" text
a {
  color: inherit !important;
  text-decoration: none !important;
}

// container
// invisible - for positioning purposes
margin: auto;
    width: 600px;
    height: 600px;
    position: relative;
    top: 60px;

// main (what all content goes into)
margin: auto;
    padding: 25px;
    border-radius: 0px 0px 5px 5px;
    background: #E8E8D8;
    border-left: 3px solid #094ED5;
    border-right: 3px solid #094ED5;
    border-bottom: 3px solid #094ED5;
    width: 544px;
    height: 485px;
    font-family: MS San Serif;
    font-size: 1.25em;

// top (Display picture container)
border-left: 1px solid #094ED5;
    border-right: 1px solid #094ED5;
    border-top: 1px solid #094ED5;
    background: #E8E8D8;
    padding: 5px;
    margin-top: 25px;
    height: 15px;
    width: 250px;
    font-family: MS San Serif;

// bottom (where the menu is)
border-left: 1px solid #094ED5;
    border-right: 1px solid #094ED5;
    border-bottom: 1px solid #094ED5;
    background: white;
    height: 350px;
    width: 260px;
    font-family: MS San Serif;
    overflow-y: scroll;

// images
width: 75px;
    display: inline-block;
    vertical-align: top;

// text
font-family: MS San Serif;
    line-height: 5em;
    padding-left: 5px;
    display: inline-block;
    vertical-align: top;
    margin-left: -2.5px;

// highlight (mark to make individual hover possible)
font-family: MS San Serif;
    line-height: 5em;
    display: inline-block;
    vertical-align: top;
    margin-left: -5px;
    text-indent: 5px;

// just copy and paste this directly (line height and width may need to be adjusted)
  highlight:hover
  {
  background-color: blue;
  color: white;
  line-height: 5em;
  width: 167.75px;
  }

// next
// container positioning for browse, remove buttons and preview text
position: relative;
    left: 300px;
    top: -378px;

// lyrics
// positioning and animation for scrollboxes with info text (or in my case, lyrics)
position: relative;
    left: 300px;
    top: -370px;
	-webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

// just copy and paste this directly, code to ensure proper hover scrollbox behavior
figure.blurfilter{
margin: 0;
padding: 0;
display: inline-block;
position: relative;
border: 3px inset #E8E8D8;
overflow: hidden; /
}

.figcaption img {
width: 10px;
}

figure.blurfilter img{
display: block;
width: 15em;
height: auto;
transition: all 0.4s 0.4s;
}

figure.blurfilter figcaption{
position: absolute;
display: block;
text-align: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
background: white;
padding: 10px;
z-index: 100;
width: 90%;
height: 90%;
overflow: auto;
top: 5%;
left: 5%;
font-family: MS San Serif;
font-size: 15px;
opacity: 0;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
transition: all .4s;
}

figure.blurfilter figcaption h3{
border-bottom: 1px solid red;
text-align: left;
width: 90%;
margin: 0;
}

figure.blurfilter figcaption p{
text-align: left;
margin-top: 10px;
line-height: 1.5;
}

figure.blurfilter figcaption a{
text-decoration: none;
}

figure.blurfilter:hover img{
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform: scale(1.3);
transform: scale(1.3);
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}

figure.blurfilter:hover figcaption{
opacity: 1;
-moz-transition: all .4s .4s;
-webkit-transition: all .4s .4s;
transition: all .4s .4s;
}

figure.slidey figcaption{
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}

figure.slidey:hover figcaption{
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
figcaption {
overflow-y: scroll;
}

// link (positioning and style for Download more pictures text)
position: relative;
    left: 300px;
    top: -100px;
    color: #0000FF;
    text-decoration: underline;

// copy and paste this directly - optional hover behavior
.link:hover {
  color: white;
  }

// buttons (positioning for 3 buttons on the bottom)
position: relative;
    top: -310px;