:root{
      --green: #4deeea;
      --black: #373B40;
      --github: #333333;
      --twitter: #1da1f2;
      --linkedin: #0077B5;
      --medium: white;
      --mail: #ff0000;
      --codepen: #333333;
      --cv: white;
      --html5: #f06529;
      --css3: #2965f1;
      --js: #f0db4f;
      --git: #F03C2E;
      --wordpress: #00749A;
}
body{
      width: 100%;
      height: 100vh;
      background-color: var(--black);
      display: grid;
      grid-template-columns: 5% 55% 40%;
}
.login-animation-container{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
}
.login-animation-container p{
      color: var(--green);
      font-weight: bold;
}
.personal-infos-container{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      opacity: 0;
}
.personal-infos-container .img-container{
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
}
.personal-infos-container .img-container::before{
      content: "";
      top: 50%;
      left: 50%;
      height: 320px;
      width: 280px;
      position: absolute;
      background-color: var(--green);
      animation: imgContainerAnimation 2s linear infinite;
      border-radius: 50%;
      z-index: 1;
}
.personal-infos-container .img-container::after{
      content: "";
      position: absolute;
      border-radius: 50%;
      inset: 5px;
      background-color: var(--black);
      z-index: 1;
}
@keyframes imgContainerAnimation{
      0%{
            transform: translate(-50%,-50%) rotate(0deg);
      }
      100%{
            transform: translate(-50%,-50%) rotate(360deg);
      }
}
.personal-infos-container .img-container img{
      width: 320px;
      height: 320px;
      border-radius: 50%;
      z-index: 3;
      padding: 48px;
}
.personal-infos-container .content{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5vh;
      width: 100%;
      height: 10vh;
}
.personal-infos-container .content div{
      width: 20%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 20px;
      color: white;
      font-weight: normal;
      cursor: pointer;
}
.personal-infos-container .content h4{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-weight: normal;
}
.personal-infos-container .content h4::after{
      content: "";
      display: inline-block;
      width: 50%;
      height: 4px;
      margin-top: 1vh;
      background-color: var(--green);
      border-radius: 16px;
      transition: 0.5s all ease;
}
.personal-infos-container .content div p {
      color: var(--green);
      margin-top: 1vh;
      font-weight: bold;
}
.personal-infos-container .content div:hover h4::after{
      width: 100%;
}
.social-media-container{
      border-right: 2px solid var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      opacity: 0;
}
.social-media-container div{
      margin-top: 3vh;
}
.social-media-container div:first-child{
      margin-top: 0;
}
.social-media-container div a i{
      font-size: 32px;
      color: var(--green);
      transition: 0.3s all ease;
}
.github:hover a i{
      color: var(--github);
}
.twitter:hover a i{
      color: var(--twitter);
}
.linkedin:hover a i{
      color: var(--linkedin);
}
.medium:hover a i{
      color: var(--medium);
}
.mail:hover a i{
      color: var(--mail);
}
.codepen:hover a i{
      color: var(--codepen);
}
.cv:hover a i{
      color: var(--cv);
}
.about-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
}
.about-container .name{
      font-size: 48px;
      color: var(--green);
      font-weight: bold;
}
.about-container .job-title{
      font-size: 24px;
      color: white;
}
.about-container .introduction{
      margin-top: 5vh;
      font-size: 20px;
      color: white;
      max-width: 80%;
}
.about-container .technologies{
      margin-top: 5vh;
      width: 80%;
      font-size: 20px;
      color: white;
}
.about-container .technologies .icons{
      display: flex;
      align-items: center;
      margin-top: 2vh;
}
.about-container .technologies .icons div{
      margin-right: 1em;
      cursor: pointer;
}
.about-container .technologies .icons div i{
      font-size: 40px;
      color: var(--green);
      transition: 0.5s all ease;
}
.about-container .technologies .icons .html:hover i{
      color: var(--html5);
}
.about-container .technologies .icons .css:hover i {
      color: var(--css3);
}
.about-container .technologies .icons .js:hover i{
      color: var(--js);
}
.about-container .technologies .icons .git:hover i{
      color: var(--git);
}
.about-container .technologies .icons .wordpress:hover i{
      color: var(--wordpress);
}
@media screen and (max-width: 1350px){
      .social-media-container div a i,
      .about-container .technologies .icons div i{
            font-size: 24px;
      }
}
@media screen and (max-width: 900px){
      .personal-infos-container .content{
            flex-direction: column;
            height: auto;
      }
      .personal-infos-container .content div{
            margin-top: 3vh;
      }

}
@media screen and (max-width: 800px){
      .personal-infos-container .img-container img{
            width: 240px;
            height: 240px;
            padding: 48px;
      }
      .personal-infos-container .img-container::before{
            height: 240px;
            width: 200px;
      }
}
@media screen and (max-width: 750px){
      body{
            display: flex;
            align-items: center;
            flex-direction: column;
      }
      .social-media-container{
            flex-direction: row;
            margin-top: 3vh;
            width: 100%;
            border: none;
            border-bottom: 2px solid var(--green);
            padding-bottom: 2vh;
      }
      .social-media-container div{
            margin-right: 5%;
            margin-top: 0;
      }
      .about-container{
            margin-top: 2vh;
      }
      .personal-infos-container {
            margin-top: 2vh;
      }
      .personal-infos-container .content{
            flex-direction: row;
      }
      .personal-infos-container .content div{
            width: 40%;
      }
}