* {
    box-sizing: border-box;
    scroll-behavior:smooth;
}

.cover {
height:100%;
max-width: 100vw;
display: grid;
z-index: 1;
order: 2;
overflow: hidden;
}
    .coverLeft {
    width: 70%;
    height: 100%;
    padding: 30px 0px;
    display: grid;
    margin: 0px auto;
    text-align: center;
    justify-content: center;
    z-index: 5;
    }
        
        #text1 {
        font-size: 54px;
        font-weight: bold;
        color: #1a1a1d;
        text-shadow: 3px 3px 0 #d6d5e2;                  
        }

        #text2 {
        font-size: 36px;
        font-weight: normal;
        color:#1a1a1d;
            
        }
          
    .coverRight {
    margin: 0px;
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    z-index: 3;
    }

    .coverRight img {
        content: url('../img/putra.png');
        transform: translateX(1%);
    }

section {
    display: grid;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

    .headerThis {
        display: grid;
        width: 100%;
        padding: 20px 0px;
        align-content: center;
        justify-content: center;
        z-index: 1;
    }

        .headerThis h1 {
            justify-self: center;
            width: 90%;
            font-size: 48px;
            color: #1a1a1d;
            font-weight: bold;
            text-shadow: 3px 3px 0 #d6d5e2;
        }

        .headerThis h3 {
            justify-self: center;
            color: #1a1a1d;
            font-size: 24px;
            width: 70%;
            font-weight: lighter;
        }

    .bodyThis {
        display: flex;
        width: 100%;
        padding: 20px 0px;
        align-content: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }

        .boxThis {
            display: grid;
            background: #e3e2f2;
            padding: 40px 25px;
            margin: 10px auto;
            box-shadow: 4px 4px 0 #d6d5e2;
            border-radius: 20px;
            max-width: 300px;
            min-height: 380px;
            align-content: space-between;
            justify-items: center;
            transition: all 0.4s;
        }

        .boxThis:hover {
            transform: translateY(2%);
        }

        .boxThis i {
            color: #1a1a1d;
            font-size: 58px;
            transition: all 0.4s; 
        }

        .boxThis h2 {
            color: #1a1a1d;
            font-size: 24px;
            font-weight: bold;
        }

        .boxThis p {
            font-size: 14px;
            color: #1a1a1d;
            font-weight: lighter;
        }

        .boxThis a {
            display: grid;
            align-content: center;
            cursor: pointer;
            text-decoration: none;
            width: 100px;
            height: 30px;            
            font-size: 12px;
            font-weight: 500;
            color: #F2F2FF;
            background: #c3073f;
            border: none;
            transition: all 0.4s; 
        }

        .boxThis a:hover {
            background: #b20a3a;
        }

    .aboutMe {
        display: grid;
    }

    .headerMe {
        display: grid;
        width: 100%;
        padding: 20px 0px;
        align-content: center;
        justify-content: center;
    }

        .headerMe h1 {
            justify-self: center;
            width: 90%;
            font-size: 48px;
            color: #1a1a1d;
            font-weight: bold;
            text-shadow: 3px 3px 0 #d6d5e2;
        }

        .headerMe h3 {
            justify-self: center;
            color: #1a1a1d;
            font-size: 24px;
            width: 100%;
            font-weight: lighter;
        }

    .bodyMe {
        display: flex;
        width: 100%;
        padding: 20px 0px;
        align-content: center;
        justify-content: space-around;
        margin: 0;
        flex-wrap: wrap;
    }

    .bodyMe img {
        margin: 10px auto;
        max-height: 300px;
        max-width: 300px;
        filter: drop-shadow(4px 4px 0px #d6d5e2);
        border-radius: 20px;
        transition: all 0.4s; 
    }

    .bodyMe img:hover {
        transform: translateY(2%);
    }

        .me1 {
            content: url('../img/aboutme1.jpg');
        }

        .me2 {
            content: url('../img/aboutme2.jpg');
        }

        .me3 {
            content: url('../img/aboutme3.jpg');
        }

    .footMe {
        padding: 20px 0px;
        width: 90%;
        justify-self: center;
    }

    .footMe p {
        color: #1a1a1d;
        font-size: 22px;
        font-weight: normal;
        padding-bottom: 20px;
    }
    
    .footMe b {
        color: #c3073f;
        font-size: 22px;
        font-weight: bold;
        text-shadow: 3px 3px 0 #d6d5e2;
    }

.socialMedia {
    padding: 20px;
}

    .socialMedia .headSocial {
        padding: 20px 0;
        align-content: center;
        justify-content: center;
    }

        .headSocial h1 {
            font-size: 48px;
            color: #1a1a1d;
            font-weight: bold;
            text-shadow: 3px 3px 0 #d6d5e2;            
        }

        .headSocial h3 {
            color: #1a1a1d;
            font-size: 24px;
            font-weight: lighter;            
        }

.socialMedia2 {
    padding: 50px 20px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    .socialContent {
        display: grid;
        padding: 20px;
        margin: 20px auto;
        cursor: pointer;
        transition: all 0.4s;
        text-decoration: none;
    }

        .socialContent:hover {
            transform: translateY(2%);
        }

        .socialContent i {
            font-size: 100px;
            color: #1a1a1d;
            margin: 10px 0;
            text-shadow: 3px 3px 0 #d6d5e2;
        }

        .socialContent p {
            margin: 10px 0;
            font-size: 18px;
            font-weight: bold;
            color: #F2F2FF;
            background: #c3073f;
            border-radius: 10px;
            width: 122px;
            box-shadow: 3px 3px 0 #d6d5e2;
        }

.contact {
    padding-bottom: 20px;
}

    .headerContact {
        display: grid;
        width: 100%;
        padding: 20px 0px;
        align-content: center;
        justify-content: center;
    }

        .headerContact h1 {
            justify-self: center;
            font-size: 48px;
            color: #1a1a1d;
            font-weight: bold;
            text-shadow: 3px 3px 0 #d6d5e2;
        }

        .headerContact h3 {
            justify-self: center;
            color: #1a1a1d;
            font-size: 24px;
            width: 100%;
            font-weight: lighter;
        }

        .bodyContact {
        padding: 20px 0px;
        display: grid;
        align-items: center;
        justify-items: center;       
        }

        .formContact {
            height: 90%;
            width: 90%;
            display: grid;
            align-content: center;
        }

        .form-control {
                color: #1a1a1d;
                background: #e3e2f2;
                box-shadow: 4px 4px 0 #d6d5e2;
                height: 70px;
                width: 100%;
                border: none;
                margin-bottom: 20px;
                padding: 0px 20px;
                border-radius: 10px;
                outline: none;
                transition: all 0.4s;
            }


            .form-control::placeholder {
                color: #1a1a1d;
            }

            .form-control:focus {
                transform: scale(1.01);
            }

            .form-message {
                color: #1a1a1d;
                background: #e3e2f2;
                box-shadow: 4px 4px 0 #d6d5e2;
                height: 200px;
                width: 100%;
                border: none;
                margin-bottom: 10px;
                padding:20px 20px;
                border-radius: 10px;
                outline: none;
                transition: all 0.4s;
                resize: vertical;
            }

            .form-message::placeholder {
                color: #1a1a1d;
            }

            .form-message:focus {
                transform: scale(1.01);
            }

            .formContact button {
                cursor: pointer;
                color: #fff;
                background: #c3073f;
                height: 50px;
                width: 120px;
                font-weight: 500;
                float: right;
                outline: none;
                border: none;
                transition: all 0.4s;
            }

            .formContact button:hover {
                background: #b20a3a;
            }

@media (max-width: 780px) {
    .cover {
        display: grid;
    }

    .coverLeft {
        width: 100%;
        text-align: center;
        align-content: center;
    }

    .socials {
        flex-wrap: wrap;
        justify-content: center;
    }

    .coverRight {
        width: 100%;
        justify-content: center;
        overflow: hidden;
    }

    .coverRight img {
        content: url('../img/putra2.png');
        width: 100%;
    }

}

@media (max-width: 490px) {
    .socials a {
        padding: 10px 15px;
    }

    .socials i {
        font-size: 25px;
    }
}