/* small reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

/* Primary */

    --soft-blue: hsl(215, 51%, 70%);
    --cyan: hsl(178, 100%, 50%);

/* Neutral */

    --very-dark-blue-main: hsl(217, 54%, 11%); 
    --very-dark-blue-card: hsl(216, 50%, 16%); 
    --very-dark-blue-line: hsl(215, 32%, 27%); 
    --white: hsl(0, 0%, 100%);

/* linked colors */

    --body-color: var(--very-dark-blue-main);
    --card-color: var(--very-dark-blue-card);
    --h2-color: var(--white);
    --p-color: var(--soft-blue);
    --eth-color: var(--cyan);
    --days-color: var(--soft-blue);
    --creation-color: var(--soft-blue);
    --name-color: var(--white);
    --border-line-color: var(--very-dark-blue-line);
    --border-image-color: var(--white);
    --hover-color: var(--cyan);
}

/********** global style **********/
/********** global style **********/
/********** global style **********/

body {
    font-size: 18px;
    font-family: Outfit;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--body-color);
}

.container {
    width: 18.333rem;
    padding: 1.277rem 1.388rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--card-color);
    border-radius: 1rem;
}

/********** items style **********/
/********** items style **********/
/********** items style **********/

 /* big images */
.img-container img {
    border-radius: 0.4rem;
    display: block;
    width: 100%;
}

.img-container {
    position: relative;
}

.second-layout-img img {
    width: 2rem;
}

.second-layout-img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    background-color: hsla(178, 100%, 50%,50%);
    opacity: 0;
    transition: opacity 0.7s;
    cursor: pointer;
    border-radius: 0.4rem;
}

/* other text and small images */

h2 {
    font-size: 1.3rem;
    color: var(--h2-color);
    font-weight: 600;
    transition-duration: 600ms;   
    width: max-content;
  }
  
p {
    line-height: 1.6;
    font-size: 0.9rem;
    color: var(--p-color);
    font-weight: 300;
}

/* balance info */

.balance-info {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-line-color);
    padding-bottom: 0.7rem;
    justify-content: space-between;
    font-weight: 400;
}

.balance-eth {
    display: flex;
    gap: 0.5em;
}

.balance-days{
    display: flex;
    gap: 0.4rem;
}

.eth {
   color: var(--eth-color);
}

.balance-eth img {
    width: 0.8rem;
}

.days {
    color: var(--days-color);
    margin-left: auto;
}

.balance-days img {
    width: 1.5rem;
}

/* person info */

.person-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 300;
}

.person-info img {
    width: 2rem;
    border: 2px solid var(--border-image-color);
    border-radius: 50%;
}

.creation {
    color: var(--creation-color);
}

.name {
    color: var(--name-color);
    transition-duration: 600ms;   

}

/* hover effects */

h2:hover,
.name:hover {
    color: var(--hover-color);
    cursor: pointer;
    transition-duration: 500ms;
}

.container > img:hover {
    cursor: pointer;
}

.second-layout-img:hover {
    opacity: 1;
    transition: all 0.7s;
}