*{
    margin:0; padding: 0;
}


body {
    font-family: verdana;
            background-color: black;
            color: #39ff14;
            padding: 10px;
           
}
header {
    color:black;
    background-color: #39ff14;
    border: 4px solid hotpink;
    border-radius: 10px;
    padding:10px;
    
}
header > h1{
   
    text-align: center;
    text-transform: uppercase;
    text-shadow: hotpink 1px 1px 1px;
    border:2px solid hotpink;
    
    margin-bottom: 15px;
}

header span{
    color: hotpink;
    font-style: italic;
    text-shadow: black 1px 1px 1px;
    
}
p.subtitle{
    text-align: center;
    text-shadow: hotpink 1px 1px 5px;
    border:2px solid hotpink;
    line-height: 30px;
    
}

section{
    display:flex;
    justify-content: center;
    flex-flow: row wrap;
    
}

section article{
    border: 2px solid hotpink;
 
    max-width: 360;
    min-height: 360px;
    margin:10px;
    flex: 0 0 auto;
    padding: 4px;
}

article h2{
    font-size: 16pt;
}
article p{
    margin: 8px;
}

#art1 div{
    border-radius: 20px;
    width:70%;
    aspect-ratio: 2/1;
    background-color: blue;
    margin: 20px auto; /*centers a block */
   
    
}
#art2 div{
    border-radius: 20px;
    width:70%;
    aspect-ratio: 2/1;
    background-color: rgba(224, 42, 85, 0.783);
    margin: 20px auto;
    box-shadow: 15px 4px 45px #39ff14;
}
p.block span{
    text-transform: uppercase;
    text-decoration: underline;
    font-style: italic;
}
#art3 h2{
    text-align: center;
     font-family: "Rubik Dirt";
     font-size: 45pt;
     color:white;
     

}

#art4{
    /*use on parent*/
    position: relative;
}

#art4 h2{
    position: absolute;
    bottom:0;
    left:0;
    border: 0px solid hotpink;
    width:100%;
    text-align: center;
    padding-bottom: 10px;
}

#art5 {
    position: relative;
}

#art5 div:nth-of-type(1) {
    width: 40%; aspect-ratio: 1;
    background-color: aqua;
    z-index: 2;
}

#art5 div:nth-of-type(2) {
    width: 40%; aspect-ratio: 1;
    background-color: rgb(33, 16, 194);
    margin:30px;
    z-index: 1;
}
#art5 div{
    position: absolute;
}

#art6{
transition: all 350ms linear;
}

#art6:hover {
    background-color: #39ff14;
    color: black;
    border:10px solid black;
}

footer {
    
    text-align: center;
    color: #999;
    font-size: 0.9em;
    margin-top: 200vw;
    padding: 10px;
    border-top: 1px solid #39ff14;
}


 /* css ruleset, aka rule selector
{
 declaraction1:
 declaraction2:
 Property: value;
 property: value1, value2, value3;
}
 */