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

* {
    font-family: 'Poppins';
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    min-height: 600px;
    min-width: 650px;
    display: grid;
    grid-template-rows: 1fr 10fr 1.5fr;
}

button:hover {
    cursor: pointer;
}

button {
    font-family: "Segoe UI Symbol", Poppins, sans-serif;
}

#assessment-header {
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(22, 146, 182);
    grid-row: 1 / 2;
    color: white;
    font-size: 25px;
    font-weight: 300;
    gap: 7px;
    border-left: 30px solid rgb(79, 79, 79);
}

.header-logo {
    height: 45px;
    width: 45px;
}

#assessment-body {
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    background-color: rgba(212, 233, 241);
}

#info-bar {
    grid-row: 3 / 4;
    background-color: rgb(79, 79, 79);
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    min-height: 70px;
}

.intro-form {
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    border: 4px solid rgba(22, 146, 182);
    height: 60%;
    min-width: 550px;
    max-width: 900px;
    min-height: 300px;
    max-height: 350px;
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.intro-text {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 5px;
    text-align: center;
    font-weight: 300;
    font-size: 18px;
}

.start-button {
    height: 70px;
    width: 250px;
    border-radius: 15px;
    font-size: 35px;
    border: 2px solid rgba(212, 233, 241);
    background-color: rgba(22, 146, 182);
    color: white;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgb(17, 110, 136);
    margin-bottom: 20px;
    margin-top: 5px;
    transform: scaleY(0.98);
    letter-spacing: -0.5px;
}

#browser-box {
    position: relative;
    border-radius: 10px;
    background-color: transparent;
    height: 80%;
    width: 50%;
    max-height: 500px;
    min-width: 670px;
    border: 4px solid rgb(79, 79, 79);
    display: grid;
    grid-template-rows: 1.3fr 1.3fr 1.6fr 19fr 1.5fr;
    background-color: white;
}

.tab-bar {
    background-color: lightgray;
    grid-row: 1 / 2;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: grid;
    grid-template-columns: 1fr 0.2fr 2.5fr 80px;
}

.tab {
    grid-column: 1 / 2;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    margin-left: 7px;
    margin-top: 5px;
    height: 25px;
    background-color: white;
    display: flex;
    align-items: center;
    padding-left: 8px;
}

#plus-button {
    font-size: 19px;
    grid-column: 2 / 3;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border-color: transparent;
    color: rgb(79, 79, 79);
}

#plus-button.active {
    color: rgba(22, 146, 182);
}

.window-buttons {
    grid-column: 4 / 5;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.window-buttons button {
    background-color: transparent;
    height: 25px;
    width: 25px;
    border-color: transparent;
    color: rgb(79, 79, 79);
}

#close-button {
    font-size: 19px;
    font-weight: 300;
}

#min-button {
    font-size: 17px;
    margin-bottom: 1px;
}

#hide-button {
    font-size: 19px;
    font-weight: 300;
}

.navigation-bar {
    grid-row: 2 / 3;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.tab-text {
    white-space: nowrap;
    grid-column: 1 / 2;
    font-size: 12px;
}

#close-tab-button {
    padding-left: clamp(75px, 6vw, 107px);
    grid-column: 3 / 4;
    font-size: 19px;
    background-color: transparent;
    border-color: transparent;
    color: rgb(79, 79, 79);
    font-weight: 300;
}

#close-tab-button.active {
    color: rgba(22, 146, 182);
}

.nav-container button {
    background-color: transparent;
    border-color: transparent;
    color: rgb(79, 79, 79);
    height: 100%;
}

.nav-container {
    width: auto;
    margin-bottom: 3px;
}

#refresh-button {
    height: 30px;
    font-size: 21px;
    width: 33%;
}

#back-button, .forward-button {
    height: 30px;
    font-size: 21px;
    width: 33%;
}

.search-container {
   width: clamp(505px, 38.7vw, 600px);
   height: 70%;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 20px;
   background-color: rgb(227, 227, 227);
}

