Accessibility upgrade

1 files changed, 0 insertions, 489 deletions

diff --git a/style.css b/style.css
deleted file mode 100644
index 520ecfa..0000000
--- a/style.css
+++ /dev/null
@@ -1,489 +0,0 @@
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes moveInLeft {
-  0% {
-    opacity: 0;
-    transform: translateX(-10rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(0);
-  }
-}
-@keyframes moveInRight {
-  0% {
-    opacity: 0;
-    transform: translateX(10rem) skewX(-12deg);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(0) skewX(-12deg);
-  }
-}
-@keyframes moveInRightMobile {
-  0% {
-    opacity: 0;
-    transform: translateX(10rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(0);
-  }
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: inherit;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  min-height: 100vh;
-  width: 100vw;
-}
-
-body {
-  background: linear-gradient(
-    45deg,
-    rgba(2, 48, 89, 0.89) 0%,
-    rgba(9, 61, 94, 0.84) 100%
-  );
-  background-repeat: no-repeat;
-  background-size: cover;
-  box-sizing: border-box;
-  color: #ececec;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  font-family: "Inter", sans-serif;
-  font-size: 1.1rem;
-  line-height: 1.5;
-}
-
-main {
-  height: 100%;
-  margin: 3rem 4rem 2rem 4rem;
-}
-main * {
-  animation: fade-in 2s ease-out;
-}
-@media screen and (max-width: 600px) {
-  main {
-    margin: 2rem 0.5rem;
-  }
-}
-
-::selection {
-  background-color: #ececec;
-  color: #252424;
-}
-
-.text-link {
-  color: #e79759;
-}
-.text-link:hover {
-  background-color: #e79759;
-  border-radius: 2px;
-  color: #252424;
-  text-decoration: none;
-}
-
-.text-emphasis {
-  color: #ecbf4b;
-  font-weight: bold;
-}
-
-.title {
-  font-family: "Archivo Black", sans-serif;
-  color: #ecbf4b;
-  font-size: 2rem;
-  width: fit-content;
-}
-
-.subtitle {
-  font-family: "Archivo Black", sans-serif;
-  color: #e79759;
-  font-size: 1.5rem;
-}
-
-.name {
-  font-size: 4rem;
-}
-
-.note-auriga {
-  color: #e79759;
-  font-style: italic;
-}
-
-nav {
-  background-color: #173d5a;
-  font-family: "Archivo Black", sans-serif;
-  height: 10vh;
-  width: 100vw;
-}
-@media screen and (max-width: 980px) {
-  nav {
-    height: fit-content;
-  }
-}
-nav ul {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  height: 100%;
-  list-style-type: none;
-  padding: 0 3rem;
-  width: 100%;
-}
-@media screen and (max-width: 980px) {
-  nav ul {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    padding: 1.5rem 0;
-  }
-}
-nav li:first-child {
-  text-align: left;
-  margin-right: auto;
-}
-@media screen and (max-width: 980px) {
-  nav li:first-child {
-    text-align: center;
-    margin-right: 1.5rem;
-  }
-}
-nav li a {
-  display: block;
-  color: inherit;
-  font-size: 1.5rem;
-  padding: 0 1.5rem;
-  text-align: center;
-  transition: transform 0.3s;
-  text-decoration: none;
-  white-space: nowrap;
-}
-nav li a:hover {
-  color: #ecbf4b;
-  transform: translateY(-0.3rem);
-}
-@media screen and (max-width: 980px) {
-  nav li a {
-    font-size: 2rem;
-  }
-}
-
-.about-section {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  margin: 3rem auto;
-}
-@media screen and (max-width: 1400px) {
-  .about-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 8rem auto;
-    width: 80%;
-  }
-}
-@media screen and (max-width: 600px) {
-  .about-section {
-    margin: 3rem auto;
-  }
-}
-
-.welcome-section {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: center;
-  justify-content: center;
-  gap: 8rem;
-  margin: 3rem auto;
-  width: 60%;
-}
-@media screen and (max-width: 1400px) {
-  .welcome-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4rem;
-    margin: 8rem auto;
-    width: 80%;
-  }
-}
-@media screen and (max-width: 600px) {
-  .welcome-section {
-    margin: 3rem auto;
-  }
-}
-.welcome-section .welcome-intro {
-  border-radius: 10px;
-  outline: 3px solid #e79759;
-  outline-offset: 1rem;
-}
-
-.projects-section {
-  margin: 10rem auto;
-  width: 80%;
-}
-.projects-section h2 {
-  margin-bottom: 5rem;
-}
-.projects-section > div:not(:nth-child(2)) {
-  margin-top: 10rem;
-}
-@media screen and (max-width: 1400px) {
-  .projects-section {
-    margin: 8rem auto;
-    width: 80%;
-  }
-}
-@media screen and (max-width: 600px) {
-  .projects-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 8rem 0;
-    width: 100%;
-  }
-}
-
-.contact-section {
-  margin: 10rem auto;
-  width: 80%;
-}
-.contact-section h2 {
-  margin-bottom: 5rem;
-}
-@media screen and (max-width: 1400px) {
-  .contact-section {
-    margin: 8rem auto;
-    width: 80%;
-  }
-}
-@media screen and (max-width: 600px) {
-  .contact-section {
-    margin: 3rem auto;
-  }
-}
-
-footer {
-  background-color: #173d5a;
-  width: 100vw;
-}
-footer * {
-  margin: 3rem 4rem 2rem 4rem;
-}
-@media screen and (max-width: 600px) {
-  footer * {
-    margin: 2rem;
-  }
-}
-footer dl {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 2rem;
-}
-@media screen and (max-width: 600px) {
-  footer dl {
-    flex-direction: column;
-    height: max-content;
-  }
-}
-footer dl * {
-  color: inherit;
-  font-size: 1.5rem;
-  margin: 0.5rem;
-  transition: transform 0.3s;
-}
-@media screen and (max-width: 600px) {
-  footer dl * {
-    font-size: 1.3rem;
-    margin: 0.3rem;
-  }
-}
-footer dl dd i:hover {
-  color: #ecbf4b;
-  transform: translateY(-0.3rem);
-}
-footer p {
-  text-align: center;
-}
-footer .big-icon {
-  font-size: 2rem;
-}
-
-.text-container {
-  background-color: #173d5a;
-  border-radius: 10px;
-  box-shadow: 0 2rem 3.5rem rgba(0, 0, 0, 0.6);
-  padding: 3.5rem;
-  transform: skewX(-12deg);
-  width: 50%;
-}
-@media screen and (max-width: 1400px) {
-  .text-container {
-    transform: skewX(0);
-    width: auto;
-  }
-}
-@media screen and (max-width: 600px) {
-  .text-container {
-    padding: 1rem;
-  }
-}
-.text-container p:not(:last-child) {
-  margin-bottom: 1.5rem;
-}
-
-.text-about {
-  animation: moveInRight 2s ease-out;
-  backface-visibility: hidden;
-}
-@media screen and (max-width: 1400px) {
-  .text-about {
-    animation: moveInRightMobile 2s ease-out;
-    margin-top: 5rem;
-  }
-}
-
-.portrait-container {
-  height: 50vh;
-  width: fit-content;
-  animation: moveInLeft 2s ease-out;
-  backface-visibility: hidden;
-}
-.portrait-container img {
-  border-radius: 25px;
-  height: 100%;
-  width: 100%;
-  object-fit: scale-down;
-}
-
-.project-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  gap: 2rem;
-}
-@media screen and (max-width: 1400px) {
-  .project-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 5rem;
-    /* 
-    important for second project, otherwise screenshot below text-container;
-    could be done with separate class for 2nd project and flex-dir: col-reverse for media query too
-    */
-  }
-  .project-container > img {
-    order: -1;
-  }
-}
-
-.project-screenshot {
-  border-radius: 10px;
-  outline: 5px solid #e79759;
-  outline-offset: 1.5rem;
-  object-fit: scale-down;
-  width: 40%;
-  transition: transform 0.6s ease;
-}
-@media screen and (max-width: 1400px) {
-  .project-screenshot {
-    width: 80%;
-  }
-}
-.project-screenshot:hover {
-  transform: scale(1.2);
-  z-index: 100;
-}
-
-.messenger-form {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
-  width: 50%;
-}
-@media screen and (max-width: 1400px) {
-  .messenger-form {
-    width: 100%;
-  }
-}
-.messenger-form div {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-direction: column;
-  gap: 1rem;
-}
-.messenger-form div.text-area {
-  grid-column: 1/3;
-}
-.messenger-form label {
-  font-weight: bold;
-}
-.messenger-form input,
-.messenger-form textarea {
-  background-color: #ececec;
-  border: none;
-  border-radius: 10px;
-  padding: 0.5rem;
-  width: 100%;
-}
-.messenger-form input:focus,
-.messenger-form textarea:focus {
-  color: #ececec;
-  background-color: #173d5a;
-  outline: 3px solid #e79759;
-}
-
-@media screen and (max-width: 820px) {
-  .messenger-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-  .messenger-form div {
-    width: 100%;
-  }
-}
-button {
-  color: #252424;
-  background-color: #ecbf4b;
-  border: none;
-  border-radius: 10px;
-  font-style: inherit;
-  font-weight: bold;
-  padding: 0.7rem;
-  text-transform: uppercase;
-  width: 8rem;
-}
-button:hover {
-  background-color: #e79759;
-}
-button:active {
-  outline: 3px solid #252424;
-}