/*
Theme Name: HereWeGo
Version: 1.0
Description: A child theme of SpecialDivi
Author: admin
Template: SpecialDivi
*/

@import url("../SpecialDivi/style.css");

/*Font stuff*/
@import url("../SpecialDivi/style.css");

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@import url("https://use.typekit.net/qkx5dux.css");

@import url('https://fonts.googleapis.com/css2?family=Salsa&display=swap');

a{
  color: white!important;
}
.header-content h1{
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  color: black!important;  
  font-size: 30px;
  line-height: normal;
  letter-spacing: -0.98px;
  margin-top: 200px;
  margin-bottom: 100px;
  background: #FBB6D7;
  padding-top: 30px; 
  padding-bottom: 30px; 
  padding-right: 200px;
  padding-left: 200px;
  width:100%;
 
}

.et_pb_section .et_pb_module.et_pb_fullwidth_header .et_pb_fullwidth_header_container.left{
  margin:0px;
  width: 100%!important;
  max-width: 100%!important;
}

.et_pb_section .et_pb_fullwidth_header .header-content{
  padding: 0px;
}

h2{
  font-family: "good-times", sans-serif;
font-weight: 700;
font-style: normal;
  font-size: 29px;
}

p{
  font-family: "Salsa", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 0.8px;
  color: black;
}
.et_pb_text_inner ul{
  font-family: "Salsa", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 0.8px;
  color: black;
}
/*header*/
#logo{
  max-height: 150%;
}
#main-header{
  background-color: #09607C;
}

/*section 2 (text bubble)*/
.et_pb_section:nth-of-type(2){
  transform: translate(0px, -50px); 
  background: transparent;
}

.et_pb_main_blurb_image{ /*text box*/
  width: 858px;
height: 175px;
flex-shrink: 0;
  animation: none!important; /*i dont think this is working*/
}
.wp-image-17{ /*head*/
  width: 275.821px;
height: 280px;
flex-shrink: 0;
aspect-ratio: 275.82/280.00;
  margin-left: 250px;
  margin-top: -70px
}
.et_pb_blurb_description{
  padding-top: 100px;
  padding-left: 100px;
  padding-right: 100px;
    margin-top: -280px
}
/*section 3 (mushrooms)*/

.et_pb_section:nth-of-type(3){
    transform: translate(0px, -50px);
}
.et_pb_section.et_pb_with_background{
  width: 100%;
  padding-top: 700px;
  padding-bottom: 100px
}
.et_pb_section.et_pb_with_background.et_section_regular:nth-of-type(3){
  background-color: #FBB6D7
}
#notalone{
    transform: translate(500px, -580px);
    margin: -100px;
}
.et_pb_section .et_pb_row .et_pb_column:nth-of-type(2) p{
   transform: translate(200px, -430px); 
  padding-top: 20px;
  margin: -100px;
}
.et_pb_section .et_pb_row .et_pb_column:nth-of-type(3) p{
   transform: translate(-50px, -250px); 
  padding-right: 20px;
  margin: -100px;
}
/*section 4 (tv)*/ /*add in hover effects and text box with text*/

.et_pb_section:nth-of-type(4){
  padding: 100px;
}
#choose h2{
  transform: translate(130px, 40px);
  color: white!important;
  
}
.wp-image-117{
  transform: translate(0px,-50px);
}
.wp-image-118 {
  transform: translate(-90px, -50px)
}
.wp-image-119 {
  transform: translate(-250px, -90px)
}
.wp-image-122{
  transform: translate(250px, -140px); 
}
.wp-image-123{
  transform: translate(-430px, -140px)
}
.wp-image-124{
  transform: translate(-90px, -140px); 
}
/*section5 (hills)*/
#skills{
  transform: translate(500px, -230px);
}
.et_pb_text_inner ul{   
  transform: translate(30px, -150px);
  padding-right: 25%
}
/*section6*/
.et_pb_section:nth-of-type(6){
  background-color: rgba(251, 182, 215, 0.37); /*i told chat I wanted the hex code #FBB6D7 with 37% opacity and it wrote the rgba code for me*/
  padding-top: 200px;
}
.wp-image-49{
  transform: translate(-30px, 150px);
  width: 300px;
  max-width: 1000px!important;
}
#forcedtext3{
  transform: translate(-670px, 660px);
}

