/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/
/*div {
   border: 2px solid pink;
}*/

* {
   box-sizing: border-box;
}

h1 {
   font-size: 50px;
   font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
   font-style: normal; 
   font-variant: normal; 
   font-weight: 150; 
   line-height: 60px;
   justify-items: center;
/*   text-shadow: 100 100 100px #fff;*/
/*   padding-top: 10px;*/
}

h2 {
   font-size: 35px;
   font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
   font-style: normal; 
   font-variant: normal; 
   font-weight: 150; 
   line-height: 30px;
   justify-items: center;
/*   text-shadow: 0 0 30px #fff;*/
}

.byline {
   font-size: 20px;
   font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
   font-style: normal; 
   font-variant: normal; 
   font-weight: 150; 
   line-height: 30px;
   justify-items: center;
/*   text-shadow: 0 0 30px #fff;*/
}

.header {
   width: 100%;
   text-align: center;
   font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;    
   color: white;
   background-color: #990000;
   margin: auto;
   padding: 30px 80px 60px 80px;
   -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.header h1 {
   font-size: 50px;
   font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
   font-style: normal; 
   font-variant: normal; 
   font-weight: 100; 
   line-height: 60px;
   color: white;
}

.header h2 {
   font-size: 20px;
   font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
   font-style: normal; 
   font-variant: normal; 
   font-weight: 100; 
   line-height: 30px;
   color: white;
}

.contact {
   width: 100%;
   text-align: center;
   margin: auto;
   padding: 30px;
}

img, video {
   width: 100%;
   display: block;
}

body {
   background-color: black;
   color: white;
   font-family: 'Lato', sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
   -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

nav {
    background-color: black;
    position: sticky;
    margin: auto;
    width: 100%;
    justify-items: center;
}

ul {
    list-style-type: none;
    margin: auto;
    padding: 10px;
}

li {
    display: table-cell;
}

a {
    display: inline-block;
    color: white;
    text-align: center;
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
    font-size: 18px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 250; 
    line-height: 20px; 
    padding: 20px 20px;
    text-decoration: blink;
}

a:hover {
    background-color: darkred;
}

.shai {
   display: grid;
   grid-template-columns: 1fr 1fr;
   padding-top: 30px;
}

.wnba {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   width: 85%;
   padding-top: 10px;
   padding-bottom: 30px;
   margin: auto;
   overflow: hidden;
}

.reese {
   margin-top: 20px;
}

.wnba p {
    text-align: center;
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
    font-size: 12px; 
}

.background {
   width: 100%;
   top: 0;
   z-index: -1;
/*   position: sticky;*/
/*   padding: 20px 50px 20px 50px;*/
/*   border: 2px solid pink;*/
}

.background video {
   width: 100vw;
/*   height: 85%;*/
   object-fit: cover;
   padding: 20px;
/*   border: 2px solid pink;*/
}

.title {
   width: 80%;
   margin: auto;
   text-align: center;
/*   z-index: 1;*/
   color: black;
   -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
   border: 2px solid white;
}

.main {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
   border: 2px solid pink;
}

.whitebox {
   width: 100%;
   background-color: black;
   position: sticky;
   position: -webkit-sticky;    
   top: 30px;
   bottom: -30px;
   z-index: -1;
   padding: 10vh 0vw;
   -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.scrollingwords {
   max-width: 640px;
   margin: auto;
   text-align: justify;
   -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
   font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
   font-size: 18px; 
   font-style: normal; 
   font-variant: normal; 
   font-weight: 150px; 
   line-height: 30px; 
   padding: 0px 10px 20px 0px;
}

.blurb {
   width: 85%;
   padding-top: 20px;
   padding-bottom: 20px;
   margin: auto;
   display: block;
   background-color: black;
/*   border: 1px solid limegreen;*/
   overflow: hidden;
}

.img1 {
   width: 80%;
   margin-bottom: 20px;
   margin-top: 20px;
   float: right;
/*   margin-left: 250px;*/
/*   margin-right: -20px;*/
}

.img2 {
   width: 80%;
/*   margin-bottom: 20px;*/
   margin-top: 20px;
/*   margin-left: 100px;*/
/*   margin-right: -80px;*/
}

.img3 {
   width: 80%;
/*   margin-bottom: 20px;*/
   margin-top: 20px;
   float: right;
/*   margin-left: 250px;*/
/*   margin-right: -20px;*/
}

/*.first {
   max-width: 400px;
}*/

.sidepic {
   width: 50%;
   padding: 10px;
}

.left {
   float: left;
   margin: auto;
   margin-right: 30px;
   margin-top: 10px;
   margin-bottom: 10px;
/*   margin-left: -50px;*/
}

.right {
   float: right;
   margin: auto;
   margin-left: 30px;
   margin-top: 10px;
   margin-bottom: 10px;
}

.widepic {
   width: 100vw;
   height: 100vh;
   position: sticky;
   position: -webkit-sticky;    
   top: 0px;
   z-index: -1;  
}

.widepic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

  .icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: darkred;
}

.instagram {
  background: darkolivegreen;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.linktree {
  background: limegreen;
  color: black;
}

.digital {
   width: 100%;
   margin: auto;
   display: grid;
   justify-items: center;
/*   border: 1px solid limegreen;*/
   background: -webkit-linear-gradient(top, black, black, white, white, black, black);
}

.embed {
   padding-top: 20px;
   padding-bottom: 20px;
/*   border: 1px solid limegreen;*/
}

.button {
   width: 100%;
   margin: auto;
   justify-content: center;
   text-align: center;
   margin-bottom: 60px;
   padding: 30px;
}

.btn {
    padding: 20px 50px 20px 30px;
    background-color: #990000;
    color: white;
    border: lightgoldenrodyellow;
    border-radius: 10px;
    cursor: pointer;
    position: relative; /* Position relative for absolute positioning of arrow */
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
    font-size: 20px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 500px; 
    line-height: 20px; 
/*    margin-left: 500px;
    margin-bottom: 100px;*/
}

.arrow {
    position: absolute;
    right: 20px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
}

.portrait {
   width: 30%;
   align-items: center;
   margin: auto;
}

.articles {
   margin: auto;
   justify-content: center;
   text-align: center;
   padding: 50px;
/*   display: inline-block;*/
}

.links {
   text-decoration: underline;
}

.podcast {
   margin: auto;
   padding: 10px 70px 10px 70px;
}

/*media query for responsive design */

@media only screen and (max-width: 813px) {

   .sidepic {
      width: 50%;
      margin: 20px 0px;
      overflow: hidden;
   }

   .icon-bar {
      display: none;
   }

}

@media only screen and (max-width: 825px) {

   .wnba p {
    text-align: center;
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
    font-size: 10px;
   }

}