#search-input {
    width: 100%;
    padding-left: 10px;
    border-color: transparent;
    background-color: transparent;
}

#search-input:focus {
    outline: none;
}

#search-input::-webkit-search-cancel-button {
    appearance: none;
}

#bookmark-button {
    background-color: transparent;
    border-color: transparent;
    font-weight: bold;
    height: 30px;
    width: 30px;
    margin-right: 2px;
    font-size: 14.5px;
    color: rgb(79, 79, 79);
    font-weight: 300;
}

#bookmark-button.active {
    color: rgba(22, 146, 182);
}

.bookmark-form {
    position: absolute;
    top: 13%;
    right: 10%;
    width: 200px;
    height: 100px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 2px gray;
    display: grid;
    grid-template-rows: 0.5fr 1fr 1fr 0.5fr;
    grid-template-columns: 0.20fr 1fr 1fr 1fr 0.20fr;
    align-items: center;
    justify-content: center;
    row-gap: 17px;
    column-gap: 5px;
}

#bookmark-input {
    margin-top: 2px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 3px;
    grid-row: 2 / 3;
    grid-column: 2 / 5;
    height: 100%;
    width: 100% - 10px;
    border-radius: 6px;
    border: 1px solid rgba(22, 146, 182);
    font-size: 12px;
}

#bookmark-input:focus {
    outline: none;
}

#remove-bookmark-btn, #save-bookmark-btn {
    padding-top: 3px;
    padding-bottom: 3px;
    grid-row: 3 / 4;
    width: 100% + 7px;
    height: 100%;
    font-size: 10px;
    border-radius: 18px;
    border-color: transparent;
}

#remove-bookmark-btn {
    grid-column: 3 / 4;
    background-color: rgb(227, 227, 227);
}

#save-bookmark-btn {
    grid-column: 4 / 5;
    background-color: rgba(22, 146, 182);
    color: white;
}

button.active {
    color: rgba(22, 146, 182);
    text-shadow: 0px 0px 2px rgb(53, 176, 214);
}

.account-button, #menu-button {
    height: 40px;
    width: 40px;
    background-color: transparent;
    border-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 125%;
    width: auto;
}

.account-button {
    background-image: url("./icons/user-profile.svg");
}

.account-button.active {
    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012ZM15%209C15%2010.6569%2013.6569%2012%2012%2012C10.3431%2012%209%2010.6569%209%209C9%207.34315%2010.3431%206%2012%206C13.6569%206%2015%207.34315%2015%209ZM12%2020.5C13.784%2020.5%2015.4397%2019.9504%2016.8069%2019.0112C17.4108%2018.5964%2017.6688%2017.8062%2017.3178%2017.1632C16.59%2015.8303%2015.0902%2015%2011.9999%2015C8.90969%2015%207.40997%2015.8302%206.68214%2017.1632C6.33105%2017.8062%206.5891%2018.5963%207.19296%2019.0111C8.56018%2019.9503%2010.2159%2020.5%2012%2020.5Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3C%2Fsvg%3E');
    filter: drop-shadow(0px 0px 2px rgb(53, 176, 214));
}

#menu-button {
    margin-left: 1px;
    background-image: url("./icons/menu-vertical.svg");
}

#menu-button.active {
    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13%205C13%204.44772%2012.5523%204%2012%204C11.4477%204%2011%204.44772%2011%205C11%205.55228%2011.4477%206%2012%206C12.5523%206%2013%205.55228%2013%205Z%22%20stroke%3D%22rgba(22%2C%20146%2C%20182)%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13%2012C13%2011.4477%2012.5523%2011%2012%2011C11.4477%2011%2011%2011.4477%2011%2012C11%2012.5523%2011.4477%2013%2012%2013C12.5523%2013%2013%2012.5523%2013%2012Z%22%20stroke%3D%22rgba(22%2C%20146%2C%20182)%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13%2019C13%2018.4477%2012.5523%2018%2012%2018C11.4477%2018%2011%2018.4477%2011%2019C11%2019.5523%2011.4477%2020%2012%2020C12.5523%2020%2013%2019.5523%2013%2019Z%22%20stroke%3D%22rgba(22%2C%20146%2C%20182)%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    filter: drop-shadow(0px 0px 2px rgb(53, 176, 214));
}

