* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

:root {
    --soft-blue: #8bacda;
    --cyan: #00fff7;
    --transparent-cyan: rgba(0, 255, 247, 0.5);
    --very-dark-blue-main-BG: #0d192b;
    --very-dark-blue-card-BG: #14253d;
    --very-dark-blue-line: #2f415b;
    --final-fantasy: #fff;
}

body {
    background-color: var(--very-dark-blue-main-BG);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

html {
    font-size: 62.5%;
}

section {
    width: 35rem;
    background: var(--very-dark-blue-card-BG);
    padding: 2.4rem;
    border-radius: 1.6rem;
}

.equilibrium > img {
    width: 100%;
    border-radius: 0.8rem;
}
    
.description h1 {
    font-size: 2.2rem;
    color: var(--final-fantasy); 
    margin-bottom: 1.6rem;
}

.description p {
    font-size: 1.8rem;
    color: var(--soft-blue);
    font-weight: 300;
    margin-bottom: 2.4rem;
}

.ethereum p {
    color: var(--cyan);
    font-size: 1.6rem;
    font-weight: 600;
}

.time p {
    color: var(--soft-blue);
    font-size: 1.6rem;

}

.creator p {
    font-size: 1.6rem;
    color: var(--soft-blue);
}

.creator span {
    color: var(--final-fantasy);
}

.info {
    margin-bottom: 2.4rem;
    display: flex;
    justify-content: space-between;
}

hr {
    margin-bottom: 1.6rem;
    border: 0.1rem solid var(--very-dark-blue-line)
}

.creator img {
    width: 3.4rem;
    border: 0.1rem solid white;
    border-radius: 50%;
    margin-right: 1.6rem;
}

.ethereum, .time, .creator {
    display: flex;
    align-items: center;
}

.creator {
    display: flex;
}

.ethereum img {
    width: 1.2rem;
    margin-right: 0.8rem;

}

.time img {
    width: 1.6rem;
    margin-right: 0.8rem;
    height: 1.6rem;
}

.description h1:hover, .creator span:hover {
    color: var(--cyan);
    cursor: pointer;
}

.equilibrium-eye {
    position: absolute;
    background: var(--transparent-cyan);
    width: 100%;
    height: calc(100% - 3px);
    border-radius: 0.8rem;
    display: none;
    justify-content: center;
    align-items: center;
}

.equilibrium {
    position: relative;
    margin-bottom: 2.4rem;
}

.equilibrium:hover .equilibrium-eye {
    display: flex;
    cursor: pointer;
}

/* 1rem = 16px = 100% */