@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

*,
::before,
::after {
   margin: 0;
   padding: 0;
   font-family: 'Poppins', 'Inter', sans-serif;
   box-sizing: border-box;
}

/* Variables */
:root {
   --text-color: rgba(17, 17, 17, 1);
   --text-color-deffered: rgba(17, 17, 17, .7);
   --yellow-accent: rgba(252, 226, 5, 1);
   --red-accent: rgba(253, 67, 67, 1);
   --popup-bg: rgba(17, 17, 17, .25);
}

::-webkit-scrollbar {
   width: 7px;
}

::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 10px;
}

::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
   background: #555;
}

body {
   /* Avoid highlighting when clicking buttons*/
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* Utilities */
.center {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

a {
   text-decoration: none;
}

sub {
   font-size: 2.5rem;
}

/* Main Style */
.phone {
   position: relative;
   width: 100vw;
   height: 100vh;
   background: #f3f3f3;
}

.screen {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 346px;
   height: 545px;
   border: 1px solid black;
   border-radius: 20px;
   background: #fff;
   transition: all .2s ease-in-out;
}

.screen__title {
   line-height: 2.2rem;
   font-weight: 800;
   font-size: 2.5rem;
}

.screen__subtitle {
   width: 200px;
   margin: 80px 0;
}

.button {
   font-size: 1rem;
   font-weight: 700;
   width: 200px;
   padding: 7px 0;
   border: 1px solid var(--text-color);
   text-transform: capitalize;
   border-radius: 5px;
   margin-bottom: 10px;
   cursor: pointer;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.button:last-child {
   margin-bottom: 0;
}

.button:active {
   box-shadow: 2px 4px 4px rgba(0, 0, 0, .4);
}

.button--yellow {
   background: var(--yellow-accent);
}

.button--red {
   background: var(--red-accent);
}

/* Select Your Compounds */
.button--back {
   width: 35px;
   height: 35px;
   padding-bottom: 10px;
   font-family: 'Inter';
   font-weight: 700;
   position: absolute;
   top: 20px;
   left: 20px;
}

.buttons--select {
   margin-top: 50px;
}

.button--choice {
   width: 285px;
   height: 150px;
   padding: 80px 0 0 20px;
   line-height: 1.2rem;
   text-align: left;
}

.button--covalent {
   padding: 50px 0 0 20px;
}

.button__title {
   font-size: 1.5rem;
}

.button__title--covalent {
   line-height: 1.5rem;
}

.button__subtitle {
   font-weight: 500;
   font-size: 1rem;
   margin-top: 5px;
}

/* Quiz */
.quiz__timer {
   font-weight: 700;
   font-size: 1.2rem;
}

.quiz__compound {
   font-size: 3rem;
   font-weight: 700;
   margin: 50px 0;
}

.button--option {
   width: 80%;
}

/* Popup */
.screen--popup {
   background: var(--popup-bg);
   border: 0;
}

.popup {
   padding: 15px 10px;
   width: 250px;
   border-radius: 5px;
   border: 1px solid var(--text-color);
}

.popup__title {
   font-weight: 700;
}

.popup__message {
   margin: 10px 0 30px 0;
   font-size: .9rem;
}

.popup__next {
   font-weight: 500;
   cursor: pointer;
}

.popup__next:active {
   color: var(--text-color-deffered);
}

.popup--timeup,
.popup--wrong {
   background: var(--red-accent);
}

.popup--correct {
   background: var(--yellow-accent);
}

/* Screens */
.screen--hidden {
   left: 60%;
   opacity: 0;
   z-index: -1;
}

.screen--visible {
   opacity: 1;
   z-index: 1;
   left: 50%;
}

.screen--visible_BacktoCompund {
   opacity: 1;
   z-index: 2;
   left: 50%;
}

/* Learn */
.topics::-webkit-scrollbar {
   display: none;
}

.topic-scroll {
   height: 65%;
   overflow-y: scroll;
   margin: 0 5px;
}

.topics {
   padding: 10px 10px;
}

.topic {
   width: 100%;
   border: 1px solid black;
   border-radius: 5px;
   padding: 15px;
   background-color: rgb(253, 67, 67);
   box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
   color: #fff;
   text-align: left;
   margin-bottom: 10px;
}

.highlight--learn {
   color: rgb(255, 96, 96);
}

.topic__content {
   line-height: 1.2rem;
}

.topic__title, .topic__content {
   color: #fff;
}

.screen-title--learn {
   margin-top: 60px;
   text-align: center;
   padding: 10px;
   line-height: 2.5rem;
}