*{

    margin: 0px;
    padding: 0%;
    
    }
    
    body {
        
        height: 100%;
        background-color: #747474;
        
         
        }
    
    .cabeçalho {
       
        color: white;
        padding: 0 25px;
        box-shadow: 0px 6px 10px #7c7c7c;
        height: 100px ;
        display: grid;
        grid-template-columns: 20% 20% 20% 20% 20%;
        background-color: rgb(67, 67, 67);
        
    }


    a:link{

        color: #ffff;
        text-decoration: none;
        }
        
        a:visited{
        
        color: #ffff;
        text-decoration: none;
        
        }
    
    .duque  {
        font-size: 20px;
        text-align: center;
        display: flex;
        align-items: center;

    }

    .condeça {
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 40px;
        
        
        
        

    }

    img {

        width: 300px;
        border-radius: 20px;
        margin-top: 100px;
        text-align: center;
                
    }


    .capitao {
        text-align: center;
        color: white;
        
        


    }

    p {

        text-align: center;

    }





    .main {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        align-items: center;
        margin-top: 70px;
        margin-bottom: 50px;
      }
      
      .up {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
      }
      
      .down {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
      }
      
      .card1 {
        width: 90px;
        height: 90px;
        outline: none;
        border: none;
        background: white;
        border-radius: 90px 5px 5px 5px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        transition: .2s ease-in-out;
      }
      
      .instagram {
        margin-top: 1.5em;
        margin-left: 1.2em;
        fill: #cc39a4;
      }
      
      .card2 {
        width: 90px;
        height: 90px;
        outline: none;
        border: none;
        background: white;
        border-radius: 5px 90px 5px 5px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        transition: .2s ease-in-out;
      }
      
      .twitter {
        margin-top: 1.5em;
        margin-left: -.9em;
        fill: #03A9F4;
      }
      
      .card3 {
        width: 90px;
        height: 90px;
        outline: none;
        border: none;
        background: white;
        border-radius: 5px 5px 5px 90px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        transition: .2s ease-in-out;
      }
      
      .github {
        margin-top: -.6em;
        margin-left: 1.2em;
      }
      
      .card4 {
        width: 90px;
        height: 90px;
        outline: none;
        border: none;
        background: white;
        border-radius: 5px 5px 90px 5px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        transition: .2s ease-in-out;
      }
      
      .discord {
        margin-top: -.9em;
        margin-left: -1.2em;
        fill: #8c9eff;
        width: 50px;
      }
      
      .card1:hover {
        cursor: pointer;
        scale: 1.1;
        background-color: #cc39a4;
      }
      
      .card1:hover .instagram {
        fill: white;
      }
      
      .card2:hover {
        cursor: pointer;
        scale: 1.1;
        background-color: #03A9F4;
      }
      
      .card2:hover .twitter {
        fill: white;
      }
      
      .card3:hover {
        cursor: pointer;
        scale: 1.1;
        background-color: black;
      }
      
      .card3:hover .github {
        fill: white;
      }
      
      .card4:hover {
        cursor: pointer;
        scale: 1.1;
        background-color: #ff0000;
      }
      
      .card4:hover .discord {
        fill: white;
      }