@font-face {

    font-family: "Scream Real";
    src: local("Scream Real"), url(media/Scream\ Real.ttf);

}

@font-face {

    font-family: "Feast of Flesh BB";
    src: local("Feast of Flesh BB"), url(media/fofbb_ital.ttf);

}

@font-face {

    font-family: "Feast of Flesh BB";
    src: local("Feast of Flesh BB"), url(media/fofbb_reg.ttf);

}

body{

    background-color: orange;
    background-image: linear-gradient(rgba(255, 133, 0, 0), rgb(255, 133, 0), rgb(255, 124, 0), rgb(255, 102, 0));
    font-family: 'Scream Real', Impact, 'Arial Narrow Bold', sans-serif;

}

h1{

    color:hsl(0, 100%, 41%);
    text-shadow: 1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
    font-size: 70px;
    font-family: 'Feast of Flesh BB', 'Times New Roman', Garamond;

}

h3{

    width: 26%;
    text-align: center;
    color:white;
    text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
    font-size: 60px;
    border: none;
    margin-left: auto;
    margin-right: auto;
    

}


a{

    text-decoration: none;
    color:white;
    text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;

}

header{

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    background-color: rgb(47, 48, 46);

}

header a:nth-child(1){

    grid-row: 1;
    grid-column: 2;
    text-align: center;
    border: none;

}

header a{

    grid-row: 2;
    text-align: center;
    font-size: 34px;
    padding: 25px 30px;
    margin: 0px;
    border: solid rgb(35, 35, 40) 2px;

}

header a:hover{

    color: black;
    text-shadow: 1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;

}


section ol{

    display: flex;
    flex-direction: column;
    list-style-type: none;
    font-size: 24px;
    color:white;
    text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
    width: 95%;
    position: relative;

}


section ol li:nth-child(odd){

    align-self: flex-end;
    text-align: right;
    padding-right: 15px;
    padding-left: 20px;
    padding-top: 13px;
    padding-bottom: 13px; 
    margin: 13px 0px;
    background-color: rgb(47, 48, 46);
    border: 2px solid rgb(35, 35, 40);

}

section ol li:nth-child(even){

    align-self: flex-start;
    text-align: left;
    padding-right: 20px;
    padding-left: 15px;
    padding-top: 13px;
    padding-bottom: 13px; 
    background-color: rgb(47, 48, 46);
    border: 2px solid rgb(35, 35, 40);
    
}

.center{

    float: right;
    margin: 20px 17% 10px auto;
}

.announced{

    width: 960px;
    height: 300px;

}

.container-odd{

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 65px 1fr;
    
}

.container-even{

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 65px 1fr;
    
}
/*
.trans{

    transition: all 400ms ease-in-out;

}

.sub-trans{

    transition: all 200ms ease-in;
    transition-delay: 1s;
}

section ol li:nth-child(odd).trans:hover{

    width: 960px;
    height: 300px;

}

section ol li:nth-child(even).trans:hover{

    width: 960px;
    height: 300px;

}
*/
ol li ul{

    list-style-type: none;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;

}

section ul.container-odd li:nth-child(1){

    text-align: center;
    margin: 0px;
    border: none;
    grid-row-start: 1;
    grid-row-end: span 2;

}

section ul.container-odd li:nth-child(2){

    text-align: right;
    margin: 0px;
    border: none;
    
}

section ul.container-odd li:nth-child(3){

    text-align: left;
    margin: 0px;
    font-size: 18px;
    border: none;
    align-self: center;
    
}

section ul.container-even li:nth-child(1){

    text-align: center;
    margin: 0px;
    border: none;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: span 2;

}

section ul.container-even li:nth-child(2){

    text-align: left;
    margin: 0px;
    border: none;
    
}

section ul.container-even li:nth-child(3){

    text-align: left;
    margin: 0px;
    font-size: 18px;
    border: none;
    align-self: center;
    
}





/*
section ol li:nth-child(odd).trans:hover ul{
    
    display:flex;
    flex-direction: row;

}



section ol li:nth-child(even).trans:hover ul{
    
    display:flex;
    flex-direction: row;

}
*/
nav p{

    width: 65%;
    text-align: center;
    font-size: 34px;
    color:white;
    text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
    background-color: rgb(47, 48, 46);
    padding: 13px 20px;
    margin: 0px auto;
    background-color: rgb(253, 126, 42);
    border: 3px solid black;
    border-radius: 100px;

}

nav a{

    text-decoration: underline black solid 1px;
}

nav a:hover{

    color: black;
    text-shadow: 1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;

}