/* Fonts */

.inter-family {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.anton-family {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}



p, title, h2, h3, h4, h5, h6 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: var(--text);
  display: flex;
    justify-self: center;
}
li, ul {
  color: var(--text);
 
}




h1{
  font-family: "Anton", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: var(--text);
}
.itamaeProjectsTitleContainer{

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  width: fit-content;
    
}

.itamaeProjectsTitleContainer img{
  width: 3rem;
  height: 3rem;
}









/* Themese */
:root {
      --radius: .625rem;
      --bg:        rgb(244, 241, 235);
      --bg-html:   white;
      --surface:   #ffffff;
      --text:      #1a1714;
      --muted:     #7a746b;
      --accent:    #c8622a;
      --border:    #e2ddd6;
      --toggle-bg: #d6d0c8;
      --shadow:    rgba(0,0,0,0.07);
      --transition: 0.3s ease;
    }
    html.dark {
      --radius: .625rem;
      --bg:        #16140f;
      --bg-html:   black;
      --surface:   #211e17;
      --text:      #f0ebe2;
      --muted:     #8a8278;
      --accent:    #e07840;
      --border:    #2e2b23;
      --toggle-bg: #3a3630;
      --shadow:    rgba(0,0,0,0.3);
    }

    /* Deuteranopia & Protanopia — blue/yellow axis */
/* Apply via: html[data-vision="deuteranopia"] */
html[data-vision="deuteranopia"] {
  --radius: .625rem;
  --bg:        rgb(255, 253, 208); /*Cream */
  --bg-html:   white;
  --surface:   #ffffff;
  --text:         rgb(0, 0, 84); 
  --muted:     #7a746b;
  --accent:    #0072B2;  /* blue */
  --accent-2:  #E69F00;  /* orange */
  --accent-3:  #F0E442;  /* yellow */
  --border:    #e2ddd6;
  --toggle-bg: #d6d0c8;
  --shadow:    rgba(0,0,0,0.07);
  --transition: 0.3s ease;
}
html.dark[data-vision="deuteranopia"] {
  --radius: .625rem;
  --bg:        #16140f;
  --bg-html:   black; 
  --surface:   #211e17;
  --text:      rgb(202, 202, 49);/* Soft yellow */
  --muted:     #8a8278;
  --accent:    #3A9FD8;  /* blue — lightened */
  --accent-2:  #F5B731;  /* orange — brightened */
  --accent-3:  #F5EC6A;  /* yellow — lightened */
  --border:    #2e2b23;
  --toggle-bg: #3a3630;
  --shadow:    rgba(0,0,0,0.3);
}


/* Tritanopia — red/green axis */
/* Apply via: html[data-vision="tritanopia"] */
html[data-vision="tritanopia"] {
  --radius: .625rem;
  --bg:        rgb(255, 253, 208); /*Cream */
  --bg-html:   white;
  --surface:   #ffffff;
  --text:      rgb(255, 140, 0); /*Deep Orange*/
  --muted:     #7a746b;
  --accent:    #D62728;  /* red */
  --accent-2:  #2CA02C;  /* green */
  --accent-3:  #FF7F0E;  /* orange */
  --border:    #e2ddd6;
  --toggle-bg: #d6d0c8;
  --shadow:    rgba(0,0,0,0.07);
  --transition: 0.3s ease;
}
html.dark[data-vision="tritanopia"] {
  --radius: .625rem;
  --bg:        rgb(51, 51, 51); /*Dark Charcoal*/
  --bg-html:   black;
  --surface:   #211e17;
  --text:      #ff0000;   /* bright red*/
  --muted:     #8a8278;
  --accent:    #EF5350;  /* red — lightened */
  --accent-2:  #4CAF50;  /* green — brightened */
  --accent-3:  #FFA040;  /* orange — lightened */
  --border:    #2e2b23;
  --toggle-bg: #3a3630;
  --shadow:    rgba(0,0,0,0.3);
}

/* Achromatopsia — lightness contrast only */
/* Apply via: html[data-vision="achromatopsia"] */
html[data-vision="achromatopsia"] {
  --radius: .625rem;
  --bg:        rgb(255, 253, 208); /*Cream */
  --bg-html:   white;
  --surface:   #ffffff;
  --text:      #111111;
  --muted:     #888888;
  --accent:    #444444;  /* dark gray */
  --accent-2:  #888888;  /* mid gray */
  --accent-3:  #C0C0C0;  /* light gray */
  --border:    #C0C0C0;
  --toggle-bg: #C0C0C0;
  --shadow:    rgba(0,0,0,0.07);
  --transition: 0.3s ease;
}
html.dark[data-vision="achromatopsia"] {
  --radius: .625rem;
  --bg:        #111111;    /*Solid black */
  --bg-html:   black;
  --surface:   #222222;
  --text:      rgb(202, 202, 49);/* Soft yellow */
  --muted:     #888888;
  --accent:    #C0C0C0;  /* light gray */
  --accent-2:  #888888;  /* mid gray */
  --accent-3:  #444444;  /* dark gray */
  --border:    #333333;
  --toggle-bg: #333333;
  --shadow:    rgba(0,0,0,0.3);
}










html{
   background-color: var(--bg-html);
    width: 100%;
     height: 100%;  
    content: "";
    position: absolute;
     z-index:-1;
     
}




