@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

main {
    font-family: 'Poppins', sans-serif;
    /* width: 100%; */
    max-width: 1920px;
    justify-items: center;
    display: grid;
    grid-gap: 5px;
    grid-template-areas: 
        "wear-title"
        "wear-picture"
        "wear-information"
        
}

main ul {
    list-style: square;
    padding: 0 50px;
}

.wear-facts {
    grid-area: wear-information;
}

.wear-image {
    grid-area: wear-picture;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

}

#face {
   max-width: 325px;
   margin: 10px 0 0 0;
}

#mask {
    max-width: 300px;
    position: absolute;
    top: 100px;
    animation-name: slider;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes slider{
    0% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30%);
    }
    60% {
        transform: translateY(-30%);
    }
    100% {
        transform: translateY(0);
    }
}

h1 {
    width: 100%;
    display: block;
    text-align: center;
    background-color: #06719C;
    color: white;
    padding: 15px;
    grid-area: wear-title;
}

h2 {
    padding: 10px;
}


p {
    padding: 10px;
}

table {
    background-color: #06719C;
    color: white; 
    margin: 15px 0;

}


th {
    border:  2px solid  #2B2C2E;
}

td {
    border: 2px solid  #2B2C2E;
    padding: 10px;
    font-size: .85;
    text-align: left;
    vertical-align: top;
}

.blue_table {
    background-color: white;
    color: #06719C;
    font-weight: 600;
}



@media only screen and (min-width: 481px) {
    
    main {
        grid-template-columns: 2fr, 1fr;
        grid-gap: 10px;
        grid-template-areas:
            "wear-title wear-title"
            "wear-information wear-picture"
    }

    @keyframes slider{
        0% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-78%);
        }

        60% {
            transform: translateY(-78%);
        }
        100% {
            transform: translateY(0);
        }
    }


    h1 {
        font-size: 1.75em;
    }

    .wear-image {
        position: relative;
        transform: scale(.5);

    }

    #face {
        max-width: 500px;
        margin: 0;
        
        /*position: absolute;
        top: 50px;*/
    }

    #mask {
        max-width: 450px;
        top: 275px;
    }
}