:root {
    --section-cqw-font-size: 5.3cqw;
}

main {
    background-color: rgb(255, 255, 255);
    background-color: #f1f1f1;
    background-color: #303030;
    color: rgb(24, 24, 24);
    padding: 50px;
    position: relative;
    display: grid;
    justify-content: center;
    align-items: space-around;
    grid-template-columns: repeat(auto-fill, 300px);
    grid-template-rows: max-content;
    /* grid-template-columns: repeat(auto-fill, 330px); */
    /* overflow-y: scroll; */

    font-size: 0px;

    /* background-color: greenyellow; */
}

/* main > *:nth-child(2n+1) {
    background-color: rgb(255, 168, 168);
    background-color: greenyellow;
}

main > *:nth-child(2n+1):hover {
    background-color: rgb(255, 168, 168);
    background-color: aliceblue;
} */


section {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 20px;
    margin-top: 30px;
    padding: 20px;
    color: rgb(37, 37, 37);
    background-color: rgba(127, 255, 212, 0);
    background-color: var(--layout-secondary-background-color-light);
    box-shadow: 0px 0px 13px 5px rgb(255, 133, 133);
    box-shadow: 0px 0px 3px 3px rgb(133, 255, 208);
    box-shadow: 0px 0px 7px 1px rgb(133, 255, 208);
    box-shadow: 0px 0px 7px 1px rgb(248, 255, 252);
    border-radius: 13px;
    /* height: 600px; */
    /* height: 390px; */
    aspect-ratio: .6;
    transition-property: background-color, box-shadow; 
    transition-duration: 1s;

    /* aspect-ratio: .59; */
    /* box-shadow: 0px 0px 10px 3px greenyellow; */
    
}

section:hover {
    background-color: aliceblue;
    color: rgb(31, 31, 31);
    transition: 1s;
    box-shadow: 0px 0px 23px 5px rgb(255, 59, 157);
    box-shadow: 0px 0px 33px 7px rgb(133, 255, 208);
}

section>p {
    gap: 1em;
    padding: 15px;
    border-radius: 10px;
    background-color: rgb(221, 221, 255);
    background-color: aliceblue;
    color: white;
    transition-property: background-color, color; 
    transition-duration:  .3s;
    border: 1px solid transparent;
    background-color: var(--layout-background-color-light);
    font-size: var(--section-cqw-font-size);
}


/* section:has(p:hover) > p:not(:hover) {
    opacity: .3;
} */

section p:hover {
    color: rgb(255, 217, 0);
    color: orange;
    color: black;
    color: orangered;
    color: rgb(43, 43, 43);
    /* font-weight: bold; */
    background-color: rgb(29, 29, 29);
    background-color: rgb(202, 230, 255);
    background-color: aliceblue;
    background-color: rgb(253, 253, 253);
    border: 1px solid rgb(218, 218, 218);
}


section>*:last-child {
    margin-top: auto;
}

/* .container:has(p:hover) p:not(:hover) {
    opacity: .3;
    } */

section input {
    font-size: 4.5cqw;
    width: 35px;
    height: 35px;
    border-radius: 50px;
    transition-property: width, height;
    transition-duration: 1s;
    padding: 10px;
    color: transparent;
    align-self: end;
    border: 1px solid aquamarine;
    background-color: var(--layout-secondary-background-color-light);
}

section input:hover {
    width: 30%;
    border: 1px solid orange;
    border: 1px solid orange;
    border: 1px solid aquamarine;
    outline: 1px solid aquamarine;
    border: 1px solid rgb(218, 218, 218);
    outline: 1px solid rgb(218, 218, 218);
}

section input::placeholder {
    color: transparent;
}

section input:hover::placeholder {
    color: orange;
    color: orangered;
    color: rgb(110, 110, 110);
}

section input:focus {
    color: orange;
    color: orangered;
    color: rgb(70, 70, 70);
    border: 1px solid orange;
    outline: 1px solid orangered;
    border: 1px solid aquamarine;
    outline: 1px solid aquamarine;
    border: 1px solid rgb(218, 218, 218);
    outline: 1px solid rgb(218, 218, 218);
    /* background-color: var(--layout-secondary-background-color-light); */
    color: rgb(228, 228, 228);
    width: 100%;
}

section input:focus::placeholder {
    color: rgb(184, 184, 184);
}