@media (max-width: 10000px) {

    @font-face {
        font-family: 'Product Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    }
    
    :root {
        --x: 0;
    }
    
    body {
        margin:0;
        overflow: hidden;
    }
    .wrapper {
        display: flexbox;
        width: 100%;
        height: 100%;
        position: absolute;
        background: linear-gradient(45deg, #428dff, #3a6ce0, #344cc0, #302ba0, #2a007e);
        background-size: 600% 100%;
        animation: gradient 16s linear infinite;
        animation-direction: alternate;
    }
    @keyframes gradient {
        0% {background-position: 0%}
        100% {background-position: 100%}
    }
    
    * {
        font-family: 'Product Sans';
        color: white;
    }
    
    h1 {
        margin-left: 10%;
        margin-top: 11%;
        font-size: 8rem;
        margin-bottom: -2%;
    }
    
    h2 {
        margin-left: 10%;
        font-size: 3rem;
    }
    
    h3 {
        margin-left: 10%;
        font-size: 2rem;
        margin-bottom: -1.4%;
    }
    
    
    
    .personalinfo {
        text-align: left;
        /* margin-left: -65%; */
    }
    
    .list {
        margin-top: -2%;
        display: grid;
        margin-left: 10%;
        font-size: 2rem;
    }
    
    .repel {
        margin-left: 47%;
       margin-top: -24%;
       transform: perspective(1000px) rotateX(var(--_a,20deg)) rotateY(-5deg);
       transition: 1s;
    }
    
    .repel:hover {
        transform: perspective(1000px) rotateX(var(--_a,0deg)) rotateY(0deg);
        --x: 30rem;
    }
    
    .img {
        width: 900px;
        border-radius: 6px;
        box-shadow: 3px 1px 152px 8px rgba(0,0,0,1);
        z-index: 5;
    }
    
    .custom {
        position: absolute;
        margin-top: var(--x);
        z-index: -2;
        text-align: center;
        margin-left: 20rem;
        transition: 0.7s;
    }
    
    .contact {
        background-color: rgb(50, 50, 50);
        font-size: 2rem;
        border: none;
        transition: 0.5s;
        margin-left: 1rem;
        margin-top: 14rem;
    }
    
    .contact:hover {
        transform: scale(1.1);
        margin-left: 25px;
    }
}

@media (max-width: 700px) {
    @font-face {
        font-family: 'Product Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    }
    
    :root {
        --x: 0;
    }
    
    body {
        margin:0;
        overflow: hidden;
        overflow-y: scroll;
    }
    .wrapper {
        display: flexbox;
        width: 100%;
        height: 121%;
        position: absolute;
        background: linear-gradient(45deg, #428dff, #3a6ce0, #344cc0, #302ba0, #2a007e);
        background-size: 600% 100%;
        animation: gradient 16s linear infinite;
        animation-direction: alternate;
    }
    @keyframes gradient {
        0% {background-position: 0%}
        100% {background-position: 100%}
    }
    
    * {
        font-family: 'Product Sans';
        color: white;
    }
    
    h1 {
        margin-left: 10%;
        margin-top: 11%;
        font-size: 5.5rem;
        margin-bottom: -2%;
    }
    
    h2 {
        margin-left: 10%;
        font-size: 3rem;
    }
    
    h3 {
        margin-left: 10%;
        font-size: 2rem;
        margin-bottom: -1.4%;
    }
    
    
    
    .personalinfo {
        text-align: left;
        /* margin-left: -65%; */
    }
    
    .list {
        margin-top: -2%;
        display: grid;
        margin-left: 10%;
        font-size: 2rem;
    }
    
    .repel {
        justify-self: center;
        align-self: center;
        margin-left: 15%;
        margin-top: 5%;
       transform: perspective(1000px) rotateX(var(--_a,20deg)) rotateY(-5deg);
       transition: 1s;
    }
    
    .repel:hover {
        transform: perspective(1000px) rotateX(var(--_a,0deg)) rotateY(0deg);
        --x: 30rem;
    }
    
    .img {
        width: 400px;
        border-radius: 6px;
        box-shadow: 3px 1px 152px 8px rgba(0,0,0,1);
        z-index: 5;
    }
    
    .custom {
        position: absolute;
        margin-top: 15rem;
        z-index: -2;
        text-align: center;
        margin-left: 5rem;
        transition: 0.7s;
    }
    
    .contact {
        background-color: rgb(50, 50, 50);
        font-size: 2rem;
        border: none;
        transition: 0.5s;
        margin-left: 1rem;
        margin-top: 14rem;
    }
    
    .contact:hover {
        transform: scale(1.1);
        margin-left: 25px;
    }
}