/* Palatinate #571b53
/* Robin Egg Blue #2ebcc6
/* white #fdfbfb
/* Blush #ea688e
/* licorice #120502*/

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

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

@font-face{
    font-family:"ProjectPaintBall";
    src:url('../media/ProjectPaintBall.otf') format('opentype');
}

*{box-sizing:border-box;}

header {
    width: 100%;
    position:sticky;
    top:0;
    z-index:999;
    box-sizing:border-box;
    border: solid #571b53 5px;
    border-radius:10px;
}

nav{
    box-sizing:border-box;
    font-family:ProjectPaintBall;
    min-height:60px;
    color:#571b53;
    background-color:#120502;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

nav h1{
    font-family:ProjectPaintBall;
    font-weight:900;
    margin-left:10%;
    text-shadow:
    0 0 10px #2ebcc6,
    0 0 10px #2ebcc6,
    0 0 15px #2ebcc6,
    0 0 20px #2ebcc6;
    padding:0.25em;
    border:solid #ea688e 5px;
    border-radius:10px;

}

nav ul{
    box-sizing:border-box;
    list-style:none;
    margin:auto;
    display:flex;
    text-align: center;
    justify-content: center;
    margin-right:10%;
}
nav ul li{
    background-color:#571b53;
    border:solid #ea688e 3px;
    padding:0.25em;;
    font-size:1em;
    border-radius:5px;
}

body{
    background-image:url('media/BetterEnd1.jpg');
    background-size:auto;
    background-attachment:fixed;
    background-repeat:no-repeat;
    margin:0;
    font-family: AndyBold, Verdana, Geogia, sans-serif;
    font-size:14pt;
    background:#120502;
    display:flex;
    flex-direction:column;
}

main{
    margin:auto;
    display:flex;
    flex-direction:column;
}

article{
    padding:0px 5px 0px 5px;
    width:95%;
    margin:auto;
    margin-bottom:0.25em;
    margin-top:0.25em;
    border:solid #571b53 5px;
    border-radius:10px;
    background:#120502;
}

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

footer{
    color:#fdfbfb;
    width: 100%;
    position:sticky;
    top:0;
    z-index:100;
    box-sizing:border-box;
    border: solid #571b53 5px;
    border-radius:10px;
    background-color:#120502;
}

}
h2, h3{
    font-family:"MagicCards","Serif";
    font-size:2em;
    color:#2ebcc6;
    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{
    padding: 0px 4px;
    verticle-align:middle;
    width: 100%;
    box-shadow:5px 5px 20px #ea688e;
    border-radius:20px;
    width:500px;
    height:500px;
    object-fit:cover;
}

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

a{
    color:#fdfbfb;
    text-decoration:none;
}

div a:link, a:visited{
    text-decoration:none;
    text-shadow:
    0 0 10px #2ebcc6,
    0 0 10px #2ebcc6,
    0 0 15px #2ebcc6,
    0 0 20px #2ebcc6;
    color:#fdfbfb;
}
div a:hover, a:active{
    text-shadow:
    0 0 10px #2ebcc6,
    0 0 10px #2ebcc6,
    0 0 15px #2ebcc6,
    0 0 20px #2ebcc6;
    color:#fdfbfb;
    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:#fdfbfb;
}

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

}

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

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

@media screen and (max-width:720px){
    nav{box-sizing:border-box;}
    nav h1{margin:1%;}
    nav ul{padding:0;margin:auto;justify-content:center;}
    nav ul li{font-size:1em;}
}

@media screen and (max-width:600px){
    nav{
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items: center;
        justify-content:center;
    }
    nav h1{font-size:1.5em;margin:1%;}
    nav ul{padding:0;margin:auto;justify-content:center;}
    nav ul li{font-size:.7em;}