body{
    background-color: rgb(40, 40, 40);
}
.basic > .first {
    font: bolder;
    color: aliceblue;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: #04AA6D;
    width: 100;
    text-align: center;
}
.basic > .main{
    border-radius: 20px;
    background: #04AA6D;
    padding: 20px; 
    width: 200px;
    height: 150px;
    opacity: 0;
    margin-left: calc(50% - 115px);
}
.main h2{
    margin-top: 0px;
    justify-content: center;
    text-align: center;
    font-size: 30px;
}

.main p{
    margin-top: 0px;
    justify-content: center;
    text-align: center;
    font-size: 20px;
}

.basic ul {
    list-style-type: none;
    margin: 0.7%;
    padding: 0%;
    overflow: hidden;
    background-color: #333;
}

/*li {
  float: left;
}*/

.basic li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 120%;
}

.basic li a:hover:not(.active) {
    background-color: #111;
}

.basic li a:hover {
  text-decoration: underline;
}

.basic .active {
    background-color: #04AA6D;
}


.cards ul {
    display: grid;
    justify-content: center;
    justify-items: center;
    margin-top: 5vh;
    grid-auto-rows: auto;
    grid-template-columns: 370px;
}
.cards > ul > li{
    list-style: none;
    width: 370px;
    margin-right: 40px;
    justify-content: center;
    justify-items: center;
    box-shadow: 0px 5px 15px 0px rgba(153,153,153,0.5);
    border-radius: 10px;
    margin-top: 50px;
}

.cards > ul > li > a > p{
    margin-left: 1vw;
    margin-right: 1vw;
    text-align: center;
}

.cards ul > li:hover{
     cursor: pointer;
}
*{
    text-decoration: none;
}

.cards h1, .cards h2, .cards h3, .cards p {
    
    color: white;
}

.cards hr {
    color: rgba(99, 99, 99, 0.651);
}

.header{
    position: relative;
    display: inline-flex;
}
.header img{
    border-radius: 50%;
    width: 3.5vw;
    height: 3.5vw;
    margin-top: 2vh;
    margin-left: 1vw;
    margin-right: 1vw;
}
.header h2{
    
    text-align: center;
    padding-left: 7vw;
    padding-top: 2vh;
}

.socials{
    justify-content: right;
    justify-items: right;
    text-align: right;
    margin-right: 1vw;
}
.socials img{
    width: 1.7vw;
    height: 1.7vw;
    size: 1.7vw;
    margin-left: 1vw;
}