html {
  padding: 0px;
  margin: 0px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: "Open Sans", sans-serif;
  background: #102E4A;
}
html body {
  background: url("../images/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  padding: 0px;
  margin: 0px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #63ADF2;
  border-radius: 4px;
}

.icons {
  position: absolute;
  top: 5px;
  width: 100%;
  height: calc(100vh - 73px);
  max-width: 100vw;
  padding-bottom: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.icons .empty {
  height: 170px;
  width: 170px;
  margin: 10px;
}
@media screen and (max-height: 1022px) {
  .icons .empty {
    height: 120px;
    width: 120px;
  }
}
.icons .empty .fill0 {
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}
.icons .empty .fill0 .imagefill0 {
  background: url("../images/currentfolder.svg");
  background-size: cover;
  height: 100%;
  width: 100%;
  float: left;
  top: 0;
  left: 0;
}
@media screen and (max-height: 1022px) {
  .icons .empty .fill0 .imagefill0 {
    height: 100px;
    width: 100px;
  }
}
.icons .empty .fill1 {
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}
.icons .empty .fill1 .imagefill1 {
  background: url("../images/3dfolder.svg");
  background-size: cover;
  height: 100%;
  width: 100%;
  float: left;
}
@media screen and (max-height: 1022px) {
  .icons .empty .fill1 .imagefill1 {
    height: 100px;
    width: 100px;
  }
}
.icons .empty .fill2 {
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}
.icons .empty .fill2 .imagefill2 {
  background: url("../images/webfolder.svg");
  background-size: cover;
  height: 100%;
  width: 100%;
  float: left;
}
@media screen and (max-height: 1022px) {
  .icons .empty .fill2 .imagefill2 {
    height: 100px;
    width: 100px;
  }
}
.icons .empty .fill3 {
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}
.icons .empty .fill3 .imagefill3 {
  background: url("../images/photofolder.svg");
  background-size: cover;
  height: 100%;
  width: 100%;
  float: left;
}
@media screen and (max-height: 1022px) {
  .icons .empty .fill3 .imagefill3 {
    height: 100px;
    width: 100px;
  }
}
.icons .empty .fill4 {
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}
.icons .empty .fill4 .imagefill4 {
  background: url("../images/contact.svg");
  background-size: cover;
  height: 100%;
  width: 100%;
  float: left;
}
@media screen and (max-height: 1022px) {
  .icons .empty .fill4 .imagefill4 {
    height: 100px;
    width: 100px;
  }
}
.icons .empty .fill5 {
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}
.icons .empty .fill5 .imagefill5 {
  background: url("../images/about-me.svg");
  background-size: cover;
  height: 100%;
  width: 100%;
  float: left;
}
@media screen and (max-height: 1022px) {
  .icons .empty .fill5 .imagefill5 {
    height: 100px;
    width: 100px;
  }
}

.hold {
  border: 4px solid lightblue;
}

.hovered0 {
  z-index: -4;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 4px solid rgba(44, 130, 201, 0.6);
  background: rgba(137, 196, 244, 0.5);
}
@media screen and (max-height: 1022px) {
  .hovered0 {
    height: 100px;
    width: 100px;
  }
}

.hovered1 {
  z-index: -4;
  height: 100%;
  width: 100%;
  border: 4px solid rgba(44, 130, 201, 0.6);
  background: rgba(137, 196, 244, 0.5);
}
@media screen and (max-height: 1022px) {
  .hovered1 {
    height: 100px;
    width: 100px;
  }
}

.hovered2 {
  z-index: -4;
  height: 100%;
  width: 100%;
  border: 4px solid rgba(44, 130, 201, 0.6);
  background: rgba(137, 196, 244, 0.5);
}
@media screen and (max-height: 1022px) {
  .hovered2 {
    height: 100px;
    width: 100px;
  }
}

.hovered3 {
  z-index: -4;
  height: 100%;
  width: 100%;
  border: 4px solid rgba(44, 130, 201, 0.6);
  background: rgba(137, 196, 244, 0.5);
}
@media screen and (max-height: 1022px) {
  .hovered3 {
    height: 100px;
    width: 100px;
  }
}

.hovered4 {
  z-index: -4;
  height: 100%;
  width: 100%;
  border: 4px solid rgba(44, 130, 201, 0.6);
  background: rgba(137, 196, 244, 0.5);
}
@media screen and (max-height: 1022px) {
  .hovered4 {
    height: 100px;
    width: 100px;
  }
}

.hovered5 {
  z-index: -4;
  height: 100%;
  width: 100%;
  border: 4px solid rgba(44, 130, 201, 0.6);
  background: rgba(137, 196, 244, 0.5);
}
@media screen and (max-height: 1022px) {
  .hovered5 {
    height: 100px;
    width: 100px;
  }
}

.invisible {
  display: none;
}

.bottom {
  position: absolute;
  background: #F1EDEE;
  width: calc(100vw - 8px);
  height: 65px;
  padding: 0px;
  top: calc(100vh - 73px);
  border: 4px solid #DBD0D3;
}
.bottom .startbar {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  height: 40px;
}
.bottom .startbar img {
  height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 5px;
  border: 5px solid #DBD0D3;
}
.bottom .tasks {
  position: absolute;
  top: 2px;
  padding-bottom: 5px;
  margin-left: 160px;
  height: 40px;
  width: 80%;
}
.bottom .tasks .taskContainer {
  display: flex;
  width: 100%;
}
.bottom .tasks .taskContainer .indiTask {
  top: 0;
  min-width: 110px;
  margin-right: 20px;
  text-align: center;
  height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 0px;
  padding-bottom: 10px;
  border: 5px solid #DBD0D3;
}
.bottom .tasks .taskContainer .indiTask:hover {
  background: #DBD0D3;
  cursor: pointer;
}
.bottom .rightbar {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 200px;
  height: 60px;
  padding-bottom: 5px;
  padding-right: 10px;
  border: 5px solid #DBD0D3;
  font-size: 24px;
  text-align: right;
  display: inline;
}
.bottom .rightbar div {
  padding-top: 10px;
}
.bottom .rightbar .sound {
  padding-left: 10px;
}
.bottom .rightbar .sound .soundBar {
  display: none;
  border: 5px solid #DBD0D3;
  background: #F1EDEE;
  width: 75px;
  position: absolute;
  bottom: 75px;
  height: 270px;
  padding: 0;
  left: 0;
}
.bottom .rightbar .sound .soundBar input {
  -webkit-appearance: none;
  position: absolute;
  writing-mode: bt-lr;
  /* IE */
  -webkit-appearance: slider-vertical;
  height: 200px;
  border-radius: 5px;
  outline: none;
  margin: 0;
  padding: 0;
  left: -25px;
}
.bottom .rightbar .sound .soundBar img {
  height: 40px;
  position: absolute;
  bottom: 10px;
  left: 20px;
}
.bottom .rightbar .sound img {
  height: 40px;
  float: left;
  padding: 0;
  margin: 0;
}
.bottom .rightbar .time:hover {
  cursor: pointer;
}
.bottom .rightbar .calender {
  position: absolute;
  background: #F1EDEE;
  top: -430px;
  right: 0;
  width: 400px;
  height: 400px;
  border: 5px solid #DBD0D3;
  display: none;
}
.bottom .rightbar .calender .allCalender {
  padding: 0;
  margin: 0;
}
.bottom .rightbar .calender .allCalender .topDate {
  position: absolute;
  left: 10px;
  top: 0px;
  width: 100%;
  text-align: left;
}
.bottom .rightbar .calender .allCalender .topDate .prevMonth {
  position: absolute;
  right: 50px;
  cursor: pointer;
}
.bottom .rightbar .calender .allCalender .topDate .nextMonth {
  position: absolute;
  right: 30px;
  cursor: pointer;
}
.bottom .rightbar .calender .allCalender .dayGrid {
  padding-top: 50px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.bottom .rightbar .calender .allCalender .dayGrid div {
  height: 40px;
  text-align: center;
}
.bottom .rightbar .calender .allCalender .dayGrid .currentDay {
  background-color: #102E4A;
  color: white;
}
.bottom .rightbar .calender .allCalender .dayGrid .emptydate {
  color: rgba(13, 19, 33, 0.5);
}

audio {
  display: none;
}

#currentWorkWindow, #greatArtHeist, #streamerRoom, #threeDWorkWindow, #dbqSoccer, #merge, #neon, #webWorkWindow, #easierGames, #easierTickets, #inspire, #photoWorkWindow, #amsterdam, #italy, #ireland, #contactWindow, #aboutMe {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 40vh;
  width: 50vw;
  display: none;
  grid-template-columns: 100%;
  border: lightgray 3px solid;
  overflow: hidden;
}
#currentWorkWindow .topbar, #greatArtHeist .topbar, #streamerRoom .topbar, #threeDWorkWindow .topbar, #dbqSoccer .topbar, #merge .topbar, #neon .topbar, #webWorkWindow .topbar, #easierGames .topbar, #easierTickets .topbar, #inspire .topbar, #photoWorkWindow .topbar, #amsterdam .topbar, #italy .topbar, #ireland .topbar, #contactWindow .topbar, #aboutMe .topbar {
  height: 50px;
  right: 0;
  margin: 0;
  padding: 0;
  background: linear-gradient(0.25turn, #000181, #1084D0);
  z-index: 1;
  width: 100%;
}
#currentWorkWindow .topbar .topbarText, #greatArtHeist .topbar .topbarText, #streamerRoom .topbar .topbarText, #threeDWorkWindow .topbar .topbarText, #dbqSoccer .topbar .topbarText, #merge .topbar .topbarText, #neon .topbar .topbarText, #webWorkWindow .topbar .topbarText, #easierGames .topbar .topbarText, #easierTickets .topbar .topbarText, #inspire .topbar .topbarText, #photoWorkWindow .topbar .topbarText, #amsterdam .topbar .topbarText, #italy .topbar .topbarText, #ireland .topbar .topbarText, #contactWindow .topbar .topbarText, #aboutMe .topbar .topbarText {
  position: absolute;
  color: white;
  left: 20px;
  font-weight: bold;
}
#currentWorkWindow .topbar .close, #greatArtHeist .topbar .close, #streamerRoom .topbar .close, #threeDWorkWindow .topbar .close, #dbqSoccer .topbar .close, #merge .topbar .close, #neon .topbar .close, #webWorkWindow .topbar .close, #easierGames .topbar .close, #easierTickets .topbar .close, #inspire .topbar .close, #photoWorkWindow .topbar .close, #amsterdam .topbar .close, #italy .topbar .close, #ireland .topbar .close, #contactWindow .topbar .close, #aboutMe .topbar .close {
  position: absolute;
  top: 5px;
  right: 20px;
  cursor: pointer;
  background-color: red;
  color: white;
  padding: 6px;
}
#currentWorkWindow .topbar .maximize, #greatArtHeist .topbar .maximize, #streamerRoom .topbar .maximize, #threeDWorkWindow .topbar .maximize, #dbqSoccer .topbar .maximize, #merge .topbar .maximize, #neon .topbar .maximize, #webWorkWindow .topbar .maximize, #easierGames .topbar .maximize, #easierTickets .topbar .maximize, #inspire .topbar .maximize, #photoWorkWindow .topbar .maximize, #amsterdam .topbar .maximize, #italy .topbar .maximize, #ireland .topbar .maximize, #contactWindow .topbar .maximize, #aboutMe .topbar .maximize {
  position: absolute;
  top: 5px;
  right: 60px;
  cursor: pointer;
  background-color: blue;
  color: white;
  padding: 5px;
}
#currentWorkWindow .topbar .minimize, #greatArtHeist .topbar .minimize, #streamerRoom .topbar .minimize, #threeDWorkWindow .topbar .minimize, #dbqSoccer .topbar .minimize, #merge .topbar .minimize, #neon .topbar .minimize, #webWorkWindow .topbar .minimize, #easierGames .topbar .minimize, #easierTickets .topbar .minimize, #inspire .topbar .minimize, #photoWorkWindow .topbar .minimize, #amsterdam .topbar .minimize, #italy .topbar .minimize, #ireland .topbar .minimize, #contactWindow .topbar .minimize, #aboutMe .topbar .minimize {
  position: absolute;
  top: 5px;
  right: 100px;
  cursor: pointer;
  background-color: blue;
  color: white;
  padding: 5px;
}
#currentWorkWindow .window, #greatArtHeist .window, #streamerRoom .window, #threeDWorkWindow .window, #dbqSoccer .window, #merge .window, #neon .window, #webWorkWindow .window, #easierGames .window, #easierTickets .window, #inspire .window, #photoWorkWindow .window, #amsterdam .window, #italy .window, #ireland .window, #contactWindow .window, #aboutMe .window {
  position: absolute;
  top: 50px;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: calc(100% - 50px);
  background: #0D1321;
  overflow: auto;
  z-index: 1;
}
#currentWorkWindow .window .currentWork, #greatArtHeist .window .currentWork, #streamerRoom .window .currentWork, #threeDWorkWindow .window .currentWork, #dbqSoccer .window .currentWork, #merge .window .currentWork, #neon .window .currentWork, #webWorkWindow .window .currentWork, #easierGames .window .currentWork, #easierTickets .window .currentWork, #inspire .window .currentWork, #photoWorkWindow .window .currentWork, #amsterdam .window .currentWork, #italy .window .currentWork, #ireland .window .currentWork, #contactWindow .window .currentWork, #aboutMe .window .currentWork {
  position: absolute;
  padding: 0;
  top: 0;
  margin: 0;
  width: 100%;
  min-height: calc(100% + 2em);
  background-color: #0D1321;
}
#currentWorkWindow .window .currentWork .currentTop, #greatArtHeist .window .currentWork .currentTop, #streamerRoom .window .currentWork .currentTop, #threeDWorkWindow .window .currentWork .currentTop, #dbqSoccer .window .currentWork .currentTop, #merge .window .currentWork .currentTop, #neon .window .currentWork .currentTop, #webWorkWindow .window .currentWork .currentTop, #easierGames .window .currentWork .currentTop, #easierTickets .window .currentWork .currentTop, #inspire .window .currentWork .currentTop, #photoWorkWindow .window .currentWork .currentTop, #amsterdam .window .currentWork .currentTop, #italy .window .currentWork .currentTop, #ireland .window .currentWork .currentTop, #contactWindow .window .currentWork .currentTop, #aboutMe .window .currentWork .currentTop {
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
  color: white;
  padding: 0;
}
#currentWorkWindow .window .currentWork .currentTop h2, #greatArtHeist .window .currentWork .currentTop h2, #streamerRoom .window .currentWork .currentTop h2, #threeDWorkWindow .window .currentWork .currentTop h2, #dbqSoccer .window .currentWork .currentTop h2, #merge .window .currentWork .currentTop h2, #neon .window .currentWork .currentTop h2, #webWorkWindow .window .currentWork .currentTop h2, #easierGames .window .currentWork .currentTop h2, #easierTickets .window .currentWork .currentTop h2, #inspire .window .currentWork .currentTop h2, #photoWorkWindow .window .currentWork .currentTop h2, #amsterdam .window .currentWork .currentTop h2, #italy .window .currentWork .currentTop h2, #ireland .window .currentWork .currentTop h2, #contactWindow .window .currentWork .currentTop h2, #aboutMe .window .currentWork .currentTop h2 {
  padding: 0;
  margin: 0;
  font-size: 3vmin;
}
#currentWorkWindow .window .currentWork .current-grid, #greatArtHeist .window .currentWork .current-grid, #streamerRoom .window .currentWork .current-grid, #threeDWorkWindow .window .currentWork .current-grid, #dbqSoccer .window .currentWork .current-grid, #merge .window .currentWork .current-grid, #neon .window .currentWork .current-grid, #webWorkWindow .window .currentWork .current-grid, #easierGames .window .currentWork .current-grid, #easierTickets .window .currentWork .current-grid, #inspire .window .currentWork .current-grid, #photoWorkWindow .window .currentWork .current-grid, #amsterdam .window .currentWork .current-grid, #italy .window .currentWork .current-grid, #ireland .window .currentWork .current-grid, #contactWindow .window .currentWork .current-grid, #aboutMe .window .currentWork .current-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 50% 50%;
}
#currentWorkWindow .window .currentWork .current-grid div, #greatArtHeist .window .currentWork .current-grid div, #streamerRoom .window .currentWork .current-grid div, #threeDWorkWindow .window .currentWork .current-grid div, #dbqSoccer .window .currentWork .current-grid div, #merge .window .currentWork .current-grid div, #neon .window .currentWork .current-grid div, #webWorkWindow .window .currentWork .current-grid div, #easierGames .window .currentWork .current-grid div, #easierTickets .window .currentWork .current-grid div, #inspire .window .currentWork .current-grid div, #photoWorkWindow .window .currentWork .current-grid div, #amsterdam .window .currentWork .current-grid div, #italy .window .currentWork .current-grid div, #ireland .window .currentWork .current-grid div, #contactWindow .window .currentWork .current-grid div, #aboutMe .window .currentWork .current-grid div {
  display: grid;
  justify-items: center;
  align-items: center;
  align-self: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#currentWorkWindow .window .currentWork .current-grid div img, #greatArtHeist .window .currentWork .current-grid div img, #streamerRoom .window .currentWork .current-grid div img, #threeDWorkWindow .window .currentWork .current-grid div img, #dbqSoccer .window .currentWork .current-grid div img, #merge .window .currentWork .current-grid div img, #neon .window .currentWork .current-grid div img, #webWorkWindow .window .currentWork .current-grid div img, #easierGames .window .currentWork .current-grid div img, #easierTickets .window .currentWork .current-grid div img, #inspire .window .currentWork .current-grid div img, #photoWorkWindow .window .currentWork .current-grid div img, #amsterdam .window .currentWork .current-grid div img, #italy .window .currentWork .current-grid div img, #ireland .window .currentWork .current-grid div img, #contactWindow .window .currentWork .current-grid div img, #aboutMe .window .currentWork .current-grid div img {
  width: 60%;
  padding: 0;
  margin: 0;
}
#currentWorkWindow .window .currentWork .current-grid div p, #greatArtHeist .window .currentWork .current-grid div p, #streamerRoom .window .currentWork .current-grid div p, #threeDWorkWindow .window .currentWork .current-grid div p, #dbqSoccer .window .currentWork .current-grid div p, #merge .window .currentWork .current-grid div p, #neon .window .currentWork .current-grid div p, #webWorkWindow .window .currentWork .current-grid div p, #easierGames .window .currentWork .current-grid div p, #easierTickets .window .currentWork .current-grid div p, #inspire .window .currentWork .current-grid div p, #photoWorkWindow .window .currentWork .current-grid div p, #amsterdam .window .currentWork .current-grid div p, #italy .window .currentWork .current-grid div p, #ireland .window .currentWork .current-grid div p, #contactWindow .window .currentWork .current-grid div p, #aboutMe .window .currentWork .current-grid div p {
  color: #F1EDEE;
  font-size: 2.5vmin;
}

