/************ Generall ************/
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    user-select: none;
    font-family: 'Montserrat', sans-serif;
}

html{
    color-scheme: dark;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--grey-1);
}

/************ Main Style ************/
main{
    width: 50vw;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg,  var(--grey-1-5) 0%, var(--grey-2) 100%);
    border-radius: 1rem;
    box-shadow: 0 0 1rem 0.5rem var(--shadow);
    position: relative;
    transition: all 0.2s ease;
}
#start, #mode, #game, #finishedRound{
    flex-direction: column;
    width: fit-content;
    transition: 0.4s all ease;
}

/*---------- Start ----------*/
#start{
    height: 40vh;
    justify-content: center;
}

#start .buttons div{
    width: fit-content;
    display: grid;
    padding-block: 4rem;
    place-content: center;
    text-transform: uppercase;
    font-family: 'Six Caps', sans-serif;
}
#start .buttons p{
    width: fit-content;
}


/*---------- Mode ----------*/
#mode{
    padding: 2vw;
}

/*---------- Game ----------*/
#game{
    color: var(--color-contrast);
    background-color: var(--grey-2);
    padding-block: 3vh;
    z-index: 5;
    width: 100%;
    border-radius: 1rem;
}

#game #input{
    min-width: 100%;
    font-size: 2rem;
    text-align: center;
    margin-block: 1rem;
    border: none;
    color: var(--color-contrast);
    background: var(--grey-1-5);
    border-radius: .2rem;
    box-shadow: 0 0 .2rem .2rem var(--grey-1-5) inset;
    outline: .1rem solid var(--grey-5);
    border-bottom: .2rem solid transparent;
    transition: 0.2s ease all;
}
#game #input:focus{
    outline: none;
    border-bottom: .15rem solid hsl(9, 100%, 60%);
}

#game #content{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 25vh;
    width: 100%;
}

#game #content h3{
    font-size: 1.3rem;
    height: fit-content;
    min-width: 100%;
    margin-top: auto;
}
#game #content div img{
    height: 20vh;
    box-shadow: 0.3rem 0.3rem 0.2rem 0.2rem var(--grey-1-5);
}
#game #content div{
    position: absolute;
    width: auto;
    margin-block: 2vh;
    transition: all 1s ease;
}
#game #content.big{
    height: 15vh;
}
#game #content.big div h3{
    font-size: 3rem;
    color: transparent;
    background: linear-gradient(90deg, hsl(14, 100%, 60%) 0%, hsl(14, 100%, 50%) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
#game #content.big div img{
    display: none;
}

#game > div{
    width: 100%;
    display: grid;
    justify-content: center;
}
#game div[data-position="show"]{
    animation: in 1.3s forwards;
    z-index: 2; 
}
#game div[data-position="hidden"]{
    animation: out 1.3s forwards;
    z-index: 1;
}

#game h2{
    font-family: 'Bebas Neue', cursive;
    font-size: 2rem;
    letter-spacing: 0.1rem;
}
#game h2, #game h3{
    text-align: center;
}

#game #score{
    text-align: center;
}


/*---------- Scroll Text ----------*/

/* #region*/