.wp-image-48{
  width: 800px;
  height: 400px;
  object-fit: cover;  /*chat helped me figure out croping my picture*/
  object-position: 30% 10%;
  transform: translate(-150px, 0px);
  
}
/*Chat helped me get started with the media queries but I went in and edited pretty much all of it so it's mine*/
@media only screen and (max-width: 768px) {
  .et_pb_section{
    padding: 0px!important;
  }
  .et_pb_blurb_description{
    padding-left: 0px!important;
    padding-right: 0px!important;
  }
p {
    font-size: 16px;
    line-height: 1.4;
  }
  /* HEADERS */
  .header-content h1 {
    font-size: 16px;
    padding: 20px;
    margin-top: 100px;
    margin-bottom: 50px;
  }

  /* SECTION 2 (text bubble) */
  .et_pb_section:nth-of-type(2) {
    transform: translate(0, 0);
    padding: 20px;
  }

  .et_pb_main_blurb_image {
    width: 0%;
    height: auto;
  }

  .wp-image-17 {
    width: 180px;
    height: auto;
    margin-left: 0;
    margin-top: -20px;
   transform: translate(40px, -500px);
  }

  .et_pb_blurb_description {
    margin-top: 0;
    padding: 40px 20px;
    transform: translate(0px, 50px);
    text-align: center;
  }

  /* SECTION 3 (mushrooms) */
  #notalone {
    transform: none;
    margin: 0 auto;
    transform: translate(20px, 0px);
    text-align: right;
  }

  .et_pb_section .et_pb_row .et_pb_column:nth-of-type(2) p{
    transform: none;
    margin: 0;
    padding: 40px 20px;
    font-size: 10px;
    transform: translate(40px, -60px);
    text-align: right;
  }
  .et_pb_section .et_pb_row .et_pb_column:nth-of-type(3) p {
    transform: none;
    margin: 0;
    padding: 40px 20px;
    font-size: 10px;
    transform: translate(40px, -150px);
    text-align: right;
  }
 
  .et_pb_section.et_pb_with_background{
  width: 100%;
  transform: translate(0px, -200px);
}

  /* SECTION 4 (TV images) */
  #choose h2 {
    transform: none;
    text-align: left;
    font-size: 22px;
    color: black!important;
    transform: translate(-20px, 40px);
  }
.et_pb_section:nth-of-type(4){
  transform: translate(0px, -200px);
  }
 
  .wp-image-117{
    margin: 10px auto;
    max-width: 90%;
    height: auto;
    transform: translate(40px, 70px);
  }

  .wp-image-118{
    margin: 10px auto;
    max-width: 90%;
    height: auto;
    transform: translate(-100px, 0px);
  }

  .wp-image-119{
    margin: 10px auto;
    max-width: 90%;
    height: auto;
    transform: translate(100px, -80px);
  }

  .wp-image-122{
    transform: none;
    display: block;
    margin: 10px auto;
    max-width: 120%;
    height: auto;
    transform: translate(-25px, -750px);
  }
  .wp-image-123{
    margin: 10px auto;
    max-width: 110%;
    height: auto;
    transform: translate(-10px, -430px);
  }
  .wp-image-124 {
    transform: none;
    display: block;
    margin: 10px auto;
    max-width: 120%;
    height: auto;
    transform: translate(-25px, -610px);
  }

  /* SECTION 5 (hills) */
  #skills {
    transform: translate(-25px, -180px);
  }

  .et_pb_text_inner ul {
    transform: none;
    padding-right: 5%;
    font-size: 10px;
    transform: translate(-25px, -190px);
  }

  /* SECTION 6 (image and text) */
  .et_pb_section:nth-of-type(6) {
    padding-top: 100px;
    transform: translate(0px, -200px);
    width: auto;
    height: 500px!important;
  }

  .wp-image-49 {
    transform: none;
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
   transform: translate(100px, 70px);
  }

  #forcedtext3 {
    transform: none;
    padding: 0px;
    margin: 0;
  }
  #embark {
    text-align: right;
    transform: translate(20px, 0px);
  }
  /* CROP IMAGE (wp-image-48) */
  .wp-image-48 {
    width: 400px;
  height: 200px;
  object-fit: cover;  /*chat helped me figure out croping my picture*/
  object-position: 30% 10%;
  transform: translate(20px, -250px);
	}
  /* LOGO + HEADER */
  #logo {
    max-height: 100px;
  }

  #main-header {
    padding: 10px;
  }
}