mystyle.css

*{
    /* border: 1px solid red; */
}
body{
    background-color: #262626;
    color: #fff;
}
.about-content{
    height: 60vh;
    display: flex;
    align-items: center;
    /* border: 1px solid red; */
    /* margin: 0 55px 0 10px; */
    /* margin-left: 10px; */
    /* margin-right: 55px; */
    margin-left: 10%;
    margin-right: 10%;
}
span{
    color: #f24405;
}
.gif-content{
    width: 100%;
}
.gif{
    width: 45%;
}
.text{
    width: 40%;
}
.title{
    font-size: 3em;
    margin-bottom: 0;
    font-weight: bold;
}
#geant{
    font-size: 3em;
    color: #f24405;
    animation: shake 1s infinite cubic-bezier(0.55, 0.06, 0.68, 0.19);
    -webkit-animation: shake 1s infinite cubic-bezier(0.55, 0.06, 0.68, 0.19);
    display: inline-block;
    transform-origin: bottom;
}
@keyframes shake {
    0%{
        transform:translateY(0);
        -webkit-transform:translateY(0);
        -moz-transform:translateY(0);
        -ms-transform:translateY(0);
        -o-transform:translateY(0);
}
    20%{
        transform:translateY(15px);
        -webkit-transform:translateY(15px);
        -moz-transform:translateY(15px);
        -ms-transform:translateY(15px);
        -o-transform:translateY(15px);
}   
    40%{
        transform:translateY(0);
        -webkit-transform:translateY(0);
        -moz-transform:translateY(0);
        -ms-transform:translateY(0);
        -o-transform:translateY(0);
}   
    60%{
        transform:translateY(10px);
        -webkit-transform:translateY(10px);
        -moz-transform:translateY(10px);
        -ms-transform:translateY(10px);
        -o-transform:translateY(10px);
}
    80%{
        transform:translateY(0);
        -webkit-transform:translateY(0);
        -moz-transform:translateY(0);
        -ms-transform:translateY(0);
        -o-transform:translateY(0);
}
    100%{
        transform:translateY(7px);
        -webkit-transform:translateY(7px);
        -moz-transform:translateY(7px);
        -ms-transform:translateY(7px);
        -o-transform:translateY(7px);
}
}

.text>p{
    margin-top: 0;
    margin-right: auto;
}

#skills::before{
        content: '';
        background-color: #f24405;
        display: block;
        height: 5px;
        width: 60px;
        margin-right: 172px;
}
 .skills-content h2{
        border: 1px solid #f24405;
        justify-content: center;
        align-items: center;
        border-radius: 36px;
        -webkit-border-radius: 36px;
        -moz-border-radius: 36px;
        -ms-border-radius: 36px;
        -o-border-radius: 36px;
        display: flex;
        margin-top: 10px;
        margin-bottom:10px;

        
}
#front{
    width: 20vw;
    height: 10vh;
    font-size: 1.5em;
}
#back{
    width: 24vw;
    height: 7vh;
    font-size: 1.5em;
}
#tools{
    width: 10vw;
    height: 7vh;
    font-size: 1.5em;
}
#mobile{
    width: 30vw;
    height: 7vh;
    font-size: 1.5em;
}
#data{
    width:15vw;
    height: 7vh;
    font-size: 1.5em;
}
.skills-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.skills-container{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f24405;
    margin: 80px 63px 100px 63px;
    padding-top: 10px;
}
.front-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.back-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.mobile-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.data-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.tools-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.icons{
    height: 8vh;
}
#i-front{
    display: flex;
    justify-content: space-between;
    width: 35vw;
    margin-top: 10px
}

#i-back{
    display: flex;
    justify-content: space-between;
    width: 24vw;
    margin: 10px auto;
}
#i-mobile{
    display: flex;
    justify-content: space-between;
    width: 25vw;
    margin: 10px auto;
}
#i-data{
    display: flex;
    justify-content: space-between;
    width: 10vw;
    margin: 10px auto;
}
#i-tools{
    display: flex;
    justify-content: space-between;
    width: 25vw;
    margin:10px auto;
}
@media screen and (width <= 972px) {
        .about-content{
            flex-wrap: wrap;
            height: max-content;
            margin: 0;
            justify-content: center;
            align-items: center;
        }
        .gif-content{
            height: 100vh;
            width: 100%;
        }
        
        .gif{
            width: 95%;
        }
        .text{
            text-align: center;
            width: 70%;
        }
        #front{
            width: 24vw;
            height: 7vh;
            font-size: medium;
        }
        #back{
            width: 25vw;
            height: 7vh;
            font-size: medium;
        }
        #tools{
            width: 12vw;
            height: 7vh;
            font-size: medium;
        }
        #mobile{
            width: 30vw;
            height: 7vh;
            font-size: medium;
        }
        #data{
            width:18vw;
            height: 7vh;
            font-size: medium;
        }
}
@media screen and (width <= 1358px) {
    #front,#back,#data,#mobile,#tools{
        font-size: 1.3em;
    }
}
@media screen and (width <=1098px){

    #i-front{
        width: 45vw;
    }
    
    #i-back{
        width: 33vw;
    }
    #i-mobile{
        width: 33vw;
    }
    #i-data{
        width: 18vw;
    }
    #i-tools{
        width: 40vw;
    }   
}
@media screen and (width <= 1228px) {
    #front,#back,#data,#mobile,#tools{
        font-size: medium;
    }
}
@media screen and (width <= 684px) {
            #front{
            width: 34vw;
            font-size: medium;
        }
        #back{
            width: 39vw;
            font-size: medium;
        }
        #tools{
            width: 25vw;
            font-size: medium;
        }
        #mobile{
            width: 45vw;
            font-size: medium;
        }
        #data{
            width:30vw;
            height: 7vh;
            font-size: medium;
        }
}
@media screen and (width <= 661px) {
    .title{
        margin: auto;
    }

    #i-front{
        display: flex;
        justify-content: space-between;
        min-width: 70vw;
    }
    
    #i-back{
        display: flex;
        justify-content: space-between;
        min-width: 63vw;
        margin: auto;
    }
    #i-mobile{
        display: flex;
        justify-content: space-between;
        min-width: 63vw;
        margin: auto;
    }
    #i-data{
        display: flex;
        justify-content: space-between;
        min-width: 48vw;
        margin:auto;
    }
    #i-tools{
        display: flex;
        justify-content: space-between;
        min-width: 70vw;
        margin:auto;
    }   
    .gif-content{
        height: 100vh;
        width: 100%;
    }
    
    .gif{
        width: 100%;
    }
}

@media screen and (width <=542px){
    #i-front,#i-data,#i-mobile,#i-tools,#i-back{
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 12px;
    }
    .icons{
        height: 6vh;
    }
    .gif-content{
        height: 100vh;
        width: 100vw;
    }
    
    .gif{
        width: 100vw;
    }
}

@media screen and (width <=422px) {
    .icons{
        height: 5vh;
    }

    #i-front,#i-data,#i-mobile,#i-tools,#i-back{
        display: flex;
        justify-content: center;
        gap: 6px;
    }
}
@media screen and (width<=842px) {
    #i-front{
        width: 55vw;
    }
    
    #i-back{
        width: 43vw;
    }
    #i-mobile{
        width: 43vw;
    }
    #i-data{
        width: 28vw;
    }
    #i-tools{
        width: 55vw;
    }      
}