@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
}

.container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #242526; */
    background-color: #E4E6EB; 
    transition: background-color 400ms ease-in-out;
}

.card{
    background-color: #8899A6;
    width: 20rem;
    height: 25rem;
    border-radius: 1rem;
    box-shadow: 10px 10px 69px 0px rgba(0,0,0,0.75);
    transition: background-color 400ms ease-in-out;
}

.image-container{
    width: 100%;
    height: 65%;
    background-image: url("https://images.unsplash.com/photo-1513258496099-48168024aec0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
    background-position: center;
    background-size: 30rem;
    background-position: top;
    border-bottom-left-radius: 5rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    transition: background-size 400ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.image-container:hover{
    background-size: 36rem;
}

.text-region
{
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 1rem;
    color: snow;
}

.top{
    font-size: 1.4rem;
    color: #0077b5;
}

.top i,.bottom span:nth-child(2) {
    transition: color 50ms ease-in-out,transform 100ms ease-in-out;
}

.top i:hover{
    cursor: pointer;
    color: white;
    transform: scale(1.1);
}

.middle{
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
}

.bottom{
    font-weight: 300;
    font-size: 1rem;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(98, 33, 219);
    transition: color 400ms ease-in-out;
}

.bottom span:nth-child(2){
    font-weight: 800;
    font-size: 1.3rem;
}

.bottom span:nth-child(2):hover{
    cursor: pointer;
    transform: scale(1.1);
    color: rgb(228, 90, 65);
}

/* theme toggling */
input{
    display: none;
}

label{
    position: absolute;
    left: 50%;
    top: 5%;
    font-size: 2rem;
    -webkit-tap-highlight-color: transparent;
}

label:hover{
    cursor: pointer;
}

label span:nth-child(1){
    position: absolute;
    opacity: 1;
    transition: opacity 100ms ease-in-out,color 200ms ease-in-out 50ms;
}

label span:nth-child(2){
    position: absolute;
    opacity: 0;
}

input:checked ~ label span:nth-child(1){
    opacity: 0;
}

input:checked ~ label span:nth-child(2){
    opacity: 1;
    color: white;
    transition: opacity 100ms ease-in-out,color 200ms ease-in-out 50ms;
}

input:checked ~ .container{
    background-color: #242526;
}

input:checked ~ .container .card{
    background-color: #22303c;
}

input:checked ~ .container .card .text-region .bottom{
    color: rgb(162, 120, 240);
}

@media (max-width: 576px) {

    .card{
        width: 15rem;
        height: 20rem;
    }

    .image-container{
        background-size: 25rem;
    }

    .image-container:hover {
        background-size: 30rem;
    }
    .middle{
        font-size: 1rem;
    }

    .bottom{
        width: 80%;
    }
    
}

@media (max-height: 580px){
   label{
       left: 80%;
   }
}