/* Test */ /* @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); */ * { /* all: unset; */ margin: 0; /* When these properties are set to 0, they do not require a unit of measurement. */ padding: 0; color: black; text-decoration: none; } html { font-family: /* Roboto, */ Helvetica Neue, Arial, Helvetica, sans-serif; /* height: 100%; */ } a:hover { color: #89cff0; font-weight: 800; } a:active { font-weight: 800; } a:visited { font-weight: 800; } /* main { display: grid; } */ /* header */ header { position: fixed; z-index: 999; width: 100%; padding: 25px 0; background-color: white; /* otherwise will be transparent */ } .header-content { width: 80%; margin: 0 auto; } .simo-header { width: 15%; display: inline-block; font-size: 1.2rem; font-weight: 800; letter-spacing: 0.1em; } .header-nav { display: inline-block; list-style: none; } .header-nav-item { display: inline-block; margin: 0 20px 0 0; font-size: 0.875rem; } .color-toggle { /* display: inline-block; */ float: right; /* position: fixed; right: 5rem; */ } .light-toggle-btn { display: flex; flex-direction: column; justify-content: center; background-color: #89cff0; border-radius: 0.375rem; border-style: none; } .color-toggle-svg { width: 1.25rem; padding: 2.25px; } .dark-toggle-btn { display: none; flex-direction: column; justify-content: center; background-color: rgb(253,186,116); border-radius: 0.375rem; border-style: none; } /* main */ .main-content { margin: 0 auto; width: 80%; } .profile-picture-headings { padding: 79.2px 0 0; display: flex; } .profile-headings { /* display: inline-block; */ /* height: 200px; */ padding: 0px 0 0 25px; margin: auto 0; flex-basis: 1 1 539.14px; } .simo-heading { text-transform: uppercase; font-size: 1.875rem; margin: 0 0 15px 0; } .profile-pic { max-width: 250px; border-radius: 50%; } .introductory-paragraph { margin: 30px 0px; } .job-title { margin: 10px 0; } .location { margin: 10px 0; color: grey; } .heading-space { display: none; } .skills { margin: 12.5px 0; } .skill { border-radius: 0.125rem; font-size: 0.75rem; background-color: rgb(229 231 235); padding: 4px 8px; } .github { font-size: 1.75rem; margin: 0 7.5px 0 0; } .linkedin { font-size: 1.75rem; } .introductory-paragraph a { text-decoration: underline; } /* Below is from the animation script, this is injected into bottom of ; was experimenting to see what would happen if put it here */ /* .typewrite > .wrap { border-right: 0.08em solid #000}" */ .animation { display: inline-block; margin: 10px 0; font-size: 0.8rem; } .animation h1 { display: inline-block; } .ani-start { margin: 0 0.15em 0 0; } .bookshelf-container { padding: 60px 0; width: 100%; } .bookshelf-heading { font-size: 1.2rem; } .bookshelf { margin: 30px auto 0; width: 80%; display: flex; flex-wrap: wrap; justify-content: center; } .book-div { display: inline-block; } .book { width: 110px; height: auto; } footer { position: absolute; bottom: 0; width: 100%; z-index: 998; /* left: 0; */ background: white; } .footer-div { width: 80%; margin: 0 auto; display: flex; justify-content: center; padding: 20px 0; } body { position: relative; min-height: 100vh; } /* contact_me.html Contact Me Form */ .contact-form { margin: 0 auto; padding: 100px 0 0 0; width: 58.333%; } form h1, form input, form textarea, form button { display: block; } form input, form textarea, form button { border-radius: .375rem; /* Rounded borders */ } form input, form textarea { border: 2px solid #e5e7eb; /* Gray border */ width: 100%; padding: 8px; font-weight: 900px; } form h1 { font-size: 1.5rem; /* text-decoration: underline; */ color: black; margin: 0 0 15px; display: inline-block; } #email { margin: 8px 0; } form textarea { font-family: Helvetica Neue, Arial, Helvetica, sans-serif; margin: 0 0 16px; } form button { padding: 12px 32px; /* background-color: #89cff0; */ /* Bc has a border-radius set in above CSS rule, need to explicitly state how want border styled ow will be default */ border: 0 none; background-image: linear-gradient(to right, #32cd32,#89cff0); } form button:hover { box-shadow: 0 8px 10px 0 rgba(0,0,0,0.1); } .button-text { font-size: 1rem; color: white; font-weight: 600; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; } /* projects.html */ .main-content-projects { margin: 0 auto; width: 80%; } .projects-heading { padding: 110px 0 0 0; font-size: 1.875rem; } .projects { padding: 100px 0 0 0; display: flex; } .plCompToolImage { width: 350px; border-radius: 0.375rem; } .plCompToolHeading { font-size: 1rem; margin: 5px auto 0; width: max-content; } /* Media Queries for Responsive Design */ @media screen and (max-width: 986px) { .skill { font-size: 0.6rem; padding: 3px 6px; } .profile-pic { /* max-width: 175px; height: auto; */ } } @media screen and (max-width: 768px) { .contact-form { width: 100%; } .simo-header { margin: 0 20px 0 0; } /* K* Put this at the bottom , BC OW, CSS declartion of width: 58.3% above, would OVERRIDE this, EVEN when the condition is MET!*/ } @media screen and (max-width: 700px) { .profile-pic { width: 175px; height: 171px; } .simo-heading { font-size: 1.5rem; margin: 0 0 10px; } .color-toggle { right: 5rem; } .animation { font-size: 0.65rem; } .github { font-size: 1.3rem; margin: 0 4px 0 0; } .linkedin { font-size: 1.3rem; } .profile-picture-headings { margin: 0 0 40px; } .profile-headings { padding: 10px 0 0 20px; } .skills { margin: 7.5px 0; } .job-title, .location { margin: 5px; } .introductory-paragraph { margin: 5px 0px 30px; font-size: 0.9rem; } .simo-header { font-size: 1.0rem; } .header-nav-item { font-size: 0.75rem; } .book { width: 100px; height: auto; } } @media screen and (max-width: 600px) { header { padding: 16px 0; } .simo-header { font-size: 0.9rem; } .header-nav-item { font-size: 0.75rem; margin: 0 10px 0 0; } .color-toggle-svg { width: 1rem; padding: 2px; } .profile-picture-headings { display: block; padding: 55px 0 0; margin: 0 0 25px; } img { display: block; margin: 0 auto; } .profile-headings { display: block; margin: 0 auto; padding: 10px 0 0; } .simo-heading, .job-title, .location, .skills { display: flex; justify-content: center; flex-wrap: wrap; } .heading-space { display: inline; } .skill { margin: 1px 1px; } .professional-links { display: flex; justify-content: center; } .animation { font-size: 0.6rem; margin: 10px 0 0; height: 46px; } .bookshelf-heading { font-size: 1rem; } .bookshelf-container { padding: 27px 0 60px; } .book { width: 75px; height: auto; } /* projects.html */ .plCompToolImage { width: 225px; border-radius: 0.3rem; } .plCompToolHeading { font-size: 0.7rem; margin: 3px auto 0; } .projects { padding: 75px 0 0 0; } } @media screen and (max-width: 388px) { .header-content { width: 90%; } .simo-header { font-size: 0.9rem; } .header-nav-item { font-size: 0.75rem; margin: 0 7.5px 0 0; } .skill { font-size: 0.6rem; padding: 3px 6px; margin: 1px 1px; } .introductory-paragraph { font-size: 0.8rem; margin: 5px auto 20px; } /* projects.html */ .plCompToolImage { width: 130px; border-radius: 0.3rem; } .plCompToolHeading { font-size: 0.4rem; margin: 3px auto 0; } .projects { padding: 60px 0 0 0; } .main-content-projects { width: 90%; } } @media screen and (max-width: 340px) { .simo-header { font-size: .75rem; margin: 0 3px 0 0; } .header-nav-item { font-size: 0.7rem; margin: 0 4px 0 0; } .introductory-paragraph { font-size: 0.75rem; } } .dark-mode { color: white; background-color: black; }