#scroll-container {
    border: 3px solid black;
    border-radius: 5px;
    overflow: hidden;
  }
  
  #scroll-text {
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
  }
  
  /* for Firefox */
  @-moz-keyframes my-animation {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-100%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(-100%); }
  }
  
  @keyframes my-animation {
    from {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
/* #endregion */


/*---------- Buttons ----------*/
.buttons{
    display: flex;
    justify-content: center;
    width: 100%;
}
.buttons i, .buttons > p, .buttons div, .buttons a{
    width: 4vw;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem;
    margin: 1rem;
    margin-bottom: 2rem;
    text-align: center;
    border-radius: 1rem;
    color: var(--grey-2);
    background-color: var(--color-accent);
    border: 0.2rem solid var(--color-accent);
    position: relative;
    transition: 0.2s all ease;
}
.buttons p{
    width: 6.5vw;
    flex-grow: 1;
}
.buttons a{
    border: var(--grey-3);
    color: var(--color-contrast);
    background-color: 0.2rem solid var(--grey-3);
}
.buttons i{
    background-color: var(--grey-3);
    color: var(--color-contrast);
    border: 0.2rem solid var(--grey-3);
}
.buttons i:hover, .buttons > p:hover, .buttons div:hover{
    cursor: pointer;
    color: var(--color-accent);
    background: var(--grey-2);
}
.buttons i:hover, #game .buttons p:hover{
    color: var(--color-accent);
}

.back, .hideButton{
    position: absolute;
    top: .2vw;
    left: .2vw;
    font-size: 1.5rem;
    transition: 0.2s all ease;
    padding: 1rem;
    cursor: pointer;
    border-radius: 50%;
    color: var(--grey-5);
}
.back:hover, .hideButton:hover{
    color: var(--color-accent);
}
.hideButton{
    left: 46vw;
}


/*---------- Selector ----------*/
.selector{
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    font-size: 1.2rem;
    margin-block: 1rem;
    background-color: var(--grey-2);
    padding: .2rem;
    border-radius: 1.5rem;
}
.selector p{
    font-size: 1.5rem;
    background-color: var(--grey-1-5);
    color: var(--grey-5);
    padding: 1vw 1vw;
    text-align: center;
    border-radius: 1vw;
    transition: 0.4s all ease;
    position: relative;
    margin: .5vw;
    cursor: pointer;
}
.selector p.selected{
    color: var(--color-accent);
    background-color: var(--grey-1);
    outline: .1rem solid var(--color-accent);
}
.selector p:hover{
    color: var(--color-contrast);
    background-color: var(--grey-1-5);
}
.selector p.selected:hover{
    color: var(--color-accent);
    background-color: var(--grey-1);
}

.continent{
    grid-template-columns: 1fr 1fr 1fr;
}
.continent p:first-of-type{
    grid-area: 3/1/3/4;
}

/*---------- Settings ----------*/
#settings{
    color: var(--color-contrast);
    position: absolute;
    left: 0;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    background-color: var(--grey-2);
    height: 50vh;
    transition: all .8s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    padding: .5rem;
}
#settings[data-state="close"]{
    cursor: pointer;
    max-width: 3vw;
    transition-delay: .4s;
}
#settings[data-state="open"]{
    max-width: 40vw;
    padding-right: 1rem;
}

#settings section{
    padding-inline: 1rem;
    margin-block: 1rem;
}
#settings section div:not(.toggle){
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-block: .1rem;
}

#settings input{
    background-color: var(--grey-2);
    text-align: center;
}

#setting section > h3{
    text-transform: uppercase;
}
#settings h3{
    text-transform: uppercase;
}

#settings .heading{
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-top: .5rem;
}

#settings .heading p{
    transition: all .5s;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
}
#settings[data-state="close"] .heading p{
    rotate: -90deg;
    transform-origin: center center;
    transition-delay: .5s;
}
#settings[data-state="open"] .heading p{
    transform-origin: top right;
    margin-block: 0;
    transition-delay: .5s;
}

#settings .hidden{
    transition: all 1s;
    flex-direction: column;
}
#settings[data-state="close"] .hidden{
    height: 0;
    opacity: 0;
}
#settings[data-state="open"] .hidden{
    height: 100%;
    opacity: 1;
    transition-delay: .8s;
}

.info-popup{
    color: var(--gray-600);
    width: fit-content;
    position: relative;
    
    cursor: pointer;
}
.info-popup:hover::after{
	scale: 1;
  opacity: 1;
}
.info-popup::after{
    transition: all .3s;
	scale: 0;
    opacity: 0;
    
    content: attr(data-text);
    position: absolute;
/*     transform: translateX(50%);
    right: 50%; */
    bottom: 100%;
  
	font-size: 1.2rem;
	font-family: calibri, sans-serif;
	line-height: 130%;
	color: var(--color-contrast);
	background-color: var(--grey-4);
	box-shadow: 0 0 .3rem .3rem rgba(0, 0, 0, 0.3);
  
	white-space: pre-wrap;
	
	width: max-content;
	max-width: 15vw;
    padding: .5rem;
  
	pointer-events: none;

    z-index: 100000;
}

