/*
Theme Name:	ODA Styles
Description: Theme for ODA & Distanz e.V.
Author:	Andi Heintzel
Author URI:	https://www.pixel-salon.de
Template:	twentytwentyfive
Version:	0.1
Text Domain:  oda-twentytwentyfive-child
*/


/* V A R I A B L E S */


 :root {
    --distanzblau: rgb(110,160,181);
    --darkblue1: #4A5D68;
    --darkblue2: #252E34;
    --distanzorange: rgb(255,80,0);
    --fallobst: #FFA601;
    --radioactive: #C7FFCC;
    --simpleOrange: rgb(200, 40, 0);
    
    
    
    --highlightcolor: #ff00ff;
    --dimmcolor: rgba(39,39,39, 0.5);
    --text: #A0AAAE;
    --brightText: #BECFD6;
    
    --darkBackground: #222222;
    
    --radioactiveodagradient: linear-gradient(90deg, #C7FFCC 0%, var(--Distanz-Blau, #6EA0B5) 73.69%);
    
    --radioactiveBackgroundGradient: linear-gradient(90deg, rgba(199, 255, 204, 0.5) 0%, rgba(110, 160, 181, 0.5) 73.69%);
    
    --radioactiveDimmedBackgroundGradient: linear-gradient(90deg, rgba(199, 255, 204, 0.2) 0%, rgba(110, 160, 181, 0.2) 73.69%);
    
    --cursorHeight: 150px;
    --cursorWidth: 10px;
    --test: 100px;
 }


/* ! T Y P O G R A P H Y */



 
body, 
 input,
 textarea,
 button {
   font-family: 'Jost', sans-serif;
   font-feature-settings: "ss01" 1;
   letter-spacing: 4%;
   font-style: normal;
   font-weight: 500;
   color: var(--text);
 }
 
input[type=text],
input[type=email],
textarea {
  font-size: 120%;
}
 
h1 {
   font-weight: 500;
   font-size: 300%;
   background: var(--radioactiveodagradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
h2 {
    font-weight: 500;
    font-size: 225%;
    background: var(--radioactiveodagradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
  }

h3 {
  font-weight: 500;
  font-size: 166%;
  color: var(--brightText);
}

body.home #features h3 {
  background: var(--radioactiveodagradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

p {
font-size: 18px;
}

#subheadline,
#subheadline p{
  font-size: 22px;
}

/* ! Silbentrennung */

body {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

h1, h2, h3, h4 {
  hyphens: none;
}

@media screen and (max-width: 800px) {
  h1, h2, h3, h4 {
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-after:3;
    -webkit-hyphenate-limit-before:3;
  }
}


/* ! Typewriter  */

#typewriter_textcontainer {
  position: relative;
}

#typewriter_textcontainer p{
  font-size: 700%;
  line-height: 100%;
  font-weight: 500;
  margin: 0;  
}

#typewriter_textcontainer p {
  /* display: none; */
  color: transparent;
  /* color: rgba(255,80,0,0.12); */
  position: absolute;
  top: 0;
}

#typewriter_textcontainer p.output {
  display: block;
  position: relative;
}

#typewriter_textcontainer p.output span.new {
  color: var(--distanzorange)
}

#typewriter_textcontainer p.output {
  display: block;
  margin-bottom: 100px;
}


/* ! Blinkender Cursor */


#typewriter_textcontainer p.output span.new {
  
}

#typewriter_textcontainer p.output span.new:after {
  content: " ";
  position: absolute;
  width: var(--cursorWidth);
  height: var(--cursorHeight);
  margin-left: 25px;
  background-color: var(--distanzorange);
  animation-name: typewriterAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

 @keyframes typewriterAnimation {
  0%   {opacity: 1;}
  50%  {opacity: 1;}
  51%  {opacity: 0;}
  100% {opacity: 0;}
}

 
/* ! Home Special */

body.home main {
  margin-top: 0 !important;
}

body.home h1.wp-block-post-title {
  display: none;
} 



 
/* ! Basic Layout */

h1 {
  text-align: center;
}

#subheadline.oda-block {
  padding-top: 0;
}

.oda-block {
  padding: 50px 0;
  position: relative;
}

@media (min-width: 800px) {
  .flip-order div{
    order: 1;
  }  
  .flip-order div:first-child {
    order: 2;
  }
}


 
/* ! Basic Styling   */
body {
  background-color: var(--darkBackground); 
}
 
header nav ul{
  background: var(--radioactiveodagradient);
   -webkit-background-clip: text;
   -webkit-box-decoration-break: clone;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: var(--text);
   display: inline-block;
}

