/*Keyframes*/
@keyframes jumping {
    30% {
        transform:translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}

/*Specific color to the nev menu section*/
nav > ul > li:nth-child(2) > a {
    color: rgb(133, 227, 246);
}

/*Base layout*/
#headline, #intro, #equipments {
    display: grid;
}

#equipments > *,
#headline > figure > img {
    margin: 0 auto;
}

#intro > p:nth-child(3),
#intro > p:last-of-type,
#equipments,
#instructions > p,
#hashtag,
td:last-of-type {
    text-align: center;
}

#intro,
#equipments {
    grid-gap: 1rem;
}

#intro > p:first-of-type,
#equipments > figure:last-of-type {
    align-self: center;
}

/*Common margins and paddings*/
h1,
#intro > p:first-of-type {
    padding: 10px;
}

#equipments,
#instructions p,
#hashtag {
    margin: 20px;
}

#intro,
table {
    margin: 10px;
}

#instructions > p:last-child,
#hashtag {
    padding: 20px;
}

/*Common sizes*/
#equipments figure:nth-child(2),
#equipments figure:last-of-type {
    width: 60%;
}

/*Common colors*/
#intro > p:first-of-type,
#instructions > p:last-child,
tr:nth-child(even) {
    background-color: rgb(147, 208, 219);
}

/*Headline style*/
#headline {
    grid-template-columns: 1fr;
}
#headline > * {
    grid-column: 1 / 2;
}

#headline figure {
    grid-row: 1 / 4;
}

#headline figure:first-of-type img {
    visibility: visible;
    display: block;
    margin-top: 10px;
    width: 40%;
}

h1 {
    grid-row: 3 / 5;
}
/*Headline styles ends*/

/*Scroll effect (desktop only)*/
#scroll {
    display: none;
}

/*Intro styles*/
#intro {
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas: 
            "introfig firstp"
            "midp midp"
            "lastp lastp";
}

#intro > figure {
    grid-area: introfig;
}

#intro > p:first-of-type {
    grid-area: firstp;
    border-radius: 10px;
}

#intro > p:nth-child(3) {
    grid-area: midp;
}

#intro > p:last-of-type {
    grid-area: lastp;
}
/*Intro styles ends*/

/*Equipment styles*/
#equipments {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
            "penimg papimg diceimg"
            "pentxt paptxt dicetxt";
}

#equipments figure:first-of-type {
    grid-area: penimg;
    width: 30%;
}

#equipments figure:nth-child(2) {
    grid-area: papimg;
    width: 45%;
}

#equipments figure:last-of-type {
    grid-area: diceimg;
}

#equipments p:first-of-type {
    grid-area: pentxt;
}

#equipments p:nth-child(5) {
    grid-area: paptxt;
}

#equipments p:last-of-type {
    grid-area: dicetxt;
}
/*Equipment styles ends*/

/*Instruction styles*/
#instructions > div {
    display: flex;
    align-items: center;
    margin: 20px 20px 10px 30px;
    gap: 1rem;
}

#instructions > p:last-child {
    border-radius: 40px 0 40px 0;
}

/*Hashtag comment and outline in intro*/
#hashtag {
    border-radius: 0 40px 0 40px;
    max-width: 75%;
}

#hashtag > p:first-child {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: .8em;
}

#hashtag > p:last-child {
    color: white;
}

#hashtag, span {
    background-color: rgb(17, 63, 63);
}

#hashtag p:first-child, span {
    color: rgb(192, 244, 202);
}

/*Table styles*/
table {
    border: 2px solid grey;
    border-collapse: collapse;
    margin-bottom: 30px;
    max-width: 80%;
}

tr:nth-child(odd) {
    background-color: rgb(228, 227, 227);
}

td {
    padding: 5px;
}

th:first-of-type, td:first-of-type {
    border-right: 1px solid rgb(45, 45, 45);
}

#hashtag,
table {
    margin: 20px auto;
}

/****Adjustments for the smallest screens****/
@media screen and (max-width: 340px) {
    #intro,
    #instructions > div {
        display: block;
    }

    #intro figure,
    #instructions > div > figure {
        width: 65%;
        margin: 0 auto;
    }

    #instructions > div {
        margin: 20px;
    }

    #instructions > div p {
        margin: 0;
        text-align: center;
    }

}

/******Desktop/ipad design******/
@media screen and (min-width: 600px) {
    #headline figure:first-of-type img {
        width: 30%;
    }

    main {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        grid-template-areas: 
                "headline headline"
                "intro intro"
                "equip equip"
                "score instructions"
                "score hashtag";
        grid-gap: 1rem;
    }

    #headline {
        grid-area: headline;
    }

    #intro {
        justify-items: center;
        grid-area: intro;
    }

    #intro p:first-of-type {
        max-width: 80%;
    }

    #equip-section {
        grid-area: equip;
        align-self: center;
    }

    #intstructions {
        grid-area: instructions;
    }

    #hashtag {
        grid-area: hashtag;
        height: 90px;
    }

    #score {
        grid-area: score;
    }

    #intro > figure {
        width: 60%;
    }
}

/***Design for the largest screen***/
@media screen and (min-width: 950px) {
    main {
        grid-template-columns: 1fr 1.2fr;
        grid-template-areas: 
                "headline headline"
                "scrolling scrolling"
                "scrolling scrolling"
                "intro equip"
                "score instructions"
                "score hashtag";
        grid-row-gap: 0;
    }

    #scroll {
        display: block;
        grid-area: scrolling;
        width: 50%;
        text-align: center;
        opacity: .6;
        animation: jumping 3s infinite;
        margin-top: 0;
        padding-bottom: 30px;
    }

    #scroll a {
        color: black;
    }

    #scroll:hover {
        opacity: 1;
    }

    #scroll figure {
        width: 10%;
    }

    h1,
    #scroll,
    #scroll figure {
        margin: 0 auto;
    }

    #headline {
        margin-bottom: 0;
    }

    #headline figure:first-of-type img {
        width: 25%;
    }

    #intro > figure {
        width: 100%;
    }

    #intro p:first-of-type {
        max-width: 100%;
    }

    h1 {
        max-width: 70%;
    }
    
}