@charset "utf-8";
/* CSS Document */


h2{
    font-variant: small-caps;
    color:#FFB81E;
    color:#242729;
}

p{
    display:flex;
    width:90%;
    margin: 0rem 0rem .5rem 0rem;
    height:auto;
    overflow:hidden;
    justify-content: center;
    color:#242729;
    text-align:left;
    padding:.25rem .5rem .25rem .5rem;
    line-height:1.5;
}

ul{
    list-style-type:square;
    padding:1rem;
    padding-left:5rem;
    padding-right:5rem;
    line-height: 2;
}


.article-title{
    margin:.5rem;
    font-weight:bolder;
    font-size: 1.5rem;
    font-family:"Nirmala UI";
    font-variant: small-caps;
}



img{
    border-radius:.25rem;
    width:40%;
    height:auto;
    margin-top:1rem;
}


.nav-menu{
    justify-content: left;  
}


.Main-Header{
    position:fixed;
    top:0;
}


.nav-menu{
    position:fixed;
    width:100%;
    top:5em;
}

.Home-Grid{
    display:grid;
    top:1rem;
    background-color:#242729;  /*Charcoal*/
    grid-template-areas:
        'A'
        'F';
    grid-template-columns: 1fr;
    grid-template-rows:auto,auto;
    gap:.5em;
    margin-bottom:.5em;
    margin-top: 8.5rem;
    margin-left:5rem;
    margin-right:5rem;
}

.Home-Grid h4{
    margin:.25rem;
    align-self: center;
}

.Home-Grid a{
    align-self: center;
    color:white;
    margin:1rem;
}

.Home-Grid a:link{
    display: flex;
    text-decoration: none;
    background-color:#652F7E;
    width:18rem;
    padding-top:.5rem;
    padding-bottom:.5rem;
    border-radius: 1rem;
    justify-content: center;
    align-content: center;
    padding-left: auto;
    padding-right: auto;
}

.footer a:link{
    background-color:whitesmoke;
}

.Home-Grid a:hover{
    background-color:#FFB81E;
    color:#652F7E;
    font-weight: bold;
}

.footer a:hover{
    background-color:whitesmoke;
    color:whitesmoke;
    font-weight: bold;
}

.Section_A{
    grid-area: A;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
    border-radius: .25rem;
}



/*
p{display: block;}

 .first::first-letter {
  font-size: 3rem;
  color:#72177E;
}
*/



@media (max-width: 768px) {
.Home-Grid{
    margin:5.5rem .25rem 2rem .25rem;
}    
    
    img{
        width:85%;
    }
     p {
         width:95%;
         line-height:2;
    }

ul{
    padding-left:2rem;
    padding-right:2rem;
}




}