/* CSS Document */

.profile-body {
background-color:#000;
color:#FFF;
font-weight:300;
line-height:2em;

background-image: url('/profile/img/black-texture.jpg');
}

.profile-body b, strong{
font-weight:600;
}

.profile-section p{
margin-bottom:2em;

}

.profile-section a{
color:#E18E45;

}

.profile-section a.profile-button {
  color: #000;
}

.profile-hero {

height:700px;
margin-top:2em;
margin-bottom:5em;
}


.profile-hero-container {
position: relative;
height: 100%;
width:1000px;
margin-left:auto;
margin-right:auto;
padding-left:20px;
padding-right:20px;
}

.profile-hero-image {
  position: absolute;
  z-index: 0;
mix-blend-mode: lighten;  
}


.profile-series-name{
  color: var(--main-color);
  font-size:2em;
  font-weight:200;
margin-bottom:10px;
  position: relative;
  z-index: 1;
}

.profile-collaborator-name{
color: var(--main-color);
line-height:1em;
font-size:4em;
font-weight:bold;
position: relative;
z-index: 1;
margin-bottom:10px;
}

.profile-intro{

font-weight:200;
font-size:1.25em;
position: relative;
z-index: 1;

}

.profile-collaborator{
color: var(--main-color);
line-height:1.4em;
font-size:2em;
font-weight:200;
text-transform: uppercase;
position: relative;
z-index: 1;
}

.profile-summary {
color: #FFF;
margin-top:10px;
margin-bottom:20px;
font-size:1.1em;
font-weight:100;
_width: 50%;          /* take 50% of the container */
_margin-left: auto;   /* push the whole div to the right */
text-align: left;   /* align the text inside */

position: relative;
z-index: 1;
}




.profile-button{


background-color:var(--main-color); 
font-weight:bold;
width:200px;

border-radius:999px;
padding: 12px 20px;
text-align: center;
text-decoration:none;

 transition: 
    filter 0.25s ease,
    box-shadow 0.25s ease,
}


.profile-button:hover{
  filter: brightness(1.1);    /* brighter without changing color */
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.4);

}


/*************************
Collab box 
**************************/

/*
.profile-tool-image {
position:absolute;
top:250px;
right:20px;
max-width:360px;
max-height:360px;
}

*/
.profile-collab-box{
  
  position: absolute;
  left:100px;
  width:300px;

  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal centering */
  text-align: center;    /* center text inside items */
}


.profile-collab-title{

  color: var(--main-color);
  text-align:center;
  font-size:1.5em;
  font-weight:200;
  line-height:1.25em;
}

.profile-collab-button-container{
  text-align:center;
  padding-top:1em;
  padding-bottom:1em;
  
}
.profile-collab-tool-image{

width:80%;
margin-top:20px;
margin-bottom:20px;
mix-blend-mode: normal;
}


.profile-subtitle{
color: var(--main-color);
margin-bottom:1em;
}

.profile-sub-subtitle{
color: var(--main-color);
font-size:1.em;
margin-bottom:1em;
}




.profile-two-columns {
  column-count: 2;
  column-gap: 4rem;
  column-rule: 1px solid white;

  color: white;       /* assuming dark background */
  line-height: 1.75em;
    padding: 0 2em;
  text-align: justify;
  hyphens: auto;    
  text-align-last: left; /* last line not stretched */  
  
  margin-bottom:2em;
}

/*caps and indenting refinements */
.profile-drop-cap p:first-of-type::first-letter {
  float: left;
  font-size: 4.8em;
  line-height: 0.85;
  margin-right: 0.2em;
  font-weight: 600;
}

.profile-new-column {
  break-before: column;
  -webkit-column-break-before: always;
}
/*
.profile-two-columns p + p {
  text-indent: 1em;
}
/ *Don’t indent after a forced column break * /
.profile-two-columns p.new-column {
  text-indent: 0;
}
*/

.profile-internal-image{

display:block;
margin-left:auto;

margin-right:auto;
width:90%;
mix-blend-mode: lighten; 
}

@media (max-width: 768px) {
  .profile-two-columns {
    column-count: 1;
    column-gap: 0;
    column-rule: none;
    padding: 0 1em; /* optional, nicer on mobile */
  }

  .profile-new-column {
    break-before: auto;
  }
}/*end mobile*/