* { margin: 0; padding: 0; box-sizing: border-box; } :root { --background_color:mediumpurple; --background_color_240rem: mediumpurple; --background_color_120rem: mediumpurple; --background_color_80.0625rem: mediumpurple; --background_color_64.0625rem: mediumpurple; --background_color_60.0625rem: mediumpurple; --background_color_40.0625rem: mediumpurple; --background_color_30.0625rem: mediumpurple; --background_color_20rem: mediumpurple; --background_color_navbar: #4c1bd3; --hover_color: #611bd3; --background_color_dropdowns: #8764e7; --text_color: white; --text_color_hover: yellow; --font_family: arial; --font_style: italic; --font_size: 1em; --font_size_240rem: 1.125em; --font_size_120rem: 1.1875em; --font_size_80.0625rem: 1.1875em; --font_size_64.0625rem: 1.1875em; --font_size_60.0625rem: 1.1875em; --font_size_40.0625rem: 1.125em; --font_size_30.0625rem: 1.125em; --font_size_1rem: 1em; --font_family_quotes_copyright: arial; --border_type_and_color: none; --border_type_and_color_phone: none; --link_color: white; } body { font-family: 'Open Sans', sans-serif, Arial, Helvetica, cursive; background-color:var(--background_color); position: relative; padding-bottom: 3.625rem; min-height: 100vh; } [class~="fit-picture"] { width: 10.9375rem; align-content: stretch; height: 4.6875rem; border-radius: 100%; box-shadow: 0rem 0.5rem 1rem 0rem darkgray; } [class~="responsive-image"] { max-width: 100%; height: auto; } label, [class~="toggle"], [id^=drop] { display: none; } [class~="navbar"] { height: 100%; width: 100%; padding: 1.25rem 1.875rem; background-color: var(--background_color_navbar); position: relative; } [class~="navbar"] [class~="nav-header"] { display: inline; } [class~="navbar"] [class~="nav-header"] [class~="nav-logo"] { display: inline-block; margin-top: -0.4375rem; } [class~="navbar"] [class~="nav-links"] { display: block; padding: 0.625rem 0.9375rem; justify-content: space-evenly; float: right; font-size: var(--font_size); font-family: var(--font_family); z-index: 1; } [class~="navbar"] [class~="nav-links"] a { padding: 0.625rem 0.75rem; justify-content: space-evenly; text-decoration: none; color: var(--text_color); } label { padding: 0.625rem 0.75rem; font-size: var(--font_size); position: relative; color: var(--text_color); } [class~="navbar"] [class~="nav-links"] li:hover, [class~="navbar"] [class~="nav-links"] li:focus-within { background-color: var(--hover_color); } [class~="navbar"] #nav-check, [class~="navbar"] [class~="nav-btn"] { display: none; } [class~="navbar"] [class~="nav-links"] #drop-1-check, [class~="navlinks"] [class~="dropdown-content"] { display: none; } [class~="navbar"] [class~="nav-links"] #drop-2-check, [class~="navlinks"] [class~="dropdown-content2"] { display: none; } [class~="nav-links"] { overflow: hidden; background-color: var(--background_color_navbar); } [class~="nav-links"] li { float: left; display: block; color: var(--text_color); padding: 0.625rem 0.625rem 0.625rem 0rem; text-decoration: none; font-size: var(--font_size); align-content: center; } [class~="dropdown-content"], [class~="dropdown-content2"] { display: none; top: 4.375rem; align-items: baseline; position: absolute; background-color: var(--background_color_navbar); box-shadow: 0rem 0.5rem 1rem 0rem purple; overflow: hidden; font-size: var(--font_size); } [class~="dropdown-content"] li, [class~="dropdown-content2"] li { float: none; padding: 0.75rem 0.125rem; text-decoration: none; display: block; text-align: left; background-color: var(--background_color_dropdowns); font-size: var(--font_size); } [class~="navbar"] ul li:hover > ul, [class~="navbar"] ul li:focus-within > ul { display: block; } [class~="nav-links"] [class~="dropdown-content"]:hover, [class~="nav-links"] [class~="dropdown-content2"]:hover, [class~="nav-links"] [class~="dropdown-content"]:focus-within, [class~="nav-links"] [class~="dropdown-content2"]:focus-within { background-color: var(--hover_color); color: var(--text_color); } [class~="dropdown-content"] li a:hover, [class~="dropdown-content2"] li a:hover, [class~="dropdown-content"] li a:focus-within, [class~="dropdown-content2"] li a:focus-within { color: var(--text_color_hover); } [class~="index_container"] { width: 90%; max-width: 62.5rem; height: auto; margin: 0 auto; padding: 0.3125rem 0rem 1.25rem 0.3125rem; display: flex; align-items: center; justify-content: center; } [class~="index_content"] { width: 100%; height: 40.625rem; display: flex; border-radius: 0.5rem; } [class~="quotes"] { width: 100%; justify-content: center; font-family: var(--font_family_quotes_copyright); font-size: 1.25rem; font-style: var(--font_style); color:black; display: flex; } H1 { font-family: var(--font_family); font-style: var(--font_style); font-size: 1.1875rem; color: var(--text_color); text-align: center; padding: 0.625rem 0.3125rem 0.3125rem 0.3125rem; } [class~="education_container"] { display: flex; flex-direction: column; align-items: center; flex-grow: 1; flex-shrink: 1; flex-basis: 0; } [class~="education_container"] > [class~="education_image1"], [class~="education_image2"], [class~="education_image3"] { display: inline-block; vertical-align: middle; text-align: justify; padding: 0.3125rem 0rem 0rem 0rem; } [class~="classes_taken"] { padding: 0rem 0rem 0.3125rem 0.3125rem; } [class~="education_text1"], [class~="education_text2"], [class~="education_text3"] { display: flex; font-family: var(--font_family); font-size: var(--font_size); padding: 0.3125rem 0rem 0.3125rem 0rem; } [class~="msclasses_container"] { font-family: var(--font_family); font-size: var(--font_size); text-align: center; padding: 0.3125rem 0.3125rem 0rem 0.3125rem; border: var(--border_type_and_color); margin: auto; max-width: 22.5%; } [class~="msclasses_line"] { display: inline-block; text-align: left; align-content: center; list-style-type: none; } [class~="msclasses_line"] li { margin-bottom: .5rem; } [class~="myvirtualed_container"] { font-family: var(--font_family); font-size: var(--font_size); text-align: center; padding: 0.3125rem 0rem 0rem 0rem; border: var(--border_type_and_color); max-width: 38.5%; margin: auto; } [class~="myvirtualed_container"] ul li { margin-left: 1.5625rem; list-style-type: '🎓 '; } [class~="myvirtualed_line"] { font-family: var(--font_family); font-size: var(--font_size); font-weight: normal; text-align: left; margin-bottom: .5rem; } [class~="myvirtualed_container"] ul li p a { color: var(--text_color); } [class~="myvirtualed_container"] li:nth-child(4), [class~="myvirtualed_container"] li:nth-child(5), [class~="myvirtualed_container"] li:nth-child(6), [class~="myvirtualed_container"] li:nth-child(7), [class~="myvirtualed_container"] li:nth-child(8), [class~="myvirtualed_container"] li:nth-child(9), [class~="myvirtualed_container"] li:nth-child(10), [class~="myvirtualed_container"] li:nth-child(11), [class~="myvirtualed_container"] li:nth-child(12), [class~="myvirtualed_container"] li:nth-child(13), [class~="myvirtualed_container"] li:nth-child(14), [class~="myvirtualed_container"] li:nth-child(15), [class~="myvirtualed_container"] li:nth-child(16), [class~="myvirtualed_container"] li:nth-child(17), [class~="myvirtualed_container"] li:nth-child(18), [class~="myvirtualed_container"] li:nth-child(19), [class~="myvirtualed_container"] li:nth-child(20), [class~="myvirtualed_container"] li:nth-child(21), [class~="myvirtualed_container"] li:nth-child(22) { font-family: var(--font_family); font-size: var(--font_size); padding: 0rem 0rem 0rem 5.3125rem; text-align: left; list-style-type: none; } [class~="myvirtualed_container"] div a { color: blue; } [class~="myvirtualed_container2"] { font-family: var(--font_family); font-size: var(--font_size); text-align: center; padding: 0.3125rem 0rem 0rem 0rem; border: var(--border_type_and_color); max-width: 38.5%; margin: auto; } [class~="myvirtualed_container2"] ul li { margin-left: 1.5625rem; list-style-type: '🎓 '; } [class~="myvirtualed_line2"] { font-family: var(--font_family); font-size: var(--font_size); font-weight: normal; text-align: left; margin-bottom: .5rem; } [class~="myvirtualed_container2"] ul li p a { color: var(--text_color); } [class~="myvirtualed_container2"] li:nth-child(0), [class~="myvirtualed_container2"] li:nth-child(3), [class~="myvirtualed_container2"] li:nth-child() { font-family: var(--font_family); font-size: var(--font_size); padding: 0rem 0rem 0rem 5.3125rem; text-align: left; list-style-type: none; } [class~="myvirtualed_container2"] div a { color:blue; } [class~="myvirtualed_container2"] div a img { display: inline-block; position: relative; top: 0.3125rem; } [class~="mycertificates_container"] { font-family: var(--font_family); font-size: var(--font_size); text-align: center; padding: 0.3125rem 0rem 0rem 0rem; border: var(--border_type_and_color); margin: auto; max-width: 85.5%; } [class~="mycertificates_line"] { display: inline-block; text-align: left; align-content: center; list-style-type: none; } [class~="mycertificates_line"] li { margin-bottom: .5rem; } [class~="education_affiliations_container"] { font-family: var(--font_family); font-size: var(--font_size); text-align: center; } [class~="education_affiliations_container"] a { color: var(--link_color); } [class~="education_affiliations_image"] { display: inline-block; vertical-align: middle; text-align: justify; margin-top: 0.625rem; } H3 { font-family: var(--font_family); font-style: var(--font_style); color: black; text-align: center; padding: 0.3125rem 0rem 0.625rem 0rem; } [class~="mycomputercomp_container"] { font-family: var(--font_family); font-size: var(--font_size); text-align: center; padding: 0.3125rem 0rem 0rem 0rem; border: var(--border_type_and_color); margin: auto; max-width: 60.5%; } [class~="mycomputercomp_line"] { display: inline-block; text-align: left; margin-left: 0.3125rem; align-content: center; list-style-type: none; } [class~="mycomputercomp_line"] li { margin-bottom: .5rem; } [class~="myprojects_container"] { font-family: var(--font_family); font-size: var(--font_size); text-align: center; padding: 0.3125rem 0rem 0.3125rem 0rem; border: var(--border_type_and_color); margin: auto; max-width: 63.5%; } [class~="myprojects_line"] { display: inline-block; text-align: left; margin-left: 1.875rem; align-content: center; } [class~="myprojects_line"] li { margin-bottom: .5rem; } [class~="myprojects_line"] li a { color: var(--link_color); } [class~="myprojects_container"] div a { color: blue; } [class~="myprojects_descs_container"] { padding: 0.3125rem 0rem 0.3125rem 0rem; border: var(--border_type_and_color); margin: auto; max-width: 63.5%; } [class~="myprojects_descs_line"] { display: inline-block; text-align: left; margin-left: 1.875rem; align-content: left; } [class~="myprojects_descs_line"] li { margin-bottom: .5rem; } [class~="myprojects_descs_line"] li a { color: var(--link_color); } [class~="myprojects_descs_container"] div a { color: blue; } [class~="pastaccomplishments_container"] { font-family: var(--font_family); font-size: var(--font_size); text-align: center; padding: 0.625rem 0rem 0.3125rem 0rem; border: var(--border_type_and_color); margin: auto; max-width: 64.5%; } [class~="pastaccomplishments_line"] { display: inline-block; text-align: left; margin-left: 1.25rem; align-content: center; } [class~="pastaccomplishments_line"] li { margin-bottom: .5rem; } [class~="pastaccomplishments_line"] li a { color: var(--link_color); } [class~="pastaccomplishments_container"] div a { color:blue; } [class~="pastaccomplishments_container"] div a img { display: inline-block; position: relative; top: 0.3125rem; } [class~="MyGroceryList_container"] { display: flex; flex-direction: row; justify-content: center; margin: auto; max-width: 95%; } [class~="MyGroceryList_column"] { float: left; padding: 0.3125rem 0.5rem 0rem 0.5rem; } [class~="MyGroceryList_row"]::after { content: ""; clear: both; } [class~="MyHomeCareList_container"] { display: flex; flex-direction: row; justify-content: center; margin: auto; max-width: 95%; } [class~="MyHomeCareList_column"] { float: left; padding: 0.3125rem 0.5rem 0rem 0.5rem; } [class~="MyHomeCareList_row"]::after { content: ""; clear: both; } [class~="MyTravelItemList_container"] { display: flex; flex-direction: row; justify-content: center; margin: auto; max-width: 95%; } [class~="MyTravelItemList_column"] { float: left; padding: 0.3125rem 0.5rem 0rem 0.5rem; } [class~="MyTravelItemList_row"]::after { content: ""; clear: both; } [class~="passwordcontainer"] { padding: 1.25rem; border-radius: 0.5rem; text-align: center; font-family: var(--font_family); font-size: var(--font-size); } input[type="password"] { width: 12.5rem; padding: 0.625rem; margin: 0.625rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; font-family: var(--font_family); font-size: var(--font_size); } button { padding: 0.625rem 1.25rem; background-color: #007bff; color: #fff; border: none; border-radius: 0.25rem; cursor: pointer; font-family: var(--font_family); font-size: var(--font_size); } button:hover { background-color: #0056b3; } [class~="downloadbuttoncontainer"] { text-align: center; } [class~="download-button"] { display: inline-block; padding: 0.625rem 1.25rem; font-size: 1rem; color: white; background-color: #007BFF; border: none; border-radius: 0.3125rem; text-decoration: none; cursor: pointer; text-align: center; } [class~="download-button"]:hover { background-color: #0056b3; } [class~="disabled-link"] { pointer-events: none; } [class~="disabled-button"] { background-color:gray; } [class~="contact_container_main"] { display: flex; width: 90%; max-width: 62.5rem; height: auto; margin: 0 auto; padding: 0.3125rem 0rem 0.625rem 0.3125rem; align-items: center; justify-content: center; } [class~="me_contact"] { width: 100%; height: auto; } [class~="me_contact_content"] { border-radius: 50%; } [class~="my_signature"] { font-family: cursive; font-size: 1.125rem; text-align: center; } [class~="contact_container"] { width: 90%; max-width: 62.5rem; height: auto; margin: 0 auto; display: flex; align-items: center; justify-content: center; } [class~="email_link"] { padding: 1.5625rem 2.5rem 0rem 0.3125rem; border-radius: 25%; } [class~="linkedin_link"] { padding: 1.5625rem 0rem 0rem 0.3125rem; border-radius: 25%; } [class~="footer"] { text-align: center; padding: 0rem 0rem 1.875rem 0rem; position: absolute; bottom: 0; width: 100%; } [class~="copyright"] { width: 100%; justify-content: center; font-family: var(--font_family_quotes_copyright); font-size: 0.875rem; color: darkslategray; } @media (min-width: 240rem) { body { background-color: var(--background_color_240rem); font-size: var(--font_size_240rem); } [class~="index_content"] { width: 100%; height: 40.625rem; display: flex; border-radius: 0.5rem; } [class~="my_signature"] { font-family: "Lucida Calligraphy", cursive; font-size: var(--font_size_240rem); } } @media (min-width: 120rem) { body { background-color: var(--background_color_120rem); } [class~="index_content"] { width: 100%; height: 40.625rem; display: flex; border-radius: 0.5rem; } [class~="education_container"] { font-size: var(--font_size_120rem); } [class~="msclasses_container"] { max-width: 26.875rem; font-size: var(--font_size_120rem); } [class~="myvirtualed_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_120rem); } [class~="myvirtualed_container2"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_120rem); } [class~="mycertificates_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 97.8125rem; font-size: var(--font_size_120rem); } [class~="education_affiliations_container"] { font-size: var(--font_size_120rem); } [class~="mycomputercomp_container"] { padding: 0.3125rem 0rem 0rem 0rem; max-width: 68.4375rem; font-size: var(--font_size_120rem); } [class~="myprojects_container"] { max-width: 86.5625rem; font-size: var(--font_size_120rem); } [class~="myprojects_descs_container"] { max-width: 86.5625rem; font-size: var(--font_size_120rem); } [class~="pastaccomplishments_container"] { max-width: 95.3125rem; font-size: var(--font_size_120rem); } [class~="my_signature"] { font-family: "Lucida Calligraphy", cursive; font-size: var(--font_size_120rem); } } @media all and (min-width: 80.0625rem) and (max-width: 119.9375rem) { body { background-color: var(--background_color_80.0625rem); } [class~="index_content"] { height: 26.5625rem; } [class~="education_container"] { font-size: var(--font_size_80.0625rem); } [class~="msclasses_container"] { max-width: 26.875rem; font-size: var(--font_size_80.0625rem); } [class~="myvirtualed_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_80.0625rem); } [class~="myvirtualed_container2"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_80.0625rem); } [class~="mycertificates_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 97.5rem; font-size: var(--font_size_80.0625rem); } [class~="education_affiliations_container"] { font-size: var(--font_size_80.0625rem); } [class~="mycomputercomp_container"] { padding: 0.3125rem 0rem 0rem 0rem; max-width: 68.4375rem; font-size: var(--font_size_80.0625rem); } [class~="myprojects_container"] { max-width: 86.5625rem; font-size: var(--font_size_80.0625rem); } [class~="myprojects_descs_container"] { max-width: 86.5625rem; font-size: var(--font_size_80.0625rem); } [class~="pastaccomplishments_container"] { max-width: 95.3125rem; font-size: var(--font_size_80.0625rem); } [class~="my_signature"] { font-family: "Lucida Calligraphy", cursive; font-size: var(--font_size_80.0625rem); } } @media all and (min-width: 64.0625rem) and (max-width: 80rem) { body { background-color: var(--background_color_64.0625rem); } [class~="index_content"] { height: 26.5625rem; } [class~="education_container"] { font-size: var(--font_size_64.0625rem); } [class~="msclasses_container"] { max-width: 26.875rem; font-size: var(--font_size_64.0625rem); } [class~="myvirtualed_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_64.0625rem); } [class~="myvirtualed_container2"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_64.0625rem); } [class~="mycertificates_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 95.3125rem; font-size: var(--font_size_64.0625rem); } [class~="education_affiliations_container"] { font-size: var(--font_size_64.0625rem); } [class~="mycomputercomp_container"] { padding: 0.3125rem 0rem 0rem 0rem; max-width: 68.4375rem; font-size: var(--font_size_64.0625rem); } [class~="myprojects_container"] { max-width: 86.5625rem; font-size: var(--font_size_64.0625rem); } [class~="myprojects_descs_container"] { max-width: 86.5625rem; font-size: var(--font_size_64.0625rem); } [class~="pastaccomplishments_container"] { max-width: 95.3125rem; font-size: var(--font_size_64.0625rem); } [class~="my_signature"] { font-family: "Lucida Calligraphy", cursive; font-size: var(--font_size_64.0625rem); } } @media only screen and (min-width: 60.0625rem) and (max-width: 64rem) { body { background-color: var(--background_color_60.0625rem); } [class~="index_content"] { height: 26.25rem; } [class~="education_container"] { font-size: var(--font_size_60.0625rem); } [class~="msclasses_container"] { max-width: 26.875rem; font-size: var(--font_size_60.0625rem); } [class~="myvirtualed_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_60.0625rem); } [class~="myvirtualed_container2"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_60.0625rem); } [class~="mycertificates_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 95.3125rem; font-size: var(--font_size_60.0625rem); } [class~="education_affiliations_container"] { font-size: var(--font_size_60.0625rem); } [class~="mycomputercomp_container"] { padding: 0.3125rem 0rem 0rem 0rem; max-width: 68.4375rem; font-size: var(--font_size_60.0625rem); } [class~="myprojects_container"] { max-width: 86.5625rem; font-size: var(--font_size_60.0625rem); } [class~="myprojects_descs_container"] { max-width: 86.5625rem; font-size: var(--font_size_60.0625rem); } [class~="pastaccomplishments_container"] { max-width: 95.3125rem; font-size: var(--font_size_60.0625rem); } [class~="my_signature"] { font-family: "Lucida Calligraphy", cursive; font-size: var(--font_size_60.0625rem); } } @media only screen and (min-width: 40.0625rem) and (max-width: 60rem) { body { background-color: var(--background_color_40.0625rem); } ***************************************************************/ [class~="navbar"] [class~="nav-links"] { transition: all 0.3s ease-in; } [class~="index_content"] { height: 23.4375rem; width: auto; } [class~="education_container"] { font-size: var(--font_size_40.0625rem); } [class~="msclasses_container"] { max-width: 26.875rem; font-size: var(--font_size_40.0625rem); } [class~="myvirtualed_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_40.0625rem); } [class~="myvirtualed_container2"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; font-size: var(--font_size_40.0625rem); } [class~="mycertificates_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 95.3125rem; font-size: var(--font_size_40.0625rem); } [class~="education_affiliations_container"] { font-size: var(--font_size_40.0625rem); } [class~="mycomputercomp_container"] { padding: 0.3125rem 0rem 0rem 0rem; max-width: 68.4375rem; font-size: var(--font_size_40.0625rem); } [class~="myprojects_container"] { max-width: 86.5625rem; font-size: var(--font_size_40.0625rem); } [class~="myprojects_descs_container"] { max-width: 86.5625rem; font-size: var(--font_size_40.0625rem); } [class~="pastaccomplishments_container"] { max-width: 95.3125rem; font-size: var(--font_size_40.0625rem); } [class~="my_signature"] { font-family: "Lucida Calligraphy", cursive; font-size: var(--font_size_40.0625rem); } } @media all and (min-width: 30.0625rem) and (max-width: 40rem) { body { background-color: var(--background_color_30.0625rem); } [class~="navbar"] [class~="nav-btn"] { display: inline-block; position: absolute; top: 0.9375rem; right: 0.625rem; } [class~="navbar"] [class~="nav-btn"] label { display: inline-block; height: 4.375rem; padding: 1.5625rem; } [class~="navbar"] [class~="nav-btn"] label span { display: block; height: 0.625rem; width: 1.5625rem; border-top: 0.1875rem solid #eee; } [class~="navbar"] [class~="nav-btn"] label:hover, [class~="navbar"] #nav-check:checked ~ [class~="nav-btn"] label { background-color: var(--hover_color); } [class~="toggle"] + a { display: none; } [class~="navbar"] [class~="nav-links"] { float: left; position: absolute; display: grid; width: 47%; padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; transition: all 0.3s ease-in; overflow-y: hidden; top: 5.625rem; right: 0rem; font-size: var(--font_size_1rem); font-family: var(--font_family); z-index: 1; } [class~="nav-links"] li label { float: left; position: relative; display: block; width: 100%; padding: 0.3125rem 0.625rem 0.125rem 0.75rem; overflow: hidden; right: 0rem; align-content: left; } [class~="navbar"] #nav-check:not(:checked) ~ [class~="nav-links"] { height: 0rem; } [class~="navbar"] #drop-1-check:not(:checked) ~ [class~="dropdown-content"] { display: none; } [class~="navbar"] #drop-2-check:not(:checked) ~ [class~="dropdown-content2"] { display: none; } [class~="navbar"] #drop-1-check:checked ~ [class~="dropdown-content"] { display: block; } [class~="navbar"] #drop-2-check:checked ~ [class~="dropdown-content2"] { display: block; } [class~="dropdown-content"], [class~="dropdown-content2"] { top: 0.625rem; position: inherit; display: block; background-color: var(--background_color_navbar); text-align: left; width: 105%; } [class~="dropdown-content"] li, [class~="dropdown-content2"] li { width: 130%; font-size: 0.9375rem; } [class~="toggle"]::after { content: " \25be"; right: 25rem; } [class~="index_container"] { width: 90%; height: auto; margin: 0 auto; display: flex; align-items: center; justify-content: center; } [class~="index_content"] { width: 100%; height: auto; display: flex; } [class~="quotes"] { display: flex; width: 100%; justify-content: center; font-family: var(--font_family_quotes_copyright); font-size: 1.25rem; font-style: var(--font_style); color: black; } [class~="msclasses_container"] { max-width: 23.4375rem; margin: auto; } [class~="myvirtualed_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; } [class~="myvirtualed_container2"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 48.75rem; margin: auto; } [class~="mycertificates_container"] { padding: 0.3125rem 0rem 0rem 0.3125rem; max-width: 95.3125rem; margin: auto; } [class~="mycomputercomp_container"] { padding: 0.3125rem 0rem 0rem 0rem; max-width: 68.4375rem; margin: auto; } [class~="myprojects_container"] { max-width: 86.5625rem; margin: auto; } [class~="myprojects_descs_container"] { max-width: 86.5625rem; margin: auto; } [class~="MyGroceryList_container"] { display: grid; flex-direction: column; place-items: center; margin-left: 50%; margin-right: 50%; padding-bottom: 1.875rem; } [class~="MyHomeCareList_container"] { display: grid; flex-direction: column; place-items: center; margin-left: 50%; margin-right: 50%; padding-bottom: 1.875rem; } [class~="MyTravelItemList_container"] { display: grid; flex-direction: column; place-items: center; margin-left: 50%; margin-right: 50%; padding-bottom: 1.875rem; } [class~="pastaccomplishments_container"] { max-width: 95.3125rem; margin: auto; } [class~="my_signature"] { font-family: "Lucida Calligraphy", cursive; font-size: var(--font_size_1rem); } [class~="footer"] { text-align: center; padding: 0.3125rem 0rem 1.875rem 0rem; position: absolute; bottom: 0; width: 100%; } [class~="copyright"] { width: 100%; justify-content: center; font-family: var(--font_family_quotes_copyright); font-size: 0.875rem; color: darkslategray; } } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } } @media all and (min-width: 20rem) and (max-width: 30rem) { body { padding-bottom: 4.6875rem; min-height: 100vh; background-color: var(--background_color_20rem); } [class~="navbar"] [class~="nav-btn"] { display: inline-block; position: absolute; top: 0.9375rem; right: 0.625rem; } [class~="navbar"] [class~="nav-btn"] label { display: inline-block; height: 4.375rem; padding: 1.5625rem; } [class~="navbar"] [class~="nav-btn"] label span { display: block; height: 0.625rem; width: 1.5625rem; border-top: 0.1875rem solid #eee; } [class~="navbar"] [class~="nav-btn"] label:hover, [class~="navbar"] #nav-check:checked ~ [class~="nav-btn"] label { background-color: var(--hover_color); } [class~="toggle"] + a { display: none; } [class~="navbar"] [class~="nav-links"] { float: left; position: absolute; display: grid; width: 47%; padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; transition: all 0.3s ease-in; overflow-y: hidden; top: 5.625rem; right: 0rem; font-size: var(--font_size_1rem); font-family: var(--font_family); z-index: 1; } [class~="nav-links"] li label { float: left; position: relative; display: block; width: 100%; padding: 0.3125rem 0.625rem 0.125rem 0.75rem; overflow: hidden; right: 0rem; align-content: left; } [class~="navbar"] #nav-check:not(:checked) ~ [class~="nav-links"] { height: 0rem; } [class~="navbar"] #drop-1-check:not(:checked) ~ [class~="dropdown-content"] { display: none; } [class~="navbar"] #drop-2-check:not(:checked) ~ [class~="dropdown-content2"] { display: none; } [class~="navbar"] #drop-1-check:not(:checked) ~ [class~="dropdown-content2"] { display: block; } [class~="navbar"] #drop-2-check:checked ~ [class~="dropdown-content2"] { display: block; } [class~="dropdown-content"], [class~="dropdown-content2"] { top: 0.625rem; position: inherit; display: block; background-color: var(--background_color_navbar); text-align: left; width: 105%; } [class~="dropdown-content"] li, [class~="dropdown-content2"] li { width: 130%; font-size: 0.9375rem; } [class~="toggle"]::after { content: " \25be"; right: 25rem; } [class~="index_container"] { width: 90%; height: auto; margin: 0 auto; display: flex; align-items: center; justify-content: center; } [class~="index_content"] { width: 100%; height: auto; display: flex; } [class~="quotes"] { display: flex; width: 100%; justify-content: center; font-family: var(--font_family_quotes_copyright); font-size: 1.25rem; font-style: var(--font_style); color: black; } [class~="education_container"] { display: flex; align-items: center; flex-grow: 1; flex-shrink: 1; flex-basis: 0; width: 100%; font-size: var(--font_size_1rem); } [class~="education_container"] > [class~="education_image1"], [class~="education_image2"], [class~="education_image3"] { display: inline-block; vertical-align: middle; text-align: center; padding: 0.3125rem 0rem 0rem 0rem; font-size: var(--font_size_1rem); } [class~="msclasses_container"] { font-family: var(--font_family); font-size: var(--font_size_1rem); text-align: center; padding: 0.3125rem 0rem 0rem 0rem; border: var(--border_type_and_color_phone); margin: auto; max-width: 22.8125rem; } [class~="msclasses_line"] { display: inline-block; text-align: left; align-content: center; list-style-type: none; } [class~="myvirtualed_container"] { display: flex; flex-direction: column; font-family: var(--font_family); font-size: var(--font_size_1rem); padding: 0.125rem 0rem 0rem 0rem; border: var(--border_type_and_color_phone); max-width: 48.75rem; margin: auto; } [class~="myvirtualed_container2"] { display: flex; flex-direction: column; font-family: var(--font_family); font-size: var(--font_size_1rem); padding: 0.125rem 0rem 0rem 0rem; border: var(--border_type_and_color_phone); max-width: 48.75rem; margin: auto; } [class~="mycertificates_container"] { font-family: var(--font_family); font-size: var(--font_size_1rem); text-align: center; padding: 0.3125rem 0rem 0rem 0rem; border: var(--border_type_and_color_phone); margin: auto; max-width: 95.3125rem; } [class~="education_affiliations_container"] div { font-family: var(--font_family); font-size: var(--font_size_1rem); margin: auto; max-width: 99.5%; } [class~="mycomputercomp_container"] { font-family: var(--font_family); font-size: var(--font_size_1rem); padding: 0.3125rem 0rem 0rem 0rem; border: var(--border_type_and_color_phone); margin: auto; max-width: 68.4375rem; } [class~="myprojects_container"] { font-family: var(--font_family); font-size: var(--font_size_1rem); text-align: center; padding: 0.3125rem 0rem 0.3125rem 0rem; border: var(--border_type_and_color_phone); margin: auto; max-width: 86.5625rem; } [class~="myprojects_descs_container"] { font-family: var(--font_family); font-size: var(--font_size_1rem); text-align: left; padding: 0.3125rem 0rem 0.3125rem 0rem; border: var(--border_type_and_color_phone); margin: auto; max-width: 86.5625rem; } [class~="MyGroceryList_container"] { display: grid; flex-direction: column; place-items: center; margin-left: 50%; margin-right: 50%; padding-bottom: 1.875rem; } [class~="MyHomeCareList_container"] { display: grid; flex-direction: column; place-items: center; margin-left: 50%; margin-right: 50%; padding-bottom: 1.875rem; } [class~="MyTravelItemList_container"] { display: grid; flex-direction: column; place-items: center; margin-left: 50%; margin-right: 50%; padding-bottom: 1.875rem; } [class~="pastaccomplishments_container"] { font-family: var(--font_family); font-size: var(--font_size_1rem); text-align: center; padding: 0.3125rem 0rem 0.4375rem 0rem; border: var(--border_type_and_color_phone); margin: auto; max-width: 95.3125rem; } [class~="my_signature"] { font-family: "Lucida Calligraphy", cursive; font-size: var(--font_size_1rem); } [class~="footer"] { text-align: center; padding: 0rem 0rem 3.625rem 0rem; position: absolute; bottom: 0; width: 100%; } [class~="copyright"] { width: 100%; justify-content: center; font-family: var(--font_family_quotes_copyright); font-size: 0.875rem; color: darkslategray; } nav ul li { display: flex; width: 100%; } }