html {
    --dark: rgb(33,33,33);
    --grey: #ECECEC;
    --purple: #A675F5;
    --blue: #050542;
    --blue-50: rgba(5, 5, 66, 0.5);
    --green: #66E5BF;
    --yellow: #FFFC86;
    --radius: 1.5rem;
    --small-radius: 0.5rem;

    background: var(--dark);
    /* color: var(--dark); */
    margin: 0em;
    padding: 1em;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background: var(--grey);
    padding: 2rem 3rem;
    border-radius: var(--radius);
    color: var(--color);
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 1.2em;
    height: 90vh;
}

header{
    text-align: center;
    margin-bottom: 2rem;
}
h1{
    margin-bottom: 0.5rem;
}
h1+p{
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
    /* height: 100%; */
    height: calc(100% - 2rem - 2rem - 2rem - 2rem - 1rem);
    /* height: fit-content; */
    transition: 300ms;
}

section {
    position: relative;
    border-radius: var(--radius);
    padding: 2rem;
    overflow-y: scroll;
    transition: all 400ms;
}
section time{
    /* display: block; */
    background: var(--dark);
    border-radius: var(--small-radius);
    padding: 0.2em 0.8em;
    color: var(--grey);
    font-size: 0.8em;
}
section p{
    /* max-width: 30rem; */
}
section button{
    cursor: pointer;
    background: var(--buttoncolor);
    font-size: 1.2em;
    width: 5em;
    padding: 0.2em;
    border: 1px black solid;
    display: block;
    transition: all 400ms;
}
section button:hover{
    background: linear-gradient(110deg, red, orange, yellow, green, blue, purple);
    font-weight: bolder;
    transform: scale(1.1);
    /* color: white; */
}
.show{
    opacity: 1;
}
.hide{
   opacity: 0;
   height: 0;
}
.start{
    
}
button.close{
    position: absolute;
    top: 2.2em;
    right: 1.8em;
    width: 1.3em;
    height: 1.3em;
    font-size: 1em;
    background: none;
    color: var(--dark);
    border-radius: var(--small-radius);
    padding: 0;
}
button.close:hover{
    transform: none;
    font-weight: normal;
    background: var(--dark);
    color: var(--grey);
    cursor: pointer;
}

/* sections */
#round1 {
    background: var(--purple);
}
#round2 {
    background: var(--green);
}
#round3 {
    background: var(--yellow);
}

/* active classes on sections */
.round1-active{
    /* flex-grow: 14; */
    grid-template-columns: 3fr 0.5fr 0.5fr;
    #round1{
        font-size: 180%;
        padding: 2em;
    }
    /* padding: 2em; */
    #round2, #round3 {
        filter: opacity(10%);
        font-size: 25%;
    }
}
.round2-active{
    /* flex-grow: 14; */
    grid-template-columns: 0.5fr 3fr 0.5fr;
    #round2{
        font-size: 2em;
        padding: 2em;
    }
    #round1, #round3 {
        filter: opacity(0.2);
        font-size: 80%;
    }
}
.round3-active{
    /* flex-grow: 14; */
    grid-template-columns: 0.5fr 0.5fr 3fr;
    #round3{
        font-size: 2em;
        padding: 2em;
    }
    #round1, #round2 {
        filter: opacity(0.2);
        font-size: 80%;
    }
}

/* hover classes on sections */
.round1-hover{
  grid-template-columns: 1.5fr 1fr 1fr;
    #round1{
        font-size: 130%;
        /* padding: 2rem; */
        /* margin: 0 3rem; */
    }

}
.round2-hover{
  grid-template-columns: 1fr 1.5fr 1fr;
    #round2{
        font-size: 130%;
        /* padding: 2rem; */
        /* margin: 0 3rem; */
    }
}
.round3-hover{
    grid-template-columns: 1fr 1fr 1.5fr;
  
    #round3{
        font-size: 130%;
        /* padding: 2rem; */
        /* margin: 0 3rem; */
    }
}




.pingpong{
    background-image: url("pingpong.png");
    /* background-image: 🏆; */
}
.final{
    background-image: url("trophy.png");
}