* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




/* //////////////////// MOBILE VERSION //////////////////// */


@media only screen and (orientation: portrait) {

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #91e2ff 30%, #d7f4ff 90%);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    font-size: 18px;
    color: #151515;
}

    

.banner {
    display: block;
    background-image: url('banner.png');
    height: 26vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}




.content-container {
    display: block;
    position: relative;
    bottom: 10vh;
    margin: 0 0 50px 0;
}



/* ---------HEADER--------- */


.header {
    display: block;
    margin: 0 4vw;
    padding: 2vh 0vw;
    border-radius: 8px;
    background-color: #1E1E1E;
}


.logo {
    display: block;
    margin: 0 auto 0 auto;
	text-align: center;
	max-width: 100%;
	max-height: 10vh;
    
}



/* ---------MAIN CONTAINER--------- */



.main-container {
    display: block;
    margin: 1.5vh 4vw 0vh 4vw;
    border-radius: 8px;
    background-color: #ffffff;
}



.top-bar {
    display: block;
    padding: 4px 0;
    border-radius: 8px 8px 0px 0px;
    background-color: #1E1E1E;
}



/* ---------QUIZ CONTAINER--------- */


.qz-container {
    display: block;
    background-color: #ffffff;
    margin: auto;
    padding: 0;
    border-radius: 8px;
}



.ebox {
    margin: auto;
    padding: 20px 0 40px 0;
    border-radius: 0px 0px 8px 8px;
    background-color: #ffffff;
    align-items: center;
    text-align: center;    
}




.ebox h1 {
    display: block;
    text-align: center;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.26px;
    margin: 0;  
    color: #1E1E1E;	
}


.ebox h2 {
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.26px;
    margin: 0;  
    color: #1E1E1E;	
}


.hr {
    display: block;
    width:80%;
    height:1.5px;
    border-width:0;
    text-align: center;
    margin: 20px auto;
    color:#E9E9E9;
    background-color:#E9E9E9;
}



.notice {
    display: none;
}


.QR-code {
    display: none;
}


.grid-container {
    display: grid;
    grid-template-columns: 7% 93%;
    column-gap: 0px;
    row-gap: 20px;
    background-color: #ffffff;
    margin: 0;
    padding: 20px 10px 20px 10px;
    align-items: start;
}


.grid-item {
    display: inline-block;
    background-color: #ffffff;
    border: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    text-align: left;
    vertical-align: middle;
    line-height: 1.2;
}


.icon {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
}


.ebox-button {
    display: block;
    margin: auto;
    line-height: 13.6vw;
    width: 63.2vw;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 4.53333vw;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 12vw;
    background: #00BDFF;
    text-decoration: none;
}





/* ---------FOOTER--------- */



footer {
    display: block;
    padding: 4vh 2vw 4vh 2vw;
    background-color: #ffffff;
    text-align: center;
}



footer p {
    margin: 1vh auto 1vh auto;
    font-size: 2vh;
    color: #666;
}


.navigation {
    display: block;
    margin: 3vh auto 3vh auto;
}


.navigation a {
    font-size: 2vh;
    color: #666;
}


}




/* //////////////////// COMPUTER + LANDSCAPE VERSION //////////////////// */

@media only screen and (orientation: landscape) and (any-pointer: fine), (orientation: landscape) and (any-pointer: coarse) {
    



body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #91e2ff 30%, #d7f4ff 90%);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    font-size: 18px;
    color: #151515;
}

    

.banner {
    display: block;
    background-image: url('banner-desktop.png');
    height: 40vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}




.content-container {
    display: block;
    position: relative;
    bottom: 10vh;
    margin: 0;
}



/* ---------HEADER--------- */


.header {
    display: block;
    margin: 0 15vw;
    padding: 5vh 0vw;
    border-radius: 8px;
    background-color: #1E1E1E;
}


.logo {
    display: block;
    margin: 0 auto 0 auto;
	text-align: center;
	max-width: 100%;
	max-height: 12vh;
    
}



/* ---------MAIN CONTAINER--------- */



.main-container {
    display: block;
    margin: 1.5vh 15vw 20vh 15vw;
    border-radius: 8px;
    background-color: #ffffff;
}



.top-bar {
    display: block;
    padding: 6px 0;
    border-radius: 8px 8px 0px 0px;
    background-color: #1E1E1E;
}



/* ---------QUIZ CONTAINER--------- */


.qz-container {
    display: block;
    background-color: #ffffff;
    margin: auto;
    padding: 0;
    border-radius: 8px;
}




.ebox {
    margin: auto;
    padding: 30px 0 50px 0;
    border-radius: 0px 0px 8px 8px;
    background-color: #ffffff;
    align-items: center;
    text-align: center;    
}




.ebox h1 {
    display: block;
    font-size: 24px;
    line-height: 2;
    text-align: center;
    letter-spacing: 0.01em;
    color: #1E1E1E;
    margin: 0;
    padding: 0;
    font-weight: bold;
}


.ebox h2 {
    display: none;	
}


.hr {
    display: none;
}


.notice {
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.26px;
    margin: 10px 0 30px 0;  
    color: #1E1E1E;
}


.QR-code {
    display: block;
    margin: 0 auto 0 auto;
	text-align: center;
	max-width: 100%;
	max-height: 20vh;
}



.grid-container {
    display: none;
}


.grid-item {
    display: none;
}


.icon {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
}


.ebox-button {
    display: none;
}





/* ---------FOOTER--------- */



footer {
    display: block;
    padding: 4vh 2vw 4vh 2vw;
    background-color: #ffffff;
    text-align: center;
}



footer p {
    margin: 1vh auto 1vh auto;
    font-size: 14px;
    color: #666;
}


.navigation {
    display: block;
    margin: 3vh auto 3vh auto;
}


.navigation a {
    font-size: 14px;
    color: #666;
}



    
}