/*---------- Toggle ----------*/
.toggle{
    aspect-ratio: 1.8/1;
    background-color: gray;
    height: 1.6rem;
    border-radius: 1.3rem;
    padding: .25rem;
    box-sizing: border-box;
    transition: all .3s;
    cursor: pointer;
}
.toggle::before{
    content: " ";
    border-radius: 50%;
    background-color: black;
    aspect-ratio: 1;
    height: 100%;
    display: block;
    margin-left: 0%;
    transform: translateX(0%);
    transition: all .3s ease-in-out;
}
.toggle.on::before{
    margin-left: auto;
    margin-left: 100%;
    transform: translateX(-100%);
}
.toggle.on{
    background-color: tomato;
}

/*---------- Finished & Back Up ----------*/
.inRoundWindow{
    background: linear-gradient(45deg, var(--grey-1-5) 0%, var(--grey-2) 100%);
    text-align: center;
    flex-direction: column;
}
.inRoundWindow h2{
    margin-block: 1rem;
    font-size: 2.5rem;
    color: var(--color-accent);
}
.inRoundWindow > p{
    color: var(--color-contrast);
    margin-bottom: 2rem;
    font-size: 1rem;
}
.inRoundWindow .buttons p{
    font-size: 1.2rem;
    background: var(--grey-2);
    color: var(--color-accent);
}
.inRoundWindow .buttons p:hover{
    background: var(--color-accent);
    color: var(--grey-2);
}

/************ Imports ************/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Six+Caps&display=swap');

/************ Keyframes ************/
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes in {
    from{
        transform: translateX(300%);
        opacity: 1;
    }
    to{
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes out {
    from{
        transform: translateX(0%);
        opacity: 1;
    }
    to{
        transform: translateX(-300%);
        opacity: 1;
    }
}

/************ Responsive ************/
@media (max-width: 1150px) { /*pc*/
    main{
        width: auto;    
    }
    .hideButton{
        left: 85%;
    }
}

@media (max-width: 700px) { /*phone*/
    main{
        width: 90%;
    }

    /*---------- Start ----------*/
    #start{
        height: fit-content;
    }
    #start .buttons, #mode .buttons{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    #start .buttons div{
        font-size: 1.2rem;
    }

    /*---------- Mode ----------*/
    #mode{
        font-size: 1rem;
        padding: 1rem;
        padding-top: 5vh;
    }
    #mode p{
        font-size: 1rem;
    }
    #mode .buttons{
        margin-block: .8rem;
        flex-direction: row;
        border-radius: .3rem;
    }
    #mode .buttons p{
        width: 80%;
        margin-block: auto;
        padding: 1vw 0.5vw;
    }
    #mode .selector{
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        border-radius: .3rem;
    }
    #mode .selector p{
        padding-inline: 1rem;
        margin: 0.2rem;
        border-radius: .3rem;
    }
    #mode .continent p:first-of-type{
       grid-area: 1/1/2/3;
    }

    /*---------- Game ----------*/
    #game h2{
        font-size: 1.5rem;
    }
    #game #score{
        font-size: 0.8rem;
        width: 100%;
    }
    #game #content div img{
        height: 75%;
    }
    #game #content{
        height: 21vh;
    }
    #game #input{
        font-size: 1.2rem;
    }
    #game .buttons i{
        width: 5vw;
        font-size: 1rem;
        font-weight: bold;
        padding: 1rem;
        margin: 1rem;
        margin-bottom: 2rem;
        text-align: center;
        border-radius: 1rem;
        position: relative;
        transition: 0.2s all ease;
    }
    .hideButton{
        left: 70vw;
    }
    #content:not(.big){
        margin-block: 2rem;
    }
    #game #content.big div h3{
        font-size: 2rem;
    }
    
    /*---------- Settings ----------*/
    #settings{
        display: none;
        opacity: 0;
    }
}

/************ Variables ************/
:root {
    --color-accent: tomato;
    --shadow: hsl(0, 0%, 7%);
    --grey-1:hsl(0, 0%, 12%);
    --grey-1-5:hsl(0, 0%, 16%);
    --grey-2:hsl(0, 0%, 20%);
    --grey-3:hsl(0, 0%, 27%);
    --grey-4: hsl(0, 0%, 35%);
    --grey-5: hsl(0, 0%, 43%);
    --color-contrast: hsl(0, 0%, 100%);
}