.moogle-bar {
    border-top: 0.5px solid rgb(163, 163, 163);
    padding-right: 5px;
    grid-row: 3 / 4;
    background-color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    background-color: white;
}

.nine-dots-button, #account-dtl-button {
    margin-top: 8px;
    background-color: transparent;
    border-color: transparent;
    height: 100%;
    border-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}

.nine-dots-button {
    background-size: 150%;
    background-image: url("./icons/nine-dots.svg");
}

.nine-dots-button.active {
    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%204C7%205.38071%205.88071%206.5%204.5%206.5C3.11929%206.5%202%205.38071%202%204C2%202.61929%203.11929%201.5%204.5%201.5C5.88071%201.5%207%202.61929%207%204Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3Cpath%20d%3D%22M14.5%204C14.5%205.38071%2013.3807%206.5%2012%206.5C10.6193%206.5%209.5%205.38071%209.5%204C9.5%202.61929%2010.6193%201.5%2012%201.5C13.3807%201.5%2014.5%202.61929%2014.5%204Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3Cpath%20d%3D%22M19.5%206.5C20.8807%206.5%2022%205.38071%2022%204C22%202.61929%2020.8807%201.5%2019.5%201.5C18.1193%201.5%2017%202.61929%2017%204C17%205.38071%2018.1193%206.5%2019.5%206.5Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3Cpath%20d%3D%22M7%2012C7%2013.3807%205.88071%2014.5%204.5%2014.5C3.11929%2014.5%202%2013.3807%202%2012C2%2010.6193%203.11929%209.5%204.5%209.5C5.88071%209.5%207%2010.6193%207%2012Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3Cpath%20d%3D%22M12%2014.5C13.3807%2014.5%2014.5%2013.3807%2014.5%2012C14.5%2010.6193%2013.3807%209.5%2012%209.5C10.6193%209.5%209.5%2010.6193%209.5%2012C9.5%2013.3807%2010.6193%2014.5%2012%2014.5Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3Cpath%20d%3D%22M22%2012C22%2013.3807%2020.8807%2014.5%2019.5%2014.5C18.1193%2014.5%2017%2013.3807%2017%2012C17%2010.6193%2018.1193%209.5%2019.5%209.5C20.8807%209.5%2022%2010.6193%2022%2012Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3Cpath%20d%3D%22M4.5%2022.5C5.88071%2022.5%207%2021.3807%207%2020C7%2018.6193%205.88071%2017.5%204.5%2017.5C3.11929%2017.5%202%2018.6193%202%2020C2%2021.3807%203.11929%2022.5%204.5%2022.5Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3Cpath%20d%3D%22M14.5%2020C14.5%2021.3807%2013.3807%2022.5%2012%2022.5C10.6193%2022.5%209.5%2021.3807%209.5%2020C9.5%2018.6193%2010.6193%2017.5%2012%2017.5C13.3807%2017.5%2014.5%2018.6193%2014.5%2020Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3Cpath%20d%3D%22M19.5%2022.5C20.8807%2022.5%2022%2021.3807%2022%2020C22%2018.6193%2020.8807%2017.5%2019.5%2017.5C18.1193%2017.5%2017%2018.6193%2017%2020C17%2021.3807%2018.1193%2022.5%2019.5%2022.5Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3C%2Fsvg%3E');
    filter: drop-shadow(0px 0px 2px rgb(53, 176, 214));
}

#account-dtl-button {
    width: 35px;
    background-size: contain;
    background-image: url("./icons/user-profile.svg");
}

