@font-face {
    font-family: "MagicCards";
    src: url('../Lesson4/media/MagicCards.ttf') format('truetype');
}
@font-face {
    font-family: "AndyBold";
    src: url('media/AndyBold.ttf') format('truetype');
}
body{
    font-family:AndyBold;
    font-size:1.5em;
    color:#fff000;
    background-color:black;
}
h1{
    font-family:MagicCards;
    font-size:2em;
    background-color:black;
    opacity:.8;
    padding:10px;
    border-radius:5px;
    border-color:#F2A900;
    border-style:solid;
    border-width:10px;
    width:50%;
    margin:auto;
    text-align:center;
    animation-duration:3s;
    animation-name:spin;
}
@keyframes spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
h2{
    position:relative;
    font-family:MagicCards;
    background-color:black;
    opacity:.8;
    padding:10px;
    border-radius:5px;
    border-color:#F2A900;
    border-style:solid;
    border-width:5px;
    width:50%;
    margin:auto;
    text-align:center;
    animation-duration: 1s;
    animation-name:slidein;
}
ul{
    animation-duration: 3s;
    animation-name:slidein;
}
@keyframes slidein{
    from{margin-left:100%; width:200%;}
    to{margin-left:0%; width:100%;}
}
h3{
    font-Family:MagicCards;
    background-color:black;
    opacity:.8;
    padding:10px;
    border-radius:5px;
    border-color:#F2A900;
    border-style:solid;
    border-width:5px;
    text-align:left;
    width:25%;
    animation-duration:2s;
    animation-name:slidein;
}
hr{
    background-color:grey;
    color:black;
    height:5px;
}
section{
    background-color:black;
    opacity:.8;
    padding:10px;
    border-radius:5px;
    border-color:#ffc100;
    border-style:solid;
    border-width:10px;
    text-align:left;
}
li{
    margin-left:10px;
    background-color:darkslategrey;
    width:30%;
    border-radius:5px;
    border-style:solid;
    border-color:#ffc100;
    padding:5px;
}
a:link, a:visited{
    color:orangered;
    text-decoration:none;
}
a:hover, a:active{
    color:#31ff00;
}
footer{
    color:grey;
}