:root {
    --color1: #ffffff;
    --color2: #d9d9d9;
    --color3: #284b63;
    --color4: #3c6e71;
    --color5: #353535;
}
body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
  }

*{
    color: var(--color3);
}

.hero{
    background-color: var(--color2);
}

.maindiv{
    text-align: center;
    position: relative;
    margin-left: 20%;
    margin-right: 20%;
}
.name{
    text-align: center;
    margin: 0;
    position: relative;
    top: 40%;
    right: 10%;
}

.img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
#profilePic:hover{
    transform: scale(1.2);
}

.social{
    text-align: center;
}
.fa-brands{
    font-size: 30px;
    color: var(--color3);
    text-shadow: 2px 2px 10px var(--color4);
}
i.fa-github:hover {
    color: black;
    transform: scale(1.5);
}
i.fa-stack-overflow:hover {
    color: #F2740D;
    transform: scale(1.5);
}
i.fa-linkedin:hover {
    color: #0377B5;
    transform: scale(1.5);
}
i.fa-facebook:hover {
    color: #4867AA;
    transform: scale(1.5);
}
.social>a {
    margin: 15px;
}
div.box{
    background-color:rgb(255,255,255,0.4);
}
div.box-app{
    background-color: var(--color2);
}
#app1:hover{
    transform: scale(1.05);
    cursor: pointer;
}

footer {
    position: flex;
    background-color: var(--color1);
    height: 40px;
}

@media only screen and (max-width: 600px) {
    .name {
        text-align: center;
        margin: 0;
        position: relative;
        bottom: -80px;
        left: 80px;
    }
  }