.header {
  background-color: #000000;
  color: #fff;
  padding: 1rem;
  border-radius: 20px;
  text-align: center;
}
.navbar{
  margin: 0;
  padding: 0;
}
.navbar ul{
  list-style-type: none;
  
  text-align: center;
  justify-content: center;
  display: flex;
}


.navbar li{
  margin-top: 1rem;
  font-size: large;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);

  
}

.navbar a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  display: inline-block;
}
.navbar a:hover{
    color:yellow;
}

        
        
        body{
            background-color: rgb(12, 16, 37);
            color: rgb(237, 255, 213);
            
            
            /* border:2px solid black;  Used this just for creating the grid */
            display: block;
            height:auto;
            font-family: outfit;

        }
        .article{
            margin: 2%;
            padding:20px;
            }
        
        .section{
            border-radius:20px;
            margin: 20px;
            padding:10px 30px;
            background-color: rgb(13, 22, 75);
        }
        .hero{
            font-family: outfit;
            font-weight: 600;
            text-align: center;
            justify-items: center;
            align-items: center;
            position:relative;
            justify-content: center;
            
        }
        .hero > h1 {
            animation: fadeIn 1s ease forwards;
            opacity: 0;
            color: rgb(76, 255, 255);
        }
        .section > h2{
            font-size: 30px;
        }
        p{
            font-size: 20px;
            font-weight: 500;
            padding: 20px 10px;
        }
        li{
            font-size: 20px;
        }
    
        .hero > img{
            height: 200px;
            width: auto;
            border-radius: 50%;
            border: 2px solid white;
            animation: slideIn 1s ease forwards;
            opacity: 0; 
            transform: translateY(20px);
        }
        .sub_head{
            padding: 10px 10px;
        }
   
      
        .social_accounts{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position:relative;
            overflow:initial;

            
        }     
        .card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 2px solid black;
        border-radius: 20px;
        margin: 1% 1%;
        padding: 0 1.5%;
        background-color: rgb(11, 19, 64);
        width: 255px;
        max-width: 250px;
        height: auto;
        }

        .card:hover{
            background-color: rgb(106, 106, 181);
            transition: 0.5s;
            color: rgb(0, 0, 0);
            
        }

        .card:hover img {
            border: 1px solid black;
            
        }
        .card a{
            text-decoration: none;
            color: inherit;
            text-align: center;
            align-items: center;
            justify-items: center;
            justify-items: center;
            align-content: center;
        }
        .card img {
            height: 100px;
            width: auto;
            border-radius: 50%;
            border: 2px solid white;   
            text-align: center;
            justify-items: center;
            align-items: center;
            position:relative;
            justify-content: center;     
            
        }
    .footer{
        margin-bottom: 0;
    }
    .mail{
        color:inherit;
        text-decoration: none;
    }

    @media (max-width: 600px) {
        .article {
            margin: 0px;
            padding: 0px;
            
        }
    }