#account-dtl-button.active {
    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012ZM15%209C15%2010.6569%2013.6569%2012%2012%2012C10.3431%2012%209%2010.6569%209%209C9%207.34315%2010.3431%206%2012%206C13.6569%206%2015%207.34315%2015%209ZM12%2020.5C13.784%2020.5%2015.4397%2019.9504%2016.8069%2019.0112C17.4108%2018.5964%2017.6688%2017.8062%2017.3178%2017.1632C16.59%2015.8303%2015.0902%2015%2011.9999%2015C8.90969%2015%207.40997%2015.8302%206.68214%2017.1632C6.33105%2017.8062%206.5891%2018.5963%207.19296%2019.0111C8.56018%2019.9503%2010.2159%2020.5%2012%2020.5Z%22%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%2F%3E%3C%2Fsvg%3E');
    filter: drop-shadow(0px 0px 2px rgb(53, 176, 214));
}

.moogle-page {
    grid-row: 4 / 5;
    background-color: white;
    display: flex;
    justify-content: center;
    padding-top: 10vh;
}

.web-page {
    grid-row: 3 / 6;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.travel-page {
    grid-row: 3 / 6;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-image: url('./icons/hotel-demo.png');
    background-size: contain;
}

.bank-page {
    grid-row: 3 / 6;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-image: url('./icons/bank-demo.png');
    background-size: contain;
}

.moogle-logo {
    display: block;
    margin: 0 auto;
    height: 60px;
    width: 180px;
    padding-bottom: 10px;
}

.search-container2 {
   width: 400px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 20px;
   background-color: rgb(227, 227, 227);
   padding-right: 10px;
   margin-bottom: 15px;
}

#search-input2 {
    width: 400px;
    padding-left: 10px;
    border-color: transparent;
    background-color: transparent;
}

#search-input2:focus {
    outline: none;
}

#search-input2::-webkit-search-cancel-button {
    appearance: none;
}

.mic-button, .img-search-button {
    background-color: transparent;
    border-color: transparent;
    height: 30px;
    border-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.mic-button {
    margin-right: 3px;
    background-image: url('./icons/microphone.svg');
}

.img-search-button {
    background-image: url('./icons/image-search.svg');
}

.shortcut-container {
    display: inline-block;
    margin: 0 auto;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

#shortcut-button-container {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 40px;
}

#add-shortcut-button {
    display: block;
    margin: 0 auto;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border-color: transparent;
    background-color: rgb(227, 227, 227);
    font-size: 20px;
    color: rgb(79, 79, 79);
}

#shortcut-button {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border-color: transparent;
    background-image: url('./icons/email.svg');
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(227, 227, 227);
    color: rgba(27, 27, 27, 0);
    font-size: 20px;
}

#shortcut-button:hover {
    background-image: url('./icons/email-hover.png');
    color: rgba(22, 146, 182, 1);
    font-weight: 300;
    text-shadow: 0px 0px 2px rgb(53, 176, 214);
}

.shortcut-text {
    font-size: 8px;
    text-align: center;
    margin-top: 3px;
}

#add-shortcut-button.active {
    color: rgba(22, 146, 182);
    text-shadow: 0px 0px 2px rgb(53, 176, 214);
}

