/* 
   Author : Karibbean Creative
   Date : 25 Mars 2024 
*/

*, ::before, ::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Inter", sans-serif;
}

html {
   font-size: 62.5%;
}

body {
   background-color: #141414;
   color: #fff;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.container {
   background-color: #1f1f1f;
   width: 31rem;
   height: 50rem;
   border-radius: 1.5rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   position: relative;
}

/* =======================> Person Section */
.person {
   padding: 2rem;
}

img {
   width: 9rem;
   border-radius: 50%;
   display: block;
   margin: 0 auto;
}

h1 {
   font-size: 2.6rem;
   font-weight: 400;
   letter-spacing: 0.7px;
   text-align: center;
   padding: 1rem;
}

h2 {
   color: #c5f82a;
   font-size: 1.6rem;
   text-align: center;
}

/* =======================> Introduction Section */
p {
   font-size: 1.4rem;
   letter-spacing: 0.4px;
}

/* =======================> Links Section */
.links {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 90%;
   height: 25rem;
   margin-top: 2.4rem;
   text-align: center;
   font-weight: 700;
}

.link {
   color: #fff;
   text-decoration: none;
   background-color: #333;
   height: 4rem;
   border-radius: 0.8rem;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   font-size: 1.6rem;
   letter-spacing: 0.6px;
}

.link:hover {
   background-color: #C4F82A;
   color: #333;
   transition: all 0.5s ease-out;
}

/* =======================> Footer */
footer {
   margin: 1.5rem;
}

.attribution {
   font-size: 1.1rem;
   text-align: center;
}

.attribution a {
   color: #3e52a3;
}

.attribution a:hover {
   color: #C4F82A;
   transition: all 0.8s ease-out;
}


/* =======================> Media Queries Desktop */
@media only screen and (min-width : 1224px){
   .container {
      width: 40rem;
      border-radius: 1.5rem;
   }

   .links {
      width: 80%;
   }
}