@font-face {
    font-family:"MagicCards";
    src: url('../media/MagicCards.ttf') format('truetype');
}

*{box-sizing:border-box;}

body,main{
    margin:0;
    font-family:'MagicCards',"serif";
    background:black;
    word-spacing:10px;
}

p{
    font-size:1.4em;
    color:#c8a35f;
    text-shadow: -2px -2px 5px #000,   2px -2px 10px #000, -2px 2px 5px #000, 2px 2px 10px #000;
}

header, footer{
    text-align:center;
    padding:32px;
    border:10px solid #ceae63;
    border-radius:10px;
    background-image:url("../media/SiltStrider2.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

h1{
    font-family:"MagicCards", "Serif";
    word-spacing:20px;
    font-size:4em;
    color:#c8a35f;
    font-weight:900;
    text-align:center;
    text-shadow: -2px -2px 5px #000,   2px -2px 10px #000, -2px 2px 5px #000, 2px 2px 10px #000;
}
h2, h3{
    font-family:"MagicCards","Serif";
    font-size:2em;
    color:#c8a35f;
    font-weight:900;
    text-align:center;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.row{
    display:flex;
    flex-wrap:wrap;
    padding 0 4px;
}

img{
    margin-top:8px;
    padding: 0px 4px;
    verticle-align:middle;
    width: 100%;
    box-shadow:5px 5px 20px #d4af37;
    border-radius:20px;
}

article section img:hover{
    box-shadow:10px 10px 50px #d4af37;
    transform:scale(.8, .8);
    transition:all 1s;
}

a:link, a:visited{
    text-decoration:none;
    color:#c8a35f;
}
a:hover, a:active{
    color:white;
    verticle-align:middle;
    text-align:center;
}

.tip{position:relative; z-index:100;}

.tip span{display:none;}

.tip:hover span{
    font-size:3em;
    display:block;
    position:absolute;
    top:0px;
    left:20px;
    width:100%;
    text-align:center;
    color:white;
}

.menu {
    height: 0;
    width: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.5);
    overflow: hidden;
    transition: 0.5s;

}


.list {color:#c8a35f; font-size:1.5em;}

nav{
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content:center;
    padding-top: 4px
}

nav ul{
    list-style-type:none;
    padding: 0;
    margin:0;
    display:flex;
    flex-wrap: wrap;
}

nav ul li{margin-right:20px}

nav ul li a{
    color:#c8a35f;
    font-size:1.5em;
}

@media screen and (max-width:720px){
    main{background:black;}
    .col-4{width:100%;}
    footer{font-size:1em; color:black;}
}