.img-search-button.active {
    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%3Csvg%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%2C13a1%2C1%2C0%2C0%2C0-1%2C1v.39l-1.48-1.48a2.79%2C2.79%2C0%2C0%2C0-3.93%2C0l-.7.7L9.41%2C11.12a2.87%2C2.87%2C0%2C0%2C0-3.93%2C0L4%2C12.61V7A1%2C1%2C0%2C0%2C1%2C5%2C6H9A1%2C1%2C0%2C0%2C0%2C9%2C4H5A3%2C3%2C0%2C0%2C0%2C2%2C7V19a3%2C3%2C0%2C0%2C0%2C3%2C3H17a3%2C3%2C0%2C0%2C0%2C3-3V14A1%2C1%2C0%2C0%2C0%2C19%2C13ZM5%2C20a1%2C1%2C0%2C0%2C1-1-1V15.43l2.9-2.89a.79.79%2C0%2C0%2C1%2C1.09%2C0l3.17%2C3.17%2C0%2C0L15.45%2C20Zm13-1a1%2C1%2C0%2C0%2C1-.18.54L13.31%2C15l.7-.69a.77.77%2C0%2C0%2C1%2C1.1%2C0L18%2C17.22Zm3.71-8.71L20%2C8.57a4.31%2C4.31%2C0%2C1%2C0-6.72.79%2C4.27%2C4.27%2C0%2C0%2C0%2C3%2C1.26A4.34%2C4.34%2C0%2C0%2C0%2C18.57%2C10l1.72%2C1.73a1%2C1%2C0%2C0%2C0%2C1.42%2C0A1%2C1%2C0%2C0%2C0%2C21.71%2C10.29ZM18%2C8a2.32%2C2.32%2C0%2C1%2C1%2C0-3.27A2.32%2C2.32%2C0%2C0%2C1%2C18%2C8Z%22%2F%3E%3C%2Fsvg%3E');
    filter: drop-shadow(0px 0px 2px rgb(53, 176, 214));
}

.mic-button.active {
    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.0%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FTR%2F2001%2FREC-SVG-20010904%2FDTD%2Fsvg10.dtd%22%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%3Csvg%20version%3D%221.0%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2064%2064%22%20enable-background%3D%22new%200%200%2064%2064%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%20d%3D%22M32%2C44c6.629%2C0%2C12-5.371%2C12-12V12c0-6.629-5.371-12-12-12S20%2C5.371%2C20%2C12v20C20%2C38.629%2C25.371%2C44%2C32%2C44z%22%2F%3E%3Cpath%20fill%3D%22rgba(22%2C%20146%2C%20182)%22%20d%3D%22M52%2C28c-2.211%2C0-4%2C1.789-4%2C4c0%2C8.836-7.164%2C16-16%2C16s-16-7.164-16-16c0-2.211-1.789-4-4-4s-4%2C1.789-4%2C4c0%2C11.887%2C8.656%2C21.73%2C20%2C23.641V60c0%2C2.211%2C1.789%2C4%2C4%2C4s4-1.789%2C4-4v-4.359C47.344%2C53.73%2C56%2C43.887%2C56%2C32C56%2C29.789%2C54.211%2C28%2C52%2C28z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    filter: drop-shadow(0px 0px 2px rgb(53, 176, 214));
}

.customize-bar {
    grid-row: 5 / 6;
    background-color: white;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    display: flex;
    justify-content: flex-end;
}

.customize-button {
    border-color: transparent;
    height: 25px;
    width: 120px;
    border-radius: 12px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: rgb(79, 79, 79);
}

.customize-form {
    position: absolute;
    bottom: 8%;
    right: 2%;
    width: 200px;
    height: 300px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 2px gray;
    display: grid;
    grid-template-rows: 1fr 2fr 6fr 1fr;
    grid-template-columns: 0.12fr 1fr 1fr 0.12fr;
    align-items: center;
    justify-content: center;
    column-gap: 7px;
}

#dark-mode-btn, #light-mode-btn {
    margin-top: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100%;
    height: 70%;
    font-size: 12px;
    border-radius: 20px;
    border-color: transparent;
    grid-row: 2 / 3;
}

#dark-mode-btn.active {
    background-color: rgb(30, 125, 154);
}

#light-mode-btn {
    grid-column: 2 / 3;
    background-color: rgb(227, 227, 227);
}

#dark-mode-btn {
    grid-column: 3 / 4;
    background-color: rgba(22, 146, 182);
    color: white;
}

.customize-caption {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
    text-align: center;
    font-weight: bold;
    padding-top: 20px;
}

#theme-btn-container {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    column-gap: 10px;
}

