/* TABLET VIEW */
@media only screen and (max-width:768px) {
    /* images/button  */

    .welcome {
        margin-left: 0px;
        margin-right: 0px;
    }
    #sticker-star {
        left: 550px;
        top: 550px;
    }
    #sticker-butterfly {
        display: none;
    }
    #sticker-rainbow {
        left: 50px;
        top: 500px;
    }
    #sticker-cherry {
        left: 550px;
        top: 200px;
    }
    #sticker-bow {
        left: 60px;
        top: 220px;
    }
    #sticker-flower {
        display: none;
    }
    .button-primary {
        padding: 25px 40px 25px 40px;
        font-size: 26px;
    }
    .button-secondary {
        padding: 25px 40px 25px 40px;
        font-size: 26px;
    }
    .image {
        max-width: 600px;
    }
    .body{
        font-size: 80%;
    }
    .container{
        align-content: center;
    }   
    #header{
        margin-top: 40%;
        margin-bottom: 30%;
        }
    section#about {
        }
    .aboutme-header {
        font-size: 200%;
        margin: 0;
    }
    .aboutme-paragraph {
     margin-left: 10px;
     margin-right: 20px;
    }

    /*Experience*/
    .experience-card-column {
        flex-direction: column;
        align-items: center;
        height: 100%;
        width: 320px;
    }
    .experience-card{
        max-width: 380px;
    }
    /*Portfolio*/
    .mockup {
        width: 350px;
        height: auto;
    }
    .portfolio-row{
        flex-direction: column;
    }
    .portfolio-gallery {
        grid-template-columns: repeat(1, 1fr);
        gap: 40px;
        align-items: center;
    }
    /*contact*/
    .contact-section {
        max-width: 380px;
    }
    label{
        font-size: 18px;
    }
    .question {
        font-size: 17px;
    }
    .down-button {
        width: 15px;
    height: 15px;
    background-size: 15px 15px;
    }
    .faq-question-answer {
        height: 75px;
    }

    /*footer*/
    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 10%;
    }
    .footer-links {
        flex-direction: column; 
    }
    a.footerlink {
        font-size: 20px;
    }
    .footer-logo{
        width: 300px;
        height: auto;
    }
    .copyright {
        font-size: 14px;
    }
    .social_media {
        max-width:50px;
    }
    .button-primary {
        padding: 20px;
        padding-left: 45px;
        padding-right: 45px;
        font-size: 21px;
    }
    .button-secondary {
        padding: 20px;
        padding-left: 40px;
        padding-right: 40px;
        font-size: 21px;
    }
    
    .social-media-links {
        align-items: flex-start;
        margin-left: 0px;
    }
}
/* MOBILE VIEW */
@media only screen and (max-width: 390px) {
    .welcome {
        align-content: center;

    }
    #header {
        margin-bottom: 60%;
        margin-top: 60%;
    }
    section#header {
        height: 100%;
    }
    figure {
        align-content: center;
    }
    .image {
        width: 320px;
    }
    h3 {
        font-size: 20px;
    }
    p{
        font-size: 16px;
    }
    h2 {
        font-size: 20px;
    }
    h4 {
        font-size: 18px;
    }
    h3 {
        font-size: 18px;
    }
    .aboutme-header h3 {
        font-size: 21px;
    }
    .aboutme {
        gap: 10px;
    }
    .experience-card-column {
         height: 100%;
        padding: 0% 0% 0% 0%;
    }
    #sticker-star {
        display: none;
    }
    #sticker-rainbow {
        top: 450px;
        z-index: 0;
    }
    #sticker-cherry {
        left: 260px;
        top: 400px;
        rotate: 40deg;
    }
    #sticker-bow {
        left: 60px;
        top: 150px;
    }

    .subheading {
        font-size: 16px;
        margin-left: 0%;
        margin-right: 0%;
    }
    .logo {
        width: 150px;
        height: auto;
        position: relative;
        left: 60%;
    }
    .aboutme-paragraph {
        font-size: 15px;
        line-height: 110%;
    }
 
    .continer {
        align-items: center;
    }

    .menu {
    left: 21px;
    }
    .button-primary {
        padding: 15px;
        padding-left: 25px;
        padding-right: 25px;
        font-size: 19px;
    }
    .button-secondary {
        padding: 17px;
        padding-left: 27px;
        padding-right: 27px;
        font-size: 18px;
    }
    /*About*/
    #about {
        font-size: 20px;
    }
    /*experience*/
    .experience-card {
        width: 340px;
    } 
    /*Portfolio*/
   section#portfolio {
    align-content: center;
    }
    .portfolio-title {
        font-size: 18px;
        width: 100%;
    }
    .portfolio-row {
        align-content: center;
        width: 100%;
    }
    .portfolio-description {
        font-size: 16px;
        width: 100%;
    }
    .portfolio-date-location h4 {
        font-size: 15px;
    }
    .experience-card-description {
        width: 220px;
    }

    .portfolio-content {
        width: 280px;
    }
    /*FAQs*/
    .question{
        font-size: 18px;
        gap: 0px;
        flex-direction: column;
    }
    .answer {
        padding: 5%;
    }
    .faq-question-answer {
        height: 100px;
    }
    
    /*Contact*/
    label{
        font-size: 18px;
    }
    input{
        font-size: 18px;
        padding: 6%;
    }
    .mockup {
      width: 290px;
       height: auto;
     }

     .portfolio-row{
        flex-direction: column;
     }
    .contact-section {
        max-width: 300px;
     }

    /*footer*/
    .copyright {
        font-size: 12px;
    }
    .social_media {
        width:45px;
    }
    .footer-logo {
    width: 150px;
        height: auto;
        position: relative;

    }
    .footer-links {
        display: flex;
        flex-direction: column;
        justify-content: right;
        align-items: flex-start;
    }
    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 20%;
    }
    .aboutme, .aboutme-paragraph {
        width: calc(100% - 10%);
        margin: 0 auto;
    }
    .aboutme-paragraph {
        font-size: 18px;
        width: 100%;
    }
}