index.css

body {
  height: 100vh;
  background-image: url(assets/geoBackground.crdownload);
  background-size: cover;
  margin: 0;
  font-family: "Dosis", sans-serif; }

.displayNone {
  display: none; }

.nav {
  background-color: white;
  height: 20vh;
  min-height: 105px;
  width: 100vw;
  margin: 0;
  border-bottom: 10px solid #6bbebd;
  padding: 1vh 3vw 1vh 3vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline; }

.nav-name {
  font-size: 5rem;
  white-space: nowrap;
  margin-right: 5vw; }

.nav-name:hover {
  text-decoration: underline;
  text-decoration-color: #ffc444; }

.nav-links {
  height: fit-content;
  width: 50vw;
  min-width: 185px;
  font-size: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }
  .nav-links a:hover {
    text-decoration: underline;
    text-decoration-color: #ffc444; }

.main {
  border: 4px solid black;
  width: 80vw;
  height: fit-content;
  margin: 10vh 10vw 10vh 10vw;
  font-size: 2rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.85); }

.main__Profile {
  padding: 5vh 5vw 5vh 5vw; }
  .main__Profile :first-child {
    color: #6bbebd;
    font-size: 3rem;
    font-weight: bold;
    padding-right: 1vw; }

.main__Skills {
  padding: 5vh 5vw 5vh 5vw;
  box-sizing: border-box; }

.main__Skills__TableCont {
  max-width: 70vw;
  overflow-x: scroll; }

.main__Skills__Table {
  font-size: 1.2rem;
  border-collapse: collapse;
  box-sizing: border-box;
  background-color: white;
  width: 100%; }
  .main__Skills__Table th {
    background-color: #ffc444; }
  .main__Skills__Table th, .main__Skills__Table td {
    padding: 1vh 1vw 1vh 1vw;
    box-sizing: border-box;
    border: 1px solid #ddd; }

.main__Skills__CV {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  height: 10vh;
  padding: 2vh 0 2vh 0; }
  .main__Skills__CV img {
    box-sizing: border-box;
    height: 15vh;
    margin-bottom: -5vh;
    margin-left: 1vw; }
  .main__Skills__CV img:hover {
    background-color: rgba(234, 165, 37, 0.4); }

.main__Projects {
  padding: 5vh 5vw 5vh 5vw; }

.main__Projects__Photos {
  display: flex;
  justify-content: space-around;
  width: 70vw; }
  .main__Projects__Photos img {
    width: 16.5vw;
    height: auto; }
  .main__Projects__Photos img:hover {
    box-sizing: border-box;
    border: 3px solid #ffc444; }
  .main__Projects__Photos a {
    width: fit-content; }

.main__Contact {
  padding: 5vh 5vw 5vh 5vw; }

.main__Contact__Cont {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; }

.main__Contact__Form {
  width: 50vw;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  text-align: left;
  font-size: 1.5rem; }
  .main__Contact__Form input {
    width: 50vw;
    padding: 2vh 1vw 2vh 1vw;
    border: 1px solid #6bbebd;
    box-sizing: border-box; }
  .main__Contact__Form input:focus {
    outline: 2px solid #ffc444; }
  .main__Contact__Form textarea {
    width: 50vw;
    padding: 2vh 1vw 2vh 1vw;
    height: 10vh;
    border: 1px solid #6bbebd;
    box-sizing: border-box; }
  .main__Contact__Form textarea:focus {
    outline: 2px solid #ffc444; }
  .main__Contact__Form label {
    width: 50vw;
    padding: 1vh 0 1vh 0; }
  .main__Contact__Form :nth-child(7) {
    width: 12vw;
    height: 8vh;
    align-self: center;
    background-color: #ffc444;
    border: none;
    margin-top: 2vh;
    font-family: "Dosis", sans-serif;
    font-size: 1.5rem;
    padding: 1vh 2vw 1vh 2vw;
    text-align: center; }
  .main__Contact__Form :nth-child(7):focus {
    background-color: white;
    outline: none;
    border: 1px solid #ffc444; }

.main__Contact__Links {
  width: 17.5vw;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-left: 2.5vw;
  border-left: 1px solid black;
  padding-left: 2.5vw; }
  .main__Contact__Links img {
    width: 5vw; }
  .main__Contact__Links a {
    height: fit-content; }

@media screen and (max-width: 900px) {
  .nav {
    height: 10vh;
    min-height: 55px; }

  .nav-name {
    font-size: 2rem; }

  .nav-links {
    font-size: 1.25rem; }
    .nav-links a:click {
      text-decoration: underline;
      text-decoration-color: #ffc444; }

  .main {
    font-size: 1.25rem;
    width: fit-content;
    margin: 5vh auto 5vh auto; }

  .main__Profile {
    width: 70vw; }

  .main__Skills {
    padding: 2vh 5vw 2vh 5vw;
    width: 70vw;
    height: fit-content;
    overflow-y: none;
    box-sizing: border-box; }

  .main__Skills__Table {
    font-size: 1rem; }

  .main__Skills__CV img {
    height: 10vh;
    margin-bottom: -4vh; }

  .main__Contact__Form {
    width: 40vw; }
    .main__Contact__Form input {
      width: 40vw; }
    .main__Contact__Form label {
      width: 40vw; }
    .main__Contact__Form textarea {
      width: 40vw; }

  .main__Contact__Links {
    width: 30vw;
    font-size: 1rem; } }
@media screen and (max-width: 500px) {
  .main {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center; }

  .main__Skills__CV {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: justify-content;
    padding-bottom: 0; }
    .main__Skills__CV p {
      margin-bottom: 0;
      width: 100%; }
    .main__Skills__CV img {
      margin: 1vh 1vw 0 1vw; }

  .main__Projects__Photos {
    flex-direction: row;
    height: 70vh;
    flex-wrap: wrap;
    justify-content: space-around; }
    .main__Projects__Photos img {
      width: 27vw; }

  .main__Contact__Cont {
    flex-direction: column;
    width: fit-content;
    height: 70vh;
    justify-content: distribute-space; }

  .main__Contact__Form {
    font-size: 1.25rem;
    width: 60vw; }
    .main__Contact__Form input {
      width: 60vw; }
    .main__Contact__Form label {
      width: 60vw; }
    .main__Contact__Form textarea {
      width: 60vw; }
    .main__Contact__Form :nth-child(7) {
      width: 60vw;
      height: 5vh;
      font-size: 1.25rem;
      padding: 0; }

  .main__Contact__Links {
    border-top: 1px solid black;
    border-left: none;
    margin: 5vh 0 0 0;
    padding: 5vh 0 0 0;
    width: 60vw;
    flex-direction: row;
    flex-wrap: wrap; }
    .main__Contact__Links img {
      width: 10vw; }
    .main__Contact__Links span {
      width: 100%;
      margin-bottom: 5vh; }
    .main__Contact__Links :first-child {
      order: 1; }
    .main__Contact__Links :nth-child(3) {
      order: 1; } }

/*# sourceMappingURL=index.CSS.map */