@charset "UTF-8";

@font-face {
    font-family:'maiden';
    src: url('../maiden.ttf') format('truetype');
    font-weight: normal;    
}

* {
    margin: 0px;
    padding: 0px;
}

body {  
    
    background-color: darkgray;
}


header { 
    border-radius: 15px 15px 0px 0px;
    background-image: linear-gradient(180deg, rgba(10, 10, 10, 0.411) 0%, rgba(187,187,207,1) 100%);
    padding: 40px;
    font-size: 18px;
}


header > p {
    
    color: rgb(231, 235, 7);
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.103);
}

main {

    background-color: rgb(117, 126, 123);    
    text-align: center; 
    margin: auto;
    margin-bottom: 20px;
    min-width:300px;
    max-width:1000px;     
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.500);

}

main img {
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.500);
}
 
h1 {    
    font-family:'maiden';
    color: rgb(0, 0, 0);       

}

h2 {
    color: color: rgb(238, 75, 75);
    background-color: rgba(0, 0, 0, 0.493);
    background-size: auto;    
    border-radius: 15px;
    padding:15px;    
}

h3{
    color: rgb(5, 5, 5);
    font-family:'maiden';
    padding-bottom: 10px;
}



p {
    margin-bottom: 30px;
    margin-top: 20px;
}

strong {
    color: white;
}

nav {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: black;
    padding: 10px;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.274);
    border-radius: 0px 0px 15px 15px;

    
}

div.video {      
    margin: 0px -20px 0px -20px;
    padding-bottom: 20px;
    position: relative;
    padding-bottom: 40%;
}


div.video > iframe {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;

}



a {
    text-decoration: none;
    color: rgb(253, 251, 251);
    padding: 10px;
    
    
}

 a:hover {
    background-color: white;
    color: rgb(255, 0, 0);
    padding: 10px;
    border-radius: 5px;
    transition-duration: 0.5s;
}

ol {
    padding-bottom: 20px;
    padding-top: 10px;
    background-color: rgba(0, 0, 0, 0.199);
    border-radius: 15px 15px 0px 0px;
    margin-bottom: 10px;
    list-style-position: inside;
    columns: 2;
    text-align: left;
}

li { 
 padding-left: 6px;
 margin-left: 5px;
}

@media screen and (max-width: 600px) {
	ol {
	columns: 1
}
}

article>h4 {
    font-size: 20px;
    padding-bottom: 12px;
    color: rgb(254, 254, 255);
    
}


footer {
    background-color: black;
    padding-top: 10px;
    color: white;
    text-align: center;
    height: 120px;
    
}