@import url("style.css");

#home-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    width: 70%;
}

#home-section-item {
    grid-column-start: 1;
    grid-column-end: 2;
    box-sizing: border-box;
    /* padding: 0 5vw; */
}

#home-section-item3 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    width: 90%;
    height: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: min(2vw, 28px);
}


#home-section-item3 h1 {
    color: white;
    margin: 5%;
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    border-radius: min(1vw, 14px);
    font-style: italic;
}


#home-button {
    grid-column-start: 1;
    grid-column-end: 2;
    justify-self: flex-start;
    margin-top: 1.5vw;
    display: flex;
    flex-direction: row;
}


.home-btn {
    width: min(10vw, 140px);
    height: min(3vw, 42px);
    border-radius: min(1vw, 14px);
    background-color: var(--primary-color);
    border: none;
    cursor: pointer;
    transition: transform .2s;
    transition-timing-function: ease-out;
    margin: 0 1vw 4vh 0;
}

.home-btn2 {
    width: min(10vw, 140px);
    height: min(3vw, 42px);
    border-radius: min(1vw, 14px);
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid var(--primary-color);
    cursor: pointer;
    transition: transform .2s;
    transition-timing-function: ease-out;
    margin-bottom: 4vh;
}

button:hover {
    transform: scale(1.05);
}

.home-btn strong {
    color: white;
}

#checkbox:checked+main section form .home-btn {
    background-color: white;
}

#checkbox:checked+main section form .home-btn strong {
    color: var(--primary-color);
}

#checkbox:checked+main section form .home-btn2 {
    border: 1px solid white;
}

#checkbox:checked+main section form .home-btn2 strong {
    color: white;
}

.home-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 80%;
    justify-content: center;
    align-content: center;
    column-gap: min(2vw, 28px);
    padding-bottom: min(5vw, 70px);
}

.home-grid2-item {
    -ms-grid-row-span: 2;
    background-color: blueviolet;
    border-radius: min(1vw, 14px);
    text-align: center;
    color: white;
}

.home-hello {
    margin: 5%;
}

#home-section #home-section-item h1 b {
    animation-name: colorchange;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#checkbox:checked+main #home-section #home-section-item h1 b {
    animation-name: colorchangedark;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes colorchange {
    0% {
        color: var(--secondary-color);
    }

    25% {
        color: var(--third-color);
    }

    50% {
        color: var(--primary-color);
    }

    100% {
        color: var(--secondary-color);
    }
}

@keyframes colorchangedark {
    0% {
        color: var(--secondary-color);
    }

    25% {
        color: var(--third-color);
    }

    50% {
        color: white;
    }

    100% {
        color: var(--secondary-color);
    }
}

@media only screen and (max-width: 480px) {
    #home-section {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr 1fr 1fr;
        align-items: normal;
        width: 100%;

    }

    #home-button {
        grid-row-start: 3;
        grid-row-end: 4;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }


    #home-button form button {
        font-size: 1.4rem;
    }

    #home-section-item {
        padding-bottom: 5vw;
    }

    #home-section-item3 {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
        padding-bottom: 5vw;
    }

    #home-section-item3 h1 {
        border-radius: 5vw;
    }

    .home-btn {
        width: 40vw;
        height: 15vw;
        border-radius: 5vw;
        margin-top: 5vw;
    }

    .home-btn2 {
        width: 40vw;
        height: 15vw;
        border-radius: 5vw;
        margin-bottom: 5vw;
    }

    .home-grid2 {
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        gap: 10vw;
    }
}