@import url("common.css");

:root {
    --asset-background: url("../../assets/images/index/background.png");
    --asset-laptop: url("../../assets/images/index/laptop.png");
    --asset-easel: url("../../assets/images/index/easel.png");
    --asset-bucket: url("../../assets/images/index/bucket.png");
}

h1 {
    width: 100%;
    text-align: center;
    transform: translateY(15px);
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

h1.h1-a {
    transform: none;
    opacity: 1;
}

/* #big-image */
#big-image {
    height: 30em;
    width: 100%;
    text-align: center;
    margin-top: auto;
    background-image: var(--asset-background);
    background-size: cover;
    background-position: center;
}

#big-image>h1 {
    max-width: fit-content;
    height: 100%;
    margin: auto;
    font-size: max(10vw, 35px);
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: center;
}

div[alt=easel] {
    background-image: var(--asset-easel);
}

div[alt=laptop] {
    background-image: var(--asset-laptop);
}

div[alt=bucket] {
    background-image: var(--asset-bucket);
}

/* .pro */
.pro>div:first-child {
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
    width: max(min(100px, 10vw), 49px);
    height: max(min(100px, 10vw), 49px);
    display: inline-block;
}

.pro>div:not(div:first-child) {
    margin-left: 1vw;
    position: relative;
    display: inline-block;
    width: max(25vw, 160px);
}

.pro>div>span {
    display: block;
}

.pro>div>span:not(span:first-child) {
    font-size: min(max(2.8vw, 12px), 16px);
}

.pro>div>span:first-child {
    font-size: min(max(3.2vw, 16px), 23px);
    font-weight: bold;
}

.pro {
    max-width: fit-content;
    display: flex;
    align-items: center;
    margin: auto auto 1vh;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1.75s ease-in-out;
}

.pro:nth-of-type(even) {
    transition: opacity 1s ease-in-out, transform 1.75s ease-in-out;
}

.pro {
    background: linear-gradient(90deg, rgba(74, 212, 198, 1) 0%, rgba(40, 161, 88, 1) 50%, rgba(214, 205, 84, 1) 100%);
}

.pro:nth-of-type(2) {
    background: linear-gradient(90deg, rgba(69, 36, 115, 1) 0%, rgb(114, 79, 190) 39%, rgba(67, 50, 128, 1) 100%);
}

.pro:nth-of-type(3) {
    background: linear-gradient(90deg, rgba(128, 87, 156, 1) 0%, rgba(224, 121, 121, 1) 50%, rgba(255, 214, 156, 1) 100%);
}

.pro.pro-a {
    opacity: 1;
    transform: translateX(1.2vw);
}

.pro:nth-of-type(even).pro-a {
    transform: translateX(-1.2vw);
}