@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');

@font-face {
    font-family: 'Iron Maiden';
    src: url('../fonts/maiden.ttf');
}

:root{
    --font1: 'Metal Mania', sans-serif;
    --font2: 'Roboto Condensed', sans-serif;
    --font3: 'Iron Maiden', sans-serif;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-variant: small-caps;
    font: var(--font1), sans-serif ;
}

.container{
    position: relative;
    font-family: var(--font1);
    height: 88vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;}

.container::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-image: url('../images/eddie-bg.jpg');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.container main{
    position: absolute;
    margin-top: -50px;
    padding: 25px 25px 20px 50px;
    background-color: #eee;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.468);
    width: 600px;
    font-size: 1.3em;
    line-height: 1.5em;
}

.container main h2{
    display: flex;
    margin: auto;
    margin-bottom: 10px;
    font-size: 25pt;
    justify-content: center;
}

.container main ol li a{
    text-decoration: none;
    color: #000;
    transition: 0.2s linear;
}

.container main ol li a:hover{
    color: rgb(210, 196, 100);
}

.container footer{
display: flex;
position: absolute;
box-sizing: border-box;
margin:auto;
padding: 15px;
bottom: 0px;
width: 100%;
justify-content: center;
background-color:  rgb(34, 34, 34);
color: #eee;
font-size: 15pt;
}


/*Cŕeditos

https://ironmaidenlegacy.com/wallpapers/
https://www.nicepng.com/maxp/u2w7e6a9y3r5a9i1/
https://br.pinterest.com/pin/219057969348212969/
*/

@media (max-width: 705px) {
	.container main{
        width: 25rem;
    }

    .container main h2{
        font-size: 1.5rem;
    }
}


@media (max-width: 422px) {
	.container main{
        width: 19rem;
    }
}