@font-face {
    font-family: 'gooper';
    src: url('fonts/Gooper7-Medium.woff2') format('woff2'),
         url('fonts/Gooper7-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gooper';
    src: url('fonts/Gooper7-MediumItalic.woff2') format('woff2'),
         url('fonts/Gooper7-MediumItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}

:root {
  --gutter: 20px;
  --link-color: #28bd91;
  --link-color-dark: #167d5e;
  --link-color-light: #2ed9a7;
}

html{
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
              
}


/*Structural*/

body {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #000;
  color: #fff;
}

footer {
  max-width: 500px;
  margin: 0 auto;
  display: grid;
  align-content: center;
  padding: 60px 20px 100px 20px;
}

/*Typography*/


h1, h2, h4, h5 {
  font-family: 'gooper', serif;
  color: #fff;
}

h1{
  font-size: 2em;
  opacity: .6;
}

h2{
  font-size: 1.75em;
  margin: 0 0 16px 0;
}

h3{
  font-style: bold;
  margin: 0 0 32px 0;
}

p{
  font-family: 'Nunito', sans-serif;
  font-size: 1.125em;
  margin: 0 0 8px 0;
}

.sign-off{
 text-align: center;
}

a{
  color: transparent;
  text-decoration: none;
  -webkit-text-decoration-line: none;  
  text-shadow: 0 0 0 var(--link-color);
}

a:hover{
  text-shadow: 0 0 0 var(--link-color-light);
}

header a {
  color: transparent;  
  text-shadow: 0 0 0 white;
  text-decoration: none;
}

header a:hover {
  color: transparent;  
  text-shadow: 0 0 0 var(--link-color);
}

/*header #active{
  opacity: .6;
}*/

/*Nav bar styles*/

header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  justify-items: end;
  align-content: center;
  grid-gap: 16px;
}


#title {
  font-family: 'gooper';
  display: inline-block;
  justify-self: start;
  margin-left: calc(var(--gutter)/2);
  align-self: center;
  /*font-style: italic;*/
  font-size: 1.125em;
  white-space: nowrap;
}

.nav-link{
  display: inline-block;
  font-size: .8em;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  margin-top: 8px;
  align-self: baseline;
  white-space: nowrap;
  color: transparent;  
  text-shadow: 0 0 0 white;
}

#email-button{
  display: inline-block;
  height: 25px;
  margin: 0px calc(var(--gutter)/2) 3px 0;
  background-color: var(--link-color);
  border-radius: 5px;
  padding: 2px 15px 5px 15px;
  align-self: center;
  font-family: 'gooper', sans-serif;
  font-size: 1.15rem;
  font-style: italic;
  filter: drop-shadow(0px 4px 0px var(--link-color-dark));
  color: #fff;
} 

  #email-button:hover {
    margin: -2px calc(var(--gutter)/2) 4px 0;
    filter: drop-shadow(0px 6px 0px #167d5e)
  }

 .back{
  font-size: 1em;
  font-weight: bolder;
  margin-bottom: -10px;
}

.page-title{
  margin: 120px var(--gutter) 40px var(--gutter);
}


.divider{
  max-width: 1200px;
  display: flex;
  justify-content: center;
  color: #fff;
  text-align: justify;
  margin: 60px 0 60px 0;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 6px;
  font-size: 1.5em;
  padding-left: 7px;
  opacity: .6;
}

.divider.last{
  margin: 60px 0 0 0;
}

/*Homepage styles*/

.flex-wrapper{
  margin: 80px auto -80px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  max-width: 100%;
  flex-direction: column;
}

.hero-wrapper{
  width: 400px;
  height: 400px;
  overflow: hidden;
  z-index: -100;
}

.hero {
  height: 100%;
  animation: moveX 3s steps(15) infinite;
}

  @keyframes moveX{
      from{transform: translate(0px,0)}
      to{transform: translate(-100%,0)}
  }

.bio{
  max-width: 600px;
  padding: 0 var(--gutter);
  text-align: center;
  margin: 0 auto;
}

.bio h1{
  font-size: 2.5em;
  margin: 0;
  opacity: 1;
  /*font-style: italic;*/
  margin-bottom: 8px;
}

.bio p{
  font-size: 1.25em;
  margin: 0 0 16px 0;
}

