.hr-double {
	margin: 20px 0;
	padding: 0;
	height: 1px;
	border: none;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}
A {
   text-decoration:none
  }
#instruction {

    font-size: 1.15em;

    color: #df0000;

    font-weight: 700;

    text-shadow: 1px 1px 2px #999;

    text-transform: uppercase;

}

a:link {font-size:12px; color:#df0000;//Red

}

a:visited {font-size:12px; color:#df0000;//DarkRed

}

a:hover {font-size:12px; color:#df0000;Tomato

}







@font-face {

font-family: 'Classica One';

src: url('http://wien.pp.ua/osvita/ttf/Classica_One.ttf');

}



.text_effect {

font-family: 'Classica One';

color: rgb(133, 19, 4);

font-size: 36px;

background-color: rgb(255, 255, 255);

text-shadow: rgb(3, 3, 3) 4px 4px 4px;

}

</style>

<p class="text_effect">Ваш текст</p>





.example-shadow-3 {

  background: #e8e8e8;

  text-align: center;

}

.example-shadow-3 span {

  background: white;

  display: inline-block;

  width: 200px;

  height: 100px;

  margin: 50px;

  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

}

<p class="example-shadow-3"><span></span></p>





.text-shadow-carolina {

font-family: 'Carolina', arial;

src: url('http://wien.pp.ua/osvita/ttf/carolina.ttf')

}



      div {

        font-family: 'Carolina', arial;

        font-size: 48px;

        text-shadow: 4px 4px 4px #aaa;

      }

body {margin:0;}

.navbar {

  overflow: hidden;

  background-color: #300;

  position: fixed;

  bottom: 0;

  width: 100%;

}

.navbar a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 5px 6px;

  text-decoration: none;

  font-size: 5px;

}

.navbar a:hover {

  background: #ddd;

  color: black;

}

.main {

  padding: 16px;

  margin-bottom: 30px;

  height: 1500px; /* Used in this example to enable scrolling */

}

      div {

        font-family: 'Carolina', arial;

        font-size: 48px;

        text-shadow: 4px 4px 4px #aaa;

      }