@media (max-width: 599px) {
  header nav ul{
    color: black;
    background: none;
    -webkit-text-fill-color: black;
  }
}



h1:after {
  content: " ";
  position: absolute;
  z-index: -99;
  left: 0;
  width: 100%;
  height: 300px;
  background-image: url(images/blurryglow.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

footer {
  position: relative;
  padding-top: 50px;
}

footer:after {
  content: " ";
  position: absolute;
  z-index: -99;
  left: 0;
  top: 0;
  /* border: 2px solid red; */
  width: 100%;
  height: 300px;
  background-image: url(images/blurryglow.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

 .highlight, 
 .highlight-schmal,
 .highlight-outline {
   color: white;
 }
 
 .highlight h2,
 .highlight-schmal h2 {
   background-color: white;
   -webkit-text-fill-color: white;
 }
 
.highlight:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 100%;  
  background: var(--radioactiveBackgroundGradient);
}
 
.highlight-schmal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;  
  background: var(--radioactiveBackgroundGradient);
}
 
.highlight-outline:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px; 
  border: 4px solid;
  border-color: var(--radioactive);
}
 
 figure img{
   border-radius: 10px;
 }
 
 footer figure img {
   border-radius: 0;
 }
 
 /* ! Home Special Styling  */
 body.home #headlineGlow {
   margin-top: -100px;
 }
 
/* ! ODA Verstehen Styling */

.beschreibung em {
  color: var(--radioactive);
  font-style: normal;
}
.beschreibung strong {
  font-size: 150%;
  font-weight: 400;
}
 
#settings .wp-block-column {
  background: var(--radioactiveDimmedBackgroundGradient);
  padding: 25px;
  border-radius: 8px;
  color: var(--brightText);
} 

/* ! Distanz Styling  */
/* .page-id-54 #headlineGlow object{ */
  /* width: 400px; */
/* } */

 
/* ! Buttons */

input[type=submit],
.wp-element-button {
  background: var(--radioactiveodagradient);
  color: var(--darkBackground);
  font-size: var(--wp--preset--font-size--large);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 24px;
  padding: 12px 16px;
  font-weight: 600;
  border: none;
}
 
 
 /* ! Formulare  */
 
 textarea, 
 input[type=text],
 input[type=email] {
   width: 100%;
   /* background: var(--radioactiveBackgroundGradient); */
   background: transparent;
   border: 2px solid white;
   color: white;
   padding: 15px;
   border-radius: 15px;
   box-sizing: border-box;
 }
 
 input[type=submit] {
   position: relative;
   margin: 25px auto;
   display: block;
 }
 
form label:before {
  content: " ";
  display: inline-block;
  width: 10px;
}
 
.highlight input[type=submit] {
  background: white;
}
 
/* ! PLAYGROUND */

/* .oda-block {
  border: 3px solid rgba(255,0,0,0.2);
} */

/* .oda-block:before {
  content: ".oda-block";
  color: var(--darkBackground);
  background: rgba(255,0,0,0.2);
  font-size: 80%;
  /* font-weight: bold; */
  /* position: absolute;
  left: 0;
  top:0; */
} */


/* ! Navigation  */

.wp-block-navigation__responsive-container,
.wp-block-navigation:not(.has-background),
.wp-block-navigation_responsive-container.is-menu-open:not(-disable-default-overlay) {
  background-color: red !important;
}

/* ! Zitate Dialog */
:root :where(.wp-block-quote),
blockquote {
  border: none;
}

blockquote {
  transform: scale(0);
  transition: all 250ms ease-out; 
}


blockquote p {
  /* font-size: 125%;  */
  font-weight: 500;
  padding: 15px;
  border-radius: 15px;
  position: relative;
  max-width: 40%;

}

blockquote {
  text-align: right;
}

blockquote p {
  border: 2px solid var(--fallobst);  
  right: 48%;
  left: auto;
  display: inline-block;
  text-align: right;
  color: var(--fallobst);
}

blockquote:nth-child(odd) {
  text-align: left;
}

blockquote:nth-child(odd) p{
  border: 2px solid var(--radioactive);
  /* margin-right: auto; */
  /* margin-left: 50%; */
  text-align: left;
  right: auto;
  left:48%;
  color: var(--radioactive);
  
}



/* ! Inszenierung */

body{
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-name: fadeIn;
}

 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
 }

.appear-blurry {
    filter: blur(40px);
}

.oda-block {
  transition: filter 500ms ease-in-out;
}

.wp-element-button {
  transition: transform 125ms ease-out;
}

.wp-element-button:hover {
  transform: scale(1.02);
}

.wp-element-button:active {
  transform: scale(0.97);
}