.past-work{
  margin: 0 auto;
  padding: 0 calc(var(--gutter) *2);
  display: grid;
  grid-template: auto 1fr 1fr / 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 40px;
  text-align: center;
  max-width: 800px;
  align-items: start;
}

.past-work h2{/*
  grid-column: 1 / 3;*/
  margin: 0 0 0 0;
  font-size: 1.8em;
}

.big-button{
  display: flex;
  height: 60px;
  background-color: var(--link-color);
  border-radius: 8px;
  font-family: 'gooper', sans-serif;
  font-size: 1.4rem;
  filter: drop-shadow(0px 4px 0px var(--link-color-dark));
  align-items: center;
  justify-content: center;
  color: transparent;  
  text-shadow: 0 0 0 #fff;
  text-decoration: none;
}

.big-button:hover{
  filter: drop-shadow(0px 6px 0px var(--link-color-dark));
  margin-top: -2px;
  margin-bottom: 2px;
  text-decoration: none !important;
}

.past-work a:hover{
  text-decoration: none !important;
}

/*Portfolio styles*/

.description{
  margin: 0 var(--gutter);
}

#cont {
  margin-bottom: 60px;
}

.description-2-col{
  margin: 0 var(--gutter) 60px var(--gutter);
  display: grid;
  grid-gap: var(--gutter);
  grid-template-row: auto 1fr;
}

#menu{
  padding-bottom: 30px;
  border-bottom: 1px solid #fff;
}

.logo-menu {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
  margin: 0 var(--gutter);
  justify-content: center;
  align-content: center;
}


.logo {
  width: 100%;
  max-width: 400px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-in-out; 
  background:none;
  border-radius: 8px;
  margin: 0 auto;
}

.logo:hover {
  transform: scale(1.05);
/*  background: var(--link-color); */
}

.logo > img {
  max-width: 100%;
  max-height: 100%;
}



.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 400px 10px;
  overflow-x: auto;
  margin: 30px 0 60px 0;
}

.grid::before,
.grid::after {
  content: '';
}