#pink-theme-btn, #orange-theme-btn, #yellow-theme-btn, #green-theme-btn, #blue-theme-btn, #purple-theme-btn {
    border-radius: 30%;
    height: 50px;
    width: 50px;
    font-size: 20px;
    font-weight: 300;
    border-top: 0px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    opacity: 0.5;
}

#pink-theme-btn.active, #orange-theme-btn.active, #yellow-theme-btn.active, #green-theme-btn.active, #blue-theme-btn.active, #purple-theme-btn.active {
    opacity: 1;
}

#pink-theme-btn {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    background-color: pink;
    border-left: 6px solid rgb(198, 136, 146);
}

#orange-theme-btn {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background-color: rgb(255, 203, 157);
    border-left: 6px solid rgb(203, 167, 122);
}

#yellow-theme-btn {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    background-color: rgb(255, 241, 189);
    border-left: 6px solid rgb(225, 204, 137);
}

#green-theme-btn {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    background-color: rgb(200, 227, 173);
    border-left: 6px solid rgb(148, 191, 157);
}

#blue-theme-btn {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    background-color: lightblue;
    border-left: 6px solid rgb(117, 187, 210);
}

#purple-theme-btn {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    background-color: rgb(203, 203, 255);
    border-left: 6px solid rgb(170, 170, 241);
}

#save-theme-button {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    width: 100%;
    height: 35px;
    font-size: 12px;
    border-radius: 18px;
    border-color: transparent;
    background-color: rgba(22, 146, 182);
    color: white;
    margin-bottom: 20px;
    font-weight: bold;
}

#save-theme-button:active {
    background-color: rgb(30, 125, 154);
}

.question-box {
    background-color: white;
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-weight: bold;
    font-size: 20px;
    color: rgb(79, 79, 79);
}

#next-button {
    height: 50px;
    width: 70px;
    border-radius: 10px;
    font-size: 25px;
    border-color: transparent;
    background-color: rgb(27, 27, 27);
    color: white;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgb(17, 110, 136);
    transform: scaleY(0.98);
    letter-spacing: -0.5px;
}

#hint-button {
    border-radius: 50%;
    font-size: 25px;
    border-color: transparent;
    background-color: rgb(27, 27, 27);
    color: white;
    font-weight: 450;
    text-shadow: 1px 1px 2px rgb(17, 110, 136);
    transform: scaleY(0.98);
    letter-spacing: -0.5px;
    width: 50px;
    height: 50px;
}

.progress-bar {
    height: 15px;
    width: 60%;
    border-radius: 10px;;
    background-color: rgb(27, 27, 27);
    display: flex;
    align-items: center;
}

#inner-bar {
    height: 10px;
    width: 5%;
    background-color: white;
    border-radius: 10px;
    margin-left: 3px;
    margin-right: 3px;
}

#progress-text {
    color: white;
    font-weight: bold;
}

.hint-form {
    position: absolute;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    padding: 30px 20px 30px 20px;
    border-radius: 10px;
    background-color: white;
    border: 4px solid rgba(22, 146, 182);
    height: 60%;
    min-width: 300px;
    max-width: 530px;
    min-height: 150px;
    max-height: 175px;
    width: 70%;
}

.hint-text {
    font-size: 17px;
    text-align: center;
}

.okay-button {
    height: 90px;
    width: 180px;
    border-radius: 10px;
    font-size: 30px;
    border: 2px solid rgba(212, 233, 241);
    background-color: rgba(22, 146, 182);
    color: white;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgb(17, 110, 136);
    margin-bottom: 20px;
    margin-top: 5px;
    transform: scaleY(0.98);
    letter-spacing: -0.5px;
}

