.page .entry-title {
  display: none;
}

header.header {
  display: none;
}

.desktop {
  display: block;
}

.mobile {
  display: none;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #111111;
  color: #fff;
}

.background {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('https://gavinjames.tech/wp-content/uploads/2025/06/noise.png') repeat 0 0;
  background-repeat: repeat;
  animation: background-animation .2s infinite;
  opacity: .9;
  visibility: visible;
  overflow-x: hidden;
  pointer-events: none;
  z-index: -1;
}

@keyframes background-animation {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

h1 {
  font-size: 10vw;
  letter-spacing: .5vw;
  font-weight: 100;
  margin: 0;
}

h2 {
  font-size: 4vw;
  letter-spacing: .25vw;
  font-weight: 100;
  margin: 0;
  padding: 1vw;
}

p {
  font-size: 1.5vw;
  letter-spacing: .25vw;
  font-weight: 100;
  margin: 0;
  padding: 1vw;
}

img {
  width: 35vw;
  height: 100%;
}

a {
  font-size: 1vw;
  letter-spacing: .25vw;
  font-weight: 100;
  text-decoration: none;
  color: white;
}

/*HEADER*/
header {
  display: flex;
  box-sizing: border-box;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 2vw;
  padding-bottom: 2vw;
}

header nav {
  display: flex;
  justify-content: flex-end;
  gap: 2vw;
}

header .left,
header .right {
  width: 50%;
  box-sizing: border-box;
}

header .left {
  display: flex;
  justify-content: flex-front;
}

/*INTRO*/
.intro {
  display: flex;
  box-sizing: border-box;
  padding-left: 4vw;
  padding-right: 4vw;
  padding-top: 8vw;
  padding-bottom: 8vw;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*ABOUT*/
.about {
  display: flex;
  box-sizing: border-box;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 6vw;
  padding-bottom: 6vw;
  align-items: center;
}

.about a {
  padding: 1vw;
  margin: 2vw;
  font-size: 1vw;
  font-weight: 600;
  float: right;
  color: #000;
  background-color: #fff;
}

.about a:hover {
  padding: 1vw;
  margin: 2vw;
  float: right;
  color: #fff;
  background-color: transparent;
}

.about .left,
.about .right {
  width: 50%;
  box-sizing: border-box;
}

.about .right {
  margin-left: 1vw;
}

/*PROJECT*/
.project {
  display: flex;
  box-sizing: border-box;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 6vw;
  padding-bottom: 6vw;
  align-items: center;
}

.project .left,
.project .right {
  width: 50%;
  box-sizing: border-box;
}

.project .left .underline {
  border-bottom: 1px solid white;
}

.project .left a {
  float: left;
}

.project .right {
  margin: 3vw;
}

/*MOREABOUT*/
.moreabout {
  display: flex;
  box-sizing: border-box;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 6vw;
  padding-bottom: 6vw;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.moreabout .center {
  width: 100%;
  box-sizing: border-box;
}

/*EVENMOREABOUT*/
.evenmoreabout {
  display: flex;
  box-sizing: border-box;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 6vw;
  padding-bottom: 6vw;
  align-items: center;
}

.evenmoreabout .left,
.evenmoreabout .right {
  width: 50%;
  box-sizing: border-box;
}

.evenoreabout .left {
  margin-right: 6vw;
}

.evenmoreabout .underline {
  display: inline-block;
  border-bottom: 1px solid white;
}

/*TOGETHER*/
.together {
  display: flex;
  box-sizing: border-box;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 6vw;
  padding-bottom: 6vw;
  justify-content: right;
  align-items: right;
  text-align: right;
}

.together .center {
  width: 100%;
  box-sizing: border-box;
}

/*CONTACT*/
.contact {
  display: flex;
  box-sizing: border-box;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 6vw;
  padding-bottom: 6vw;
  align-items: center;
}

.contact a img {
  width: 4vw;
  height: 4vw;
  padding: 1vw;
}

.contactform {
  padding: 6vw;
}

.contactform form {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}

.contactform input,
.contactform textarea {
  background-color: transparent;
  color: #fff;
  font-size: 1vw;
  letter-spacing: .25vw;
  font-weight: 100;
  padding: 1vw;
  border: 0;
  border-bottom: .25px solid gray;
  width: 100%;
}

.contactform input::placeholder,
.contactform textarea::placeholder {
  color: #fff;
}

.contactform input:focus,
.contactform textarea:focus {
  outline: none;
  border: none;
}

.contactform button {
  background-color: #fff;
  color: #000;
  font-size: 1vw;
  letter-spacing: .25vw;
  font-weight: 100;
  padding: 1vw;
  border: 0;
  cursor: pointer;
  align-self: flex-end;
}

.contactform button:hover {
  background-color: transparent;
  color: #fff;
  border: 0;
}

.contactform button {
  background-color: transparent;
  color: #000;
  background-color: #fff;
  font-size: 1vw;
  letter-spacing: .25vw;
  font-weight: 100;
  padding: 1vw;
  border: 0;
}

.contact .left,
.contact .right {
  width: 50%;
  box-sizing: border-box;
}

.contact .left {
  border-right: 1px solid white;
}


/*PROJECT*/
.project {
  display: flex;
  box-sizing: border-box;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 6vw;
  padding-bottom: 6vw;
  align-items: center;
}

.project .left,
.project .right {
  width: 50%;
  box-sizing: border-box;
}

.livebutton {
  background-color: #fff;
  color: #000;
  font-size: 2vw;
  letter-spacing: .25vw;
  font-weight: 100;
  padding: 1vw;
  float: right;
  border: 0;
  cursor: pointer;
  align-self: flex-end;
}

.project .livebutton:hover {
  background-color: transparent;
  color: #fff;
  border: 0;
}

/*FOOTER*/
footer {
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 4vw;
  padding-bottom: 0;
  border-top: .25px solid lightslategray;
}

footer a img {
  width: 2vw;
  height: 2vw;
}

footer nav {
  display: flex;
  margin: 5vw;
}

footer .left a {
  margin-right: 2vw;
}

footer .right a {
  margin-left: 2vw;
}

footer .center a {
  margin: 1vw;
}

footer .left{
  width: 40%;
  box-sizing: border-box;
  justify-content: left;
  align-items: left;
  text-align: right;
}

footer .right {
  width: 40%;
  box-sizing: border-box;
  justify-content: right;
  align-items: right;
  text-align: left;
}

footer .center {
  width: 20%;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  text-align: center;
}

footer .rights {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-top: .25px solid lightslategray;
  margin-left: 12vw;
  margin-right: 12vw;
  margin-top: 6vw;
}

@media (max-width: 900px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  h1 {
    font-size: 12vw;
  }

  h2 {
    font-size: 6vw;
  }

  p {
    font-size: 3vw;
  }

  .underline {
    border-bottom: 1px solid white;
  }

  mobilenav .right a {
    padding: 1vw;
    margin: 2vw;
    font-size: 3vw;
    font-weight: 500;
    float: right;
    color: #000;
    background-color: #fff;
  }

  /*HEADER*/
  header {
    padding: 3vw;
    font-size: 3vw;
  }

  header a {
    font-size: 3vw;
  }

  .mobile-nav {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 4vw;
    padding-left: 6vw;
  }

  .burger {
    text-align: right;
  }

  .mobile-nav a {
    font-size: 2vw;
    color: white;
    background-color: transparent;
    text-decoration: none;
    margin-bottom: 3vw;
  }

  .mobile-nav.active {
    display: flex;
  }

  /*content*/
  .intro {
    padding: 0vw;
  }
  .intro p {
    font-size: 2vw;
  }

  img {
    height: 100%;
    width: 100%;
    border: 6vw;
  }

  a img {
    height: 6vw;
    width: 6vw;
  }

  .left,
  .right {
    flex-direction: column;
  }

  .left {
    width: 80%;
    margin-right: auto;
    padding-top: 3vw;
    padding-bottom: 15vw;
    padding-left: 3vw;
    padding-right: 3vw;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }

  .right {
    width: 80%;
    margin-left: auto;
    padding-top: 3vw;
    padding-bottom: 15vw;
    padding-left: 3vw;
    padding-right: 3vw;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
  }

  .center {
    padding-top: 3vw;
    padding-bottom: 15vw;
    padding-left: 3vw;
    padding-right: 3vw;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .livebutton {
    padding: 1vw;
    margin: 2vw;
    font-size: 3vw;
    font-weight: 500;
    float: right;
    color: #000;
    background-color: #fff;
    align-self: flex-start;
  }

  .contactform input,
  .contactform textarea,
  .contactform button {
    font-size: 2vw;
  }

  .livebutton {
    margin-top: 3vw;
  }

  /*ABOUT*/
  .contact {
    padding: 1vw;
    margin: 2vw;
    font-size: 3vw;
    font-weight: 600;
    float: right;
    color: #000;
    background-color: #fff;
  }

  /*FOOTER*/
  footer {
    padding-left: 6vw;
    padding-right: 6vw;
    padding-top: 4vw;
    padding-bottom: 0;
    border-top: .25px solid lightslategray;
  }

  footer a img {
    width: 6vw;
    height: 6vw;
    padding: 1vw;
  }

  footer a {
    color: white;
    background-color: transparent;
    font-size: 3vw;
  }

  footer .left {
    width: 25%;
    padding-bottom: 3vw;
    justify-content: right;
    align-items: right;
    text-align: left;
  }

  footer .right {
    width: 25%;
    padding-bottom: 3vw;
    justify-content: left;
    align-items: left;
    text-align: right;
  }

  footer .center {
    display: flex;
    padding-bottom: 3vw;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 50%;
  }

  footer .rights{
    margin-top: 0vw;
    margin-bottom: 8vw;
    margin-left: 0vw;
    margin-right: 0vw;
  }

  footer .rights p {
    font-size: 2vw;
  }
}