@font-face {
    src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
    font-family: hearts; /* subscript font */
    }

      
@font-face {
    font-family:'Lovely Valentine';
    src: url(https://dl.dropbox.com/s/yumbhl34nyi38yf/Lovely%20Valentine.otf);
    }

    

body{
    background-image: url(/love/bg2.jpg);
    background-repeat: repeat;
    background-size: 9%;
    background-attachment: fixed;
    position: relative;

}

#main{
    margin: auto;
    width:700px;
    padding:10px;
    height:auto;

    }

    #main2{
        border-width:10px;
        border-style:solid;
        border-image: url("/love/border.gif") 7 fill round;
        padding:25px 20px;   
        text-align: center; 
    }
    
#home{
    top: 20px;
    left: 30px;
    background-color: #ffb0d4; 
    box-shadow:0 0 7px 5px #ffb0d4;
    padding:10px;
    position: fixed;
}

#home a{
    color:white;
    background: none;
    -webkit-text-fill-color: white;  
    text-shadow:
    2px 2px 0 #fc95c3,
    -2px 2px 0 #fc95c3,
    -2px -2px 0 #fc95c3,
    2px -2px 0 #fc95c3;

}
    
  #cont {
    display: grid;
    grid-template-columns: 35% 65%;
    grid-gap: 10px; 
    margin-bottom:10px;
    } 
    
    #column {
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
      padding:0px;
      text-align:center;
    }
    
    #column img{
     max-width:100%;
    height:auto; 
    margin-bottom:-4px;
    }  

    
#header{
    font-family:'Lovely Valentine';
    font-size:65px;
    font-weight:900;
    text-align:right;
    color:white;
    text-shadow:
    2px 2px 0 #ffb0d4,
    -2px 2px 0 #ffb0d4,
    -2px -2px 0 #ffb0d4,
    2px -2px 0 #ffb0d4;
}

.heady{
    width:600px;
    position: relative;
    animation-name: floating;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      z-index:2;
}

#subheader{
    color:white;
    text-shadow:
    2px 2px 0 #ffb0d4,
    -2px 2px 0 #ffb0d4,
    -2px -2px 0 #ffb0d4,
    2px -2px 0 #ffb0d4;
    font-family: 'hearts';
    text-align:right;
    font-size:35px;
    margin-top:-10px;
}

#polaroid{
    transform: rotate(-5deg);
}

#countdown{
    margin-top:-35px;
    font-size:10px;
    margin-left:-110px;
}

#days{
    margin-top:-25px;
    margin-left:40px;
    font-size:25px;
    font-family:hearts;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 50px); }
    100%   { transform: translate(0, -0px); }    
}



#imgfloat{
float: left;
    margin-top:-130px;
    margin-left:-100px;
    height:50px;
    z-index:10;
    position: absolute;
}

#imgfloat img{
    width:200px;
}

#box{
    margin-top:10px;
    border-width:10px;
        border-style:solid;
        border-image: url("/love/border.gif") 7 fill round;
}

#silly{
    background-color: white;
    border:1px solid black;
    padding:10px;
}

button{
    background-color: #ffb0d4;
    border:1px solid black;
    font-family: basiic;
    font-size:25px;
    margin-top:10px;
    color:white;
    transition-duration:0.4s;
    -moz-transition-duration:0.4s;
    -webkit-transition-duration:0.4s;
    -o-transition-duration:0.4s;
    padding:5px;
}

button:hover{
    background-color: #fc95c3;
    cursor: pointer;
    transition-duration:0.4s;
    -moz-transition-duration:0.4s;
    -webkit-transition-duration:0.4s;
    -o-transition-duration:0.4s;
   

}

#floatie{
    position:relative;
    font-family: hearts;
    width:100px;
    float:right;
    margin-right:-90px;
    margin-top:-120px;
    transform: rotate(15deg);
}

#floatie p{
    border:1px solid black;
    background-color: white;
    font-size:20px;

}

#blink{
    animation-name: blink;
    animation-duration: 2s;
    animation-iteration-count: infinite; 
    font-size:50px;
}

@keyframes blink {
    0%   {color:#fa91c0;}
    50%  {color:transparent;}
    100% {color:#fa91c0;}
  }
  
  #rolling{
    left:237px;
  }

  #uz{
    font-size:35px;
    margin-bottom:-27px;
    text-shadow:
    2px 2px 0 #ffb0d4,
    -2px 2px 0 #ffb0d4,
    -2px -2px 0 #ffb0d4,
    2px -2px 0 #ffb0d4;
    color:white;
    text-align:center;
  }

  #s-m-t-tooltip{
	/* basic */
	max-width: 300px;
	z-index: 10;
	margin: 24px 14px 7px 12px;
	/* style and design */
	padding:5px;
    background: #ffb0d4;
    border: none;
    font-family:hearts;
    font-size:20px;
	color: white;
    box-shadow:0 0 7px 5px #ffb0d4;
    
}


    
    #s-m-t-tooltip::before{
      background: none;
    }

.horizontal{
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    padding: .5em;
    box-sizing: border-box;
    height: 150px;
    overflow-y: hidden;
    }  
    
    #box.horizontal img{
    height:100%;
    width:auto;
    border:1px solid black;
}
.px{
    padding:10px;
}
    .px p{
        border: 1px solid black;
        background-color: white;
        padding:5px;
    }

    #drawing{
        width: 300px;
        height: auto;
        position: absolute;
        right: 30px;
        bottom:10px;
    }