h3 {
  color: #F1EDEE;
}

.current {
  position: absolute;
}

.spinner-wrapper {
  width: 100%;
  height: 100%;
  background-color: #0D1321;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.spinner-wrapper h1 {
  color: #63ADF2;
}

.spinner {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
}

.spinner::before,
.spinner:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.spinner:before {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #63ADF2 0%, #102E4A 100%);
  animation: spin 0.5s infinite linear;
}

.spinner:after {
  width: 90%;
  height: 90%;
  background-color: #0D1321;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.startMenu {
  display: none;
  position: absolute;
  bottom: 68px;
  width: 40vw;
  background: #F1EDEE;
  border-radius: 25px;
  border: 4px solid #DBD0D3;
}
.startMenu .start-prof-photo {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.startMenu .start-prof-photo img {
  left: 0;
  width: 70%;
  border-radius: 15px;
}
.startMenu .start-contact {
  position: absolute;
  top: 0;
  left: 20px;
}
.startMenu .start-contact ul {
  list-style: none;
}

ion-icon {
  font-size: 24px;
}

.contact {
  display: grid;
  width: 100%;
  height: 100%;
  align-items: center;
  margin-top: 2%;
  margin-bottom: 2%;
}
.contact .contact-container {
  justify-self: center;
  position: relative;
  min-width: 1100px;
  min-height: 550px;
  display: flex;
  z-index: 1000;
  margin-left: -500px;
}
@media screen and (max-width: 1666px) {
  .contact .contact-container {
    margin-left: -400px;
  }
}
@media screen and (max-width: 1517px) {
  .contact .contact-container {
    min-width: 500px;
  }
}
@media screen and (max-width: 946px) {
  .contact .contact-container {
    margin: 0;
  }
}
@media screen and (max-width: 742px) {
  .contact .contact-container {
    min-width: 300px;
  }
}
@media screen and (max-width: 548px) {
  .contact .contact-container {
    margin-bottom: 150px;
    justify-self: flex-start;
  }
}
@media screen and (max-width: 425px) {
  .contact .contact-container {
    min-width: 200px;
  }
}
.contact .contact-container .contact-info {
  position: absolute;
  border-radius: 30px;
  top: 40px;
  width: 360px;
  height: calc(100% - 80px);
  background: #102E4A;
  z-index: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.2s;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 946px) {
  .contact .contact-container .contact-info {
    display: none;
  }
}
.contact .contact-container .contact-info:hover {
  box-shadow: 15px 50px 20px rgba(0, 0, 0, 0.5);
}
.contact .contact-container .contact-info .prof-photo {
  display: flex;
  width: 100%;
  justify-content: center;
}
.contact .contact-container .contact-info .prof-photo img {
  width: 70%;
  border-radius: 15px;
}
.contact .contact-container .contact-info h2 {
  color: #F1EDEE;
  font-size: 24px;
  font-weight: 500;
}
.contact .contact-container .contact-info .info {
  position: relative;
  margin: 20px 0;
}
.contact .contact-container .contact-info .info li {
  position: relative;
  list-style: none;
  display: flex;
  margin: 20px 0;
  align-items: flex-start;
}
.contact .contact-container .contact-info .info li span:nth-child(1) {
  color: #F1EDEE;
  width: 30px;
  min-width: 30px;
}
.contact .contact-container .contact-info .info li span:nth-child(2) {
  color: #F1EDEE;
  margin-left: 10px;
  font-weight: 300;
  padding-right: 30px;
}
.contact .contact-container .contact-info .social {
  position: relative;
  display: flex;
}
.contact .contact-container .contact-info .social li {
  list-style: none;
  margin-right: 15px;
}
.contact .contact-container .contact-info .social li a {
  text-decoration: none;
  color: #F1EDEE;
}
.contact .contact-container .contact-form {
  position: absolute;
  padding: 70px 50px;
  background: #63ADF2;
  margin-left: 150px;
  padding-left: 350px;
  width: calc(100% - 150px);
  height: 100%;
  box-shadow: 0 50px 30px rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  transition: 0.2s;
}
@media screen and (max-width: 946px) {
  .contact .contact-container .contact-form {
    margin-left: 0px;
    width: 100%;
    padding: 50px;
  }
}
.contact .contact-container .contact-form:hover {
  box-shadow: 15px 90px 50px rgba(0, 0, 0, 0.5);
}
.contact .contact-container .contact-form h2 {
  color: #F1EDEE;
  font-size: 50px;
  font-weight: 500;
}
@media screen and (max-width: 1517px) {
  .contact .contact-container .contact-form h2 {
    font-size: 30px;
  }
}
@media screen and (max-width: 425px) {
  .contact .contact-container .contact-form h2 {
    font-size: 20px;
  }
}
.contact .contact-container .contact-form .formBox form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 30px;
}
.contact .contact-container .contact-form .formBox form .w50 {
  width: 47% !important;
}
@media screen and (max-width: 742px) {
  .contact .contact-container .contact-form .formBox form .w50 {
    width: 100% !important;
  }
}
.contact .contact-container .contact-form .formBox form .w100 {
  width: 100% !important;
}
.contact .contact-container .contact-form .formBox form .inputBox {
  position: relative;
  margin: 0 0px 35px 0;
}
.contact .contact-container .contact-form .formBox form .inputBox input, .contact .contact-container .contact-form .formBox form .inputBox textarea {
  width: 100% !important;
  padding: 5px 0;
  font-size: 28px;
  font-weight: 300;
  color: #0D1321;
  background: #63ADF2;
  border: none;
  border-bottom: 1px solid #0D1321;
  outline: none;
  resize: none;
}
.contact .contact-container .contact-form .formBox form .inputBox input:focus ~ span, .contact .contact-container .contact-form .formBox form .inputBox textarea:focus ~ span {
  transform: translateY(-30px);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;
  color: #F1EDEE;
}
.contact .contact-container .contact-form .formBox form .inputBox input:valid ~ span, .contact .contact-container .contact-form .formBox form .inputBox textarea:valid ~ span {
  transform: translateY(-30px);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;
  color: #F1EDEE;
}
.contact .contact-container .contact-form .formBox form .inputBox input[type=submit] {
  position: relative;
  cursor: pointer;
  background: #0D1321;
  color: #F1EDEE;
  border: none;
  max-width: 150px;
  font-weight: 500 !important;
  padding: 15px 30px;
  border-radius: 15px;
  box-shadow: 15px 15px 10px rgba(13, 19, 33, 0.5);
  transition: 0.5s;
}
.contact .contact-container .contact-form .formBox form .inputBox input[type=submit]:hover {
  background: #102E4A;
  box-shadow: 30px 30px 20px rgba(13, 19, 33, 0.5);
}
.contact .contact-container .contact-form .formBox form .inputBox textarea {
  min-height: 120px;
}
.contact .contact-container .contact-form .formBox form .inputBox span {
  position: absolute;
  left: 0;
  font-size: 30px;
  font-weight: 300;
  color: #F1EDEE;
  transition: 0.3s;
  pointer-events: none;
}
.contact .contactform {
  display: grid;
  align-content: center;
}
.contact .contactform .contactformtop {
  display: grid;
  justify-self: center;
  align-self: center;
  width: 60%;
  background: rgba(99, 173, 242, 0.5);
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: solid thick #0D1321;
}
@media screen and (max-width: 516px) and (min-width: 434px) {
  .contact .contactform .contactformtop {
    width: 90%;
  }
}
@media screen and (max-width: 433px) {
  .contact .contactform .contactformtop {
    width: 100%;
    justify-self: start;
    padding-left: 0;
    margin-left: 0;
  }
}
.contact .contactform .contactformtop h2 {
  color: #2B061E;
  font-style: bold;
  font-size: 3.2em;
  margin-left: 5%;
}
@media screen and (max-width: 433px) {
  .contact .contactform .contactformtop h2 {
    font-size: 2em;
  }
}
.contact .contactform .contactformbottom {
  border-top: solid thick #0D1321;
  display: grid;
  justify-self: center;
  box-shadow: 20px 20px 60px #000000;
  width: 60vw;
  background: rgba(99, 173, 242, 0.5);
  padding-top: 0;
  margin-top: 0;
  height: 50vh;
}
@media screen and (max-width: 516px) and (min-width: 434px) {
  .contact .contactform .contactformbottom {
    width: 90vw;
  }
}
@media screen and (max-width: 433px) {
  .contact .contactform .contactformbottom {
    width: 100vw;
    height: 55vh;
    justify-self: start;
    padding-left: 0;
    margin-left: 0;
  }
}
.contact .contactform .contactformbottom form {
  display: grid;
  align-content: center;
  width: 80%;
  padding-left: 20px;
}
.contact .contactform .contactformbottom form input {
  width: 100%;
  background: rgba(255, 255, 255, 0.79);
  font-style: normal;
  font-size: 1.5em;
  color: #2B061E;
  border-radius: 12px;
  border: solid #63ADF2 5px;
  height: 2em;
}
.contact .contactform .contactformbottom form input::placeholder {
  font-style: normal;
  line-height: 1.5em;
  color: #2B061E;
  margin-left: 3%;
}
.contact .contactform .contactformbottom form textarea {
  background: rgba(255, 255, 255, 0.79);
  font-style: normal;
  font-size: 1.5em;
  color: #2B061E;
  border-radius: 12px;
  border: solid #63ADF2 5px;
  width: 100%;
  height: 5vh;
}
.contact .contactform .contactformbottom form textarea::placeholder {
  font-style: normal;
  color: #2B061E;
  margin-left: 3%;
  line-height: 1.5em;
}
.contact .contactform .contactformbottom form button {
  font-style: normal;
  font-size: 1.5em;
  color: #2B061E;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.79);
  border: solid #63ADF2 5px;
}
.contact .contactform .contactformbottom form button:hover {
  color: #F1EDEE;
  background: #2B061E;
  cursor: pointer;
}

/*# sourceMappingURL=style.css.map */