#about-story p {
  
    justify-content: center;
    display: flex;
    align-self: center;
}
h1 {
    text-align: center;
    font-size: 2rem;
   
     justify-self: center;
}

#about-story h2{
    text-align: center;
    justify-self: center;
    font-size: 1.5rem;
     
}
  






main{
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1rem;
  border-bottom: .01rem solid var(--accent-3);
}
/*Tracing Sections */

section{
  padding-bottom: 1rem;
  border-bottom: .05rem solid var(--accent-3);
    
}



#main > *{
    position:relative;
    z-index: 1;
    
}
#main::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url('Image-assets/intergalactic_sushi_2.webp') no-repeat center/cover;
   background-size: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
   

}

#main::before{

    background-color: var(--bg);
    width: 100%;
     height: 100%;  
    content: "";
    position: absolute;
     border: .3125rem solid var(--accent);
     z-index:-1;
}




article title{
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--text);
  display:flex;
  justify-self:center;
    background:
  linear-gradient(to right, transparent 0%, var(--bg) 15%, var(--bg) 85%, transparent 100%);
  box-shadow: 0 .75rem 1rem -1rem #111111;
  padding: .5rem;
    z-index: 2;

}



#about-story{
  
  display:flex;
  flex-direction: column;
  justify-self:center;
  position: relative;
 padding-bottom: 1rem;
  
  }

#about-story::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;

 
}

article{
   background:
  linear-gradient(to right, transparent 0%, var(--bg) 1%, var(--bg) 99%, transparent 100%);
  box-shadow: 0 .75rem 1rem -1rem #111111;
 display: flex;
 justify-self: center;
 flex-direction: column;
 padding: .5rem .75rem 1.25rem .75rem;
  margin: 1rem;
}

section{
  display:flex;
  flex-direction: column;
  justify-self: center;
  gap: 1rem;
}

.disclaimer{
  position:relative;
  display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
max-height: 11rem;

box-shadow: none;

 
 mask-image: linear-gradient(
    to bottom,
    var(--text)20%,
    var(--text)1%,
    transparent 100%
  );




}
.disclaimer.expanded{
  position:relative;
  display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
max-height: max-content;
height: fit-content;
mask-image: none;

}
.viewMore.expanded{
  max-height: max-content;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  position:relative;
  display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;

}

.viewMore{
  position: absolute;
  justify-self: center;
  transform: translateY(-90%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  
  cursor: pointer;
  width:100%;
  color: var(--text);
  background: linear-gradient(
  to bottom,
  transparent,
  var(--bg-html));


  overflow: visible;
  height: 5rem;
  
}




.viewMoreButton.expanded{
display:none;
}
.viewMoreButton{

  border-radius: .625rem;
  background: var(--bg);
  padding: .1rem;
  border: .1rem solid var(--accent);

}

.viewMoreButton.expanded{
  display:none;
}

.viewMoreButton:hover{
  background: var(--text);
  color: var(--bg);
}


.viewMoreButton::after{
  content:'';
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 100%;
height: .5rem;
background: linear-gradient(
  to right,
  transparent,
  var(--accent),
  var(--accent),
  transparent
  );
}

.viewLessButton{

  border-radius: .625rem;
  background: var(--bg);
  padding: .1rem;
  border: .1rem solid var(--accent);
}

.viewLess{
  display: none;
   position: absolute;
  justify-self: center;
  transform: translateY(-90%);
 
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  
  cursor: pointer;
  width:100%;
  color: var(--text);
  background: linear-gradient(
  to bottom,
  transparent,
  var(--bg-html));

  overflow: visible;
  height: 5rem;
}

.viewLess.compress{
display:flex;
}

.viewLessButton.compress{
  display:flex;
}

.viewLessButton:hover{
  background: var(--text);
  color: var(--bg);
}
.viewLessButton::after{
  content:'';
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 100%;
height: .5rem;
background: linear-gradient(
  to right,
  transparent,
  var(--accent),
  var(--accent),
  transparent
  );
}


.work{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
 
}




.image-container{
display: flex;
flex-direction: row;
width: 100%;
}
.image-container img{
  max-width: 20%;
 padding: 2%;
} 

.image-portrait img{
 max-width: 100%;
 padding: 2%;
 border-radius: var(--radius);
}
.image-portrait{
  width: 30%;
  
}

.merchandise img{
width: 15%;
}


.supportContainer{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  

}

.howToSupport a{
  width:15%;
  display: flex;
  flex-direction: column;
}

.howToSupport a img{
  width:100%;
}

a{
text-decoration: none;
justify-items: center;
}





article.art{
  flex: 1 1 90%;
  text-align: center;
align-items: center;

}
article.anime{
text-align: center;
align-items: center;
max-width: 50%;
flex: 1 1 40%;
width: 40%;
}


article.manga{
text-align: center;
align-items: center;
max-width: 50%;
flex: 1 1 40%;
width: 40%;
}

article.merchandise{
text-align: center;
align-items: center;
flex: 1 1 40%;
width: 40%;
max-width: 50%;
}

article.howToSupport{
text-align: center;
align-items: center;
max-width: 50%;
flex: 1 1 40%;
width: 40%;
}




.contact{
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  
  

}
.contact a{
 
  text-align: center;
  display: flex;
  flex-direction: row;
  
}

.contact p{
  justify-items: center;
 align-items: center;
  width: 100%;
  padding: 1rem;
  margin-right:1rem;
}


ul li img{
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .5rem;
}