.app-form {
    position: absolute;
    top: 21%;
    right: 6%;
    width: 170px;
    height: 150px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 2px gray;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.img-search-form {
    position: absolute;
    top: 66%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 150px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 2px gray;
    display: grid;
    grid-template-rows: 2fr 5fr 2fr 2fr;
    grid-template-columns: 0.5fr 5fr 1fr 0.5fr;
    align-items: center;
    justify-items: center;
    z-index: 9999;
    row-gap: 10px;
    column-gap: 5px;
}

.demo-image {
    grid-row: 2 / 3;
    grid-column: 2 / 4;
    width: 165px;
    height: 94px;
    border-radius: 5px;
}

#img-search-input {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    width: 100%;
    height: 25px;
    border-radius: 15px;
    background-color: rgb(227, 227, 227);
    border-color: transparent;
    font-size: 8px;
    margin-bottom: 20px;
    padding-left: 5px;
}

#img-search-input:focus {
    outline: none;
}

#img-search-input::-webkit-search-cancel-button {
    appearance: none;
}

#img-submit-button {
    grid-row: 3 / 4;
    grid-column: 3 / 4;
    width: 100%;
    height: 25px;
    font-size: 8px;
    border-radius: 18px;
    border-color: transparent;
    background-color: rgba(22, 146, 182);
    color: white;
    margin-bottom: 20px;
    font-weight: bold;
}

.user-acc-container, .gps-container, .email-container, .calendar-container, .photos-container, .mootube-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.user-acc-container {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: auto;
    height: auto;
}

.gps-container {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: auto;
    height: auto;
}

.email-container {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    width: auto;
    height: auto;
}

.calendar-container {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    width: auto;
    height: auto;
}

.photos-container {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    width: auto;
    height: auto;
}

.mootube-container {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    width: auto;
    height: auto;
}

.user-acc-text, .gps-text, .email-text, .calendar-text, .photos-text, .mootube-text {
    font-size: 8px;
}

#user-acc-button, #gps-button, #email-button, #calendar-button, #photos-button, #mootube-button {
    height: 35px;
    width: 35px;
    background-color: transparent;
    border-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 10px;
}

#user-acc-button:hover, #gps-button:hover, #email-button:hover, #calendar-button:hover, #photos-button:hover, #mootube-button:hover {
    background-color: rgb(227, 227, 227);
}

#user-acc-button {
    background-image: url('./icons/user-acc.svg');
}

#gps-button {
    background-image: url('./icons/gps.svg');
}

#email-button {
    background-image: url('./icons/email.svg');
}

#calendar-button {
    background-image: url('./icons/calendar.svg');
}

#photos-button {
    background-image: url('./icons/photos.svg');
}

#mootube-button {
    background-image: url('./icons/mootube.svg');
}

.result-form {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    border-radius: 10px;
    background-color: white;
    border-top: 30px solid rgb(22, 146, 182);
    border-left: 4px solid rgb(22, 146, 182);
    border-right: 4px solid rgb(22, 146, 182);
    border-bottom: 4px solid rgb(22, 146, 182);
    height: 60%;
    min-width: 550px;
    max-width: 700px;
    min-height: 300px;
    max-height: 350px;
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.try-again-button {
    height: 70px;
    width: 250px;
    border-radius: 18px;
    font-size: 35px;
    border: 2px solid rgba(212, 233, 241);
    background-color: rgba(22, 146, 182);
    color: white;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgb(17, 110, 136);
    transform: scaleY(0.98);
    letter-spacing: -0.5px;
    margin-top: 13px;
}

.user-message {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 15px;
    text-align: center;
    font-weight: 300;
    font-size: 35px;
    font-weight: bold;
    color: rgba(79, 79, 79);
}

.score {
    height: 60px;
    width: 150px;
    border-radius: 45px;
    font-size: 35px;
    border: 2px solid rgb(126, 126, 126);
    background-color: rgb(79, 79, 79);
    color: white;
    font-weight: 400;
    transform: scaleY(0.98);
    letter-spacing: -0.5px;
    text-align: center;
    padding-top: 4px;
    margin-top: -30px;
}

.score-details {
    font-size: 17px;
    font-style: italic;
    text-align: center;
    margin-top: 12px;
    font-weight: 300;
}