* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: blue;
  margin: 70px;
  font-family: "Montserrat";
}

main {
  max-width: 1533px;
  background: linear-gradient(180deg, #223880, #146cd2, #0d9af4);
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);

  border-radius: 15px;
  display: grid;
  grid-template-columns: 50% 50%;

  & .profile {
    text-align: center;
    margin: 25px 0px;
    user-select: none;

    & .logo {
      padding-bottom: 20px;
    }

    & .photo {
      margin-left: 25px;
    }

    & .name {
      color: #fffffe;
      font-size: 43px;
      margin-top: -25px;
      margin-left: -3px;
    }

    & .title {
      color: #fffffe;
      font-size: 20px;
      margin-left: -5px;
    }

    & .icons {
      display: flex;
      gap: 12px;
      padding-right: 240px;
      padding-left: 240px;
      margin-bottom: -5px;
      justify-content: space-evenly;
      color: #fffffe;
      transition: trasform, fill 0.3 ease;
    }

    .icons a:hover {
      transform: translateY(-5px) translateX(1px) scale(1.3);
      transition: transform 0.5s ease;
    }

    .linkedin {
      position: relative;
      right: 12px;
    }

    .icons a:hover .linkedin {
      fill: #223880;
      transition: fill 0.5s ease;
    }

    .icons a:hover .email {
      fill: #db4a39;
      transition: fill 0.5s ease;
    }

    .icons a:hover .whats {
      fill: #25d366;
      transition: fill 0.5s ease;
    }

    .insta {
      position: relative;
      top: -5px;
      right: 5px;
    }

    .icons a:hover .insta {
      fill: #bc2a8d;
      transition: fill 0.5s ease;
    }
  }

  & .buttons {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    font-size: 28px;
    font-weight: bold;

    & .link-1 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-left: 40px;
      text-decoration: none;
      border-top-right-radius: 15px;
      background: #223880;
      color: #fde24f;
      transition: background 0.5s ease, transform 0.5s ease,
        box-shadow 0.5s ease;
    }
    .link-1:hover {
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
        -5px -5px 15px rgba(0, 0, 0, 0.1);
      transform: translateX(-70px) scale(1.2);
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    & .link-2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 40px;
      gap: 40px;
      justify-content: space-between;
      text-decoration: none;
      background: #fde24f;
      color: #223880;
      transition: background 0.5s ease, transform 0.5s ease,
        box-shadow 0.5s ease;
    }
    .link-2:hover {
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
        -5px -5px 15px rgba(0, 0, 0, 0.1);
      transform: translateX(-70px) scale(1.2);
      border-radius: 4px 0 0 4px;
    }

    & .link-3 {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 40px;
      justify-content: space-between;
      text-decoration: none;
      background: #bd5982;
      color: #00ebc7;
      transition: background 0.5s ease, transform 0.5s ease,
        box-shadow 0.5s ease;
    }
    .link-3:hover {
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
        -5px -5px 15px rgba(0, 0, 0, 0.1);
      transform: translateX(-70px) scale(1.2);
      border-radius: 4px 0 0 4px;
    }

    & .link-4 {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 40px;
      justify-content: space-between;
      gap: 85px;
      text-decoration: none;
      background: #00ebc7;
      color: #bd5982;
      transition: background 0.5s ease, transform 0.5s ease,
        box-shadow 0.5s ease;
    }
    .link-4:hover {
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
        -5px -5px 15px rgba(0, 0, 0, 0.1);
      transform: translateX(-70px) scale(1.2);
      border-radius: 4px 0 0 4px;
    }

    & .link-5 {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 40px;
      justify-content: space-between;
      text-decoration: none;
      background: #0d9af4;
      color: #1b2d45;
      transition: background 0.5s ease, transform 0.5s ease,
        box-shadow 0.5s ease;
    }
    .link-5:hover {
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
        -5px -5px 15px rgba(0, 0, 0, 0.1);
      transform: translateX(-70px) scale(1.2);
      border-radius: 4px 0 0 4px;
    }

    & .link-6 {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 40px;
      justify-content: space-between;
      text-decoration: none;
      border-bottom-right-radius: 15px;
      background: #fffffe;
      color: #1b2d45;
      transition: background 0.5s ease, transform 0.5s ease,
        box-shadow 0.5s ease;
    }
    .link-6:hover {
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
        -5px -5px 15px rgba(0, 0, 0, 0.1);
      transform: translateX(-70px) scale(1.2);
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    & a span {
      font-size: 14px;
      font-weight: normal;
      text-align: end;
      margin-right: 50px;
    }
  }
}