@media (max-width: 1050px) and (min-width: 551px){
    .intro{
        flex-direction: column;
    }
}

@media (max-width: 550px) and (min-width: 100px){
    .intro{
        flex-direction: column;
    }

    .intro .card{
        width: 90vw;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        height: auto;
    }

    .intro .card .content{
        text-align: center;
    }

    .intro .card .content .social{
        text-align: center;
    }
}

@media (max-width: 550px) and (min-width: 451px){

    main > h2{
        font-size: 28px;
        margin: 10px 17px;
    }

    main > div > h3{
        font-size: 25px;
        margin: 10px 7px;
    }

    main > p{
        font-size: 14px;
        margin: 0px 17px;
    }

    main .intro .card h2{
        font-size: 43px;
    }

    main .intro .card .image{
        margin: 25px 20px 1px 20px;
    }
    main .intro .card .content{
        padding: 10px 15px 15px 15px;
    }

    main .intro .card .content h3{
        font-size: 25px;
        margin: 5px 0px 10px 0px;
    }

    main .intro .card .content p{
        font-size: 14px;
        margin: 2px 0px;
    }

    main .intro .card .content .social{
        margin: 15px 0px 10px 0px;
    }

    footer{
        font-size: 14px;
    }
}

@media (max-width: 450px) and (min-width: 401px){

    main > h2{
        font-size: 27px;
        margin: 9px 16px;
    }

    main > div > h3{
        font-size: 23px;
        margin: 9px 6px;
    }

    main > p{
        font-size: 14px;
        margin: 0px 16px;
    }

    main .intro .card h2{
        font-size: 40px;
    }

    main .intro .card .image{
        margin: 25px 20px 1px 20px;
    }
    main .intro .card .content{
        padding: 10px 15px 15px 15px;
    }

    main .intro .card .content h3{
        font-size: 23px;
        margin: 5px 0px 10px 0px;
    }

    main .intro .card .content p{
        font-size: 13px;
        margin: 2px 0px;
    }

    main .intro .card .content .social{
        margin: 15px 0px 10px 0px;
    }

    footer{
        font-size: 13px;
        padding-bottom: 42px;
    }
}

@media (max-width: 400px) and (min-width: 351px){
    main > h2{
        font-size: 26px;
        margin: 8px 15px;
    }

    main > div > h3{
        font-size: 22px;
        margin: 18px 5px;
    }

    main > p{
        font-size: 13px;
        margin: 0px 15px;
    }

    main .intro .card h2{
        font-size: 38px;
    }

    main .intro .card .image{
        margin: 25px 20px 1px 20px;
    }
    main .intro .card .content{
        padding: 10px 15px 15px 15px;
    }

    main .intro .card .content h3{
        font-size: 20px;
        margin: 5px 0px 10px 0px;
    }

    main .intro .card .content p{
        font-size: 12px;
        margin: 2px 0px;
    }

    main .intro .card .content .social{
        margin: 15px 0px 10px 0px;
    }

    footer{
        font-size: 12px;
        padding-bottom: 40px;
    }
}

@media (max-width: 350px) and (min-width: 301px){

    main > h2{
        font-size: 25px;
        margin: 7px 14px;
    }

    main > div > h3{
        font-size: 21px;
        margin: 17px 4px;
    }

    main > p{
        font-size: 12px;
        margin: 0px 14px;
    }

    main .intro .card h2{
        font-size: 35px;
    }

    main .intro .card .image{
        margin: 25px 20px 1px 20px;
    }
    main .intro .card .content{
        padding: 10px 15px 15px 15px;
    }

    main .intro .card .content h3{
        font-size: 18px;
        margin: 5px 0px 10px 0px;
    }

    main .intro .card .content p{
        font-size: 11px;
        margin: 2px 0px;
    }

    main .intro .card .content .social{
        margin: 15px 0px 10px 0px;
    }

    footer{
        font-size: 11px;
        padding-bottom: 38px;
    }
}

@media (max-width: 300px) and (min-width: 201px){

    main > h2{
        font-size: 24px;
        margin: 6px 13px;
    }

    main > div > h3{
        font-size: 20px;
        margin: 16px 3px;
    }

    main > p{
        font-size: 11px;
        margin: 0px 13px;
    }

    main .intro .card h2{
        font-size: 34px;
    }

    main .intro .card .image{
        margin: 25px 20px 1px 20px;
    }
    main .intro .card .content{
        padding: 10px 15px 15px 15px;
    }

    main .intro .card .content h3{
        font-size: 18px;
        margin: 5px 0px 10px 0px;
    }

    main .intro .card .content p{
        font-size: 11px;
        margin: 2px 0px;
    }

    main .intro .card .content .social{
        margin: 15px 0px 10px 0px;
    }

    main p .email{
        font-size: 10px;
    }

    footer{
        font-size: 11px;
        padding-bottom: 37px;
    }
    
}

@media (max-width: 200px){

    main > h2{
        font-size: 20px;
        margin: 6px 10px;
    }

    main > div > h3{
        font-size: 18px;
        margin: 15px 1px;
    }

    main .intro .card h2{
        font-size: 30px;
    }

    main > p{
        font-size: 9px;
        margin: 0px 10px;
    }

    main .intro .card .image{
        margin: 25px 20px 1px 20px;
    }
    main .intro .card .content{
        padding: 10px 15px 15px 15px;
    }

    main .intro .card .content h3{
        font-size: 15px;
        margin: 5px 0px 10px 0px;
    }

    main .intro .card .content p{
        font-size: 9px;
        margin: 2px 0px;
    }

    main .intro .card .content .social{
        margin: 15px 0px 10px 0px;
    }

    main p .email{
        font-size: 10px;
    }

    footer{
        font-size: 9px;
    }
}