.grid > * {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.sample-image {
  margin: 30px var(--gutter);
  max-width: 100%;
  height: auto;
}

.sample-image > * {
  height: 100%;
  width: 100%;
}

.description h2{
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
}

.description p {
  font-size: 1.125em;
  line-height: 1.375em;
  margin-bottom: 18px;
}

.kesimpta{
  grid-template-columns: calc(var(--gutter) / 2) repeat(4, 400px) 710px calc(var(--gutter) / 2);
}

.ozempic{
  grid-template-columns: calc(var(--gutter) / 2) repeat(5, 710px) calc(var(--gutter) / 2);
}

.emrosi{
  grid-template-columns: calc(var(--gutter) / 2) repeat(4, 710px) calc(var(--gutter) / 2);
}

.sculptandlift {
  grid-template-columns: calc(var(--gutter) / 2) 400px 150px 400px 400px 450px calc(var(--gutter) / 2);
}

.after-after-social {
  grid-template-columns: calc(var(--gutter) / 2) repeat(2, 250px) calc(var(--gutter) / 2);
}

.ozempic-small{
  grid-template-columns: calc(var(--gutter) / 2) repeat(2, 710px) calc(var(--gutter) / 2);
}

.coinage{
  grid-template-columns: calc(var(--gutter) / 2) 800px 400px 800px 800px calc(var(--gutter) / 2);
}

.emrosi-launch{
  grid-template-columns: calc(var(--gutter) / 2) 800px 800px 400px 400px 800px calc(var(--gutter) / 2);
}

.bi{
  grid-template-columns: calc(var(--gutter) / 2) 800px 400px 400px calc(var(--gutter) / 2);
}

.lucentis, .organon{
  grid-template-columns: calc(var(--gutter) / 2) 307px 442px 442px calc(var(--gutter) / 2);
}

.pen-video{
  object-fit: fill;
}

.pen-video::before,
.pen-video::after {
  content: '';
}

.sample-video{
          position: relative;
          padding-bottom: 60%; /* 16:9 aspect ratio (height / width * 100) */
          height: 0;
          overflow: hidden;
          max-width: 100%; /* Ensures it doesn't exceed parent width */
}

.sample-video iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

.doc-suicide{
  display: grid;
  grid-template-rows: 57vw;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 30px 20px 10px 20px;
  max-height: 675px;
  margin-bottom: 60px;
}

iframe.doctor-video {
  width: 100%;
  height: 100%;
  max-height: 675px;
}

/*Scroll bar styles*/

.grid::-webkit-scrollbar {
  height: 5px;               /* width of the entire scrollbar */
}

.grid::-webkit-scrollbar-track {
  background-color: #333333;         /* color of the tracking area */
  margin: 10px 20px;
  border-radius: 5px;   
}

.grid::-webkit-scrollbar-thumb {
  background-color: #666666;    /* color of the scroll thumb */
  border-radius: 5px;       /* roundness of the scroll thumb */
}

/* Handle on hover */
.grid::-webkit-scrollbar-thumb:hover {
  background-color: #cccccc; 
}


/*CV Styles*/

.cv {
  display: grid;
  grid-column-gap: 30px;
  grid-row-gap: 10px;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  margin: 0 0 40px 0;
  padding: 0 var(--gutter);
}

.year {
  font-size: .7em;
  padding-top: 9px;
  text-align: right;
}

.info .year {
  text-align: left;
}

.employer {
  font-family: 'gooper', serif;
  font-size: 1.5em;
  /*font-style: italic;*/
  margin: 20px 0 0px 0; 
}

.section {
  font-family: 'gooper', serif;
  font-size: 1.25em;
  grid-column: 1 / 3;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
  margin: 0px 0 10px 0;
}

.skills {
  /*grid-column: 1 / 3;*/
  margin: 0 0 10px 0;
  font-size: 1em;

}

.job h3{
  font-size: 1.25em;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.info h3 {
  font-size:1em;
  margin: 0;
}

ul{
  list-style-position: outside;
  list-style-type: circle;
  margin: 0 0 0px 20px;
  padding: 0;
  font-weight: 100;
}

li{
  margin: 0 0 8px 0;
}

@media only screen and (min-width: 550px) {

    footer {
      padding: 60px 100px 100px 100px;
    }


    /*Typography*/

    h1{
      font-size: 3em;
    }


    /*Nav bar styles*/

      header{
        grid-gap: 24px;
      }

      #title{
        font-size: 1.5em;
        margin-left: var(--gutter);
      }

      #email-button{
        padding: 2px 30px 4px 30px;
        margin: 6px var(--gutter) 9px 0;
      }

      #email-button:hover {
        padding: 2px 30px 4px 30px;
        margin: 4px var(--gutter) 11px 0;
        filter: drop-shadow(0px 6px 0px #167d5e)
      }

      .nav-link{
       margin-top: 12px;
      }

    /*Home Styles*/

    .flex-wrapper{
      margin: 80px auto -100px auto;
    }

      .hero-wrapper{
        width: 500px;
        height: 500px;
      }

      .past-work{
        grid-template: auto 1fr / 1fr 1fr;
        grid-gap: 40px;
      }

      .past-work h2{
         grid-column: 1 / 3;
      }

      .bio h1{
          font-size: 4em;
          margin-bottom: 8px;
        }

      .bio p{
          font-size: 1.5em;
          margin: 0 0 16px 0;
        }

      .big-button{
        max-width: 380px;
        margin: 0 auto;
      }

 .back{
  margin-bottom: -30px;
}

    /*Portfolio Styles*/

      .grid {
        max-width: 100%;
        grid-template-columns: repeat(12, 1fr); 
        padding: 0 20px;
        margin: 40px 0 40px 0;
      }

      .grid > * {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .logo-menu {
        margin: 40px 20px;
        grid-gap: 40px 60px;
      }

      .description-2-col{
        margin: 0 var(--gutter) 60px var(--gutter);
        display: grid;
        grid-gap: var(--gutter);
        grid-template-columns: 150px 1fr;
      }

      .kesimpta {
        grid-template-rows: repeat(3, auto);
      } 

      .sculptandlift {
        grid-template-rows: repeat(3, auto);
      } 

      .snl_after-after {
        grid-area: 1 / 1 / 2 / 13;
      }

      .snl_dtc {
        grid-area: 2 / 1 / 4 / 5;
      }

      .snl_anna {
        grid-area: 2 / 5 / 3 / 9;
        /*height: 250px;*/
      }

      .snl_denise {
        grid-area: 2 / 9 / 3 / 13;
        /*height: 250px;*/
      }

      .snl_hcp {
        grid-area: 3 / 5 / 4 / 13;
        /*height: 330px;*/
      }

      .cd-3 {
        grid-area: 1 / 1 / 2 / 7;
        /*height: 330px;*/
      }

      .cd-5 {
        grid-area: 1 / 7 / 2 / 13;
        /*height: 330px;*/
      }


      .ozempic, .ozempic-small {
        grid-template-rows: repeat(2, auto);
      } 

      .emrosi-launch {
        grid-template-rows: repeat(3, auto);
      } 

      .emrosi {
        grid-template-rows: repeat(2, auto);
      } 

      .era {
        grid-column: span 12;
      }

      .mino {
        grid-column: span 12;
      }

      .mino-final {
        grid-area: 1 / 1 / 2 / 13;
      }


      .three-span {
        grid-column: span 3; /* each item takes up 3 columns */
      }

      .four-span {
        grid-column: span 4; /* each item takes up 4 columns */
      }


      .emrosi_brochure {
        grid-area: 2 / 1 / 3 / 9;
      }

      .emrosi_pill {
        grid-area: 2 / 9 / 3 / 13;
      }

     .emrosi_mom {
        grid-area: 3 / 1 / 4 / 5;
      }

      .emrosi_sites {
        grid-area: 3 / 5 / 4 / 13;
      }


      .stories{
        grid-area: 1 / 1 / 2 / 7;
      }

      .jane-video{
        grid-area: 1 / 7 / 2 / 13;
        object-fit: fill;
      }

      .coinage {
        grid-template-rows: repeat(2, auto);
      } 

      .kit {
        grid-area: 1 / 1 / 3 / 9;
      }

      .pen{
        grid-area: 1 / 9 / 2 / 13;
      }

      .cooler {
        grid-area: 2 / 9 / 3 / 13;
      }

      .pen-video{
        grid-area: 3 / 1 / 4 / 7;
        object-fit: cover;
      }

      .coinage-hero {
              grid-area: 1 / 1 / 2 / 9;
        }

      .tv {
        grid-area: 1 / 9 / 2 / 13;
      }

      .ots {
        grid-area: 2 / 1 / 3 / 7;
      }

      .nfts {
        grid-area: 2 / 7 / 3 / 13;
      }


      .icons {
        grid-area: 3 / 7 / 4 / 13;
      }

      .bi {
        grid-template-rows: repeat(2, auto);
      } 

      .campaign {
        grid-area: 1 / 1 / 2 / 13;
      }

      .iva {
        grid-area: 2 / 1 / 3 / 7;
      }

      .ar {
        grid-area: 2 / 7 / 3 / 13;
      }

    .doc-suicide{
      margin: 0 0 50px 0;
    }

    .lucentis, .organon{
      grid-template-rows: repeat(2, auto);
    }

    .smallthing{
      grid-area: 1 / 1 / 3 / 8;
    }

    .eye{
      grid-area: 1 / 8 / 2 / 13;
    }

    .falb{
      grid-area: 2 / 8 / 3 / 13;
    }



    /*CV Styles*/

    .section {
      font-size: 1.75em;
    }

    .employer {
      font-size: 2em;
    }

    .job h3{
      font-size: 1.5em;
    }

    .year {
      font-size: 1em;
      padding-top: 8px;
    }

    li{
      font-size: 1.25em;
    }

    .skills{
      font-size: 1.25em;
    }

  }


@media only screen and (min-width: 900px) {
   
  header{
    grid-gap: 40px;
  }

  #title{
    font-size: 2em;
  }

  .description{
    margin: 0 calc(var(--gutter)*4);
  }

  .description-2-col{
    margin: 0 calc(var(--gutter)*4) 60px calc(var(--gutter)*4);
  }


  .cv {
    padding: 0 calc(var(--gutter) * 4);
  }

  .year {
    padding-top: 7px;
  }

      #redirect {
        grid-gap: 40px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin: 20px 0;
      }

}

@media only screen and (max-width: 350px) {
  
  #title{
    font-size: .8em;
  }
}

@media only screen and (max-width: 400px) {
  .nav-link{
    font-size: .6em;
    margin-top: 10px;
  }

}