:root {
    --foreground-color: #fff;
    --tr:0.4;
    
    --wR2:54;
    --wG2:24;
    --wB2:99;
    --wR:160;
    --wG:124;
    --wB:214;
    --wC2:#361863;
    --wC:#a07cd6;
    
    --hR:235;
    --hG:160;
    --hB:20;
    --hR2:191;
    --hG2:73;
    --hB2:0;
    --hC: #eba014;
    --hC2: #bf4900;
    
    --eR:166;
    --eG:198;
    --eB:49;
    --eR2:40;
    --eG2:80;
    --eB2:11;
    --eC: #a6c631;
    --eC2: #28500b;
    
    --kR:20;
    --kG:111;
    --kB:146;
    --kR2:0;
    --kG2:1;
    --kB2:80;
    --kC: #146F92;
    --kC2: #000150;
    
    --rR:229;
    --rG:43;
    --rB:43;
    --rR2:116;
    --rG2:22;
    --rB2:23;
    --rC: #e52b2b;
    --rC2: #741617;
}

html, body {height:100%; margin:0; padding:0;}

body {
  font-family:'Simonetta',serif; 
  font-size: 1.2em;
  -webkit-font-smoothing: antialiased;
  color:#303030;
  background: #71a3de url(/img/bg_SeaPinks.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment:fixed;
  animation: animatedBackground 40s linear alternate infinite;
}

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    50% { background-position: 50% 0; }
    100% { background-position: 0 0; }
}

a {
    border:0;
    text-decoration: none;
    color:var(--wC);
}

p {
  line-height: 1.2em;
}

li {line-height: 2em;}

.containerR {
  justify-content: right;
  align-items: right;
  vertical-align:middle;
  margin:auto;
  margin-left:40vw;
  padding:0;
}

.containerL {
  float:left;
  align-items: center;
  margin:auto;
}


.logobg,.tabbg {
    padding: 0px;
    height:15vh;
    background-repeat: no-repeat;
    background-position: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: grayscale(1);
    -webkit-backdrop-filter: grayscale(1);
    box-shadow: 15px 15px 20px 5px rgba(calc(var(--wR2)/4), calc(var(--wG2)/4),calc(var(--wB2)/4), .4);
    transition: 200ms linear; 
    border-bottom:3px solid rgba(255,255,255,0.25);
}

.logobg {
  float:left;
  background-color:rgba(var(--wR2),var(--wG2),var(--wB2),calc(var(--tr)*1.5));
  width:34vw;
  margin:auto;
  border-radius:0 70vmax 70vmax 0;
  border-left:0;
  background-size:10vmax;
  background-image: url(/img/WyrdWiseLogo.png);
}

.tabbg {
  margin: 5vmin;
  margin-right:0;
  margin-left:0;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items:center;
  vertical-align:middle;
  border-radius:70vmax 0 0 70vmax;
  border-right:0;
  width: 100%;
  min-height:10vw;
  background-size: cover;
  color: #fff;
  overflow:hidden;
  background: rgba(200,200,200, 0.48);
  padding:0;
 }
  

.textbox{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items:center;
  vertical-align:middle;
  padding-left:2vmax;
  margin:0;
}


h1 {
  padding:0;
  margin:0;
  font-size: 2em;
  font-weight:200;
  text-shadow:-2px -2px 2px #a0a0a0;
  color:#e0e0e0;
  border-bottom:1px solid #e0e0e0;
  opacity:0.9;
}


.textbox h1 {
    font-size: 4.5vmax;color:#e0e0e0;  
    border-bottom:0;
}

h2 {
  text-align:center;
  font-size: calc(1.5vh + .5rem);
  font-weight:100;
  padding:0;
  margin:0;
  width:100%;
  color:#fff;
  text-shadow:-1px -1px 2px #808080;
  border-top: 1px solid rgba(255,255,255,var(--tr));
}

h2:first-of-type {border:0;}

#back{
  background-image: url(/img/Back.png);
  margin-left:auto;
  float: left;
  text-align: center;
  position:absolute;
  margin-top:11vmin;
 }



#hyp {   /* Hypnosis */
background-image: linear-gradient(to right, rgba(var(--hR), var(--hG),var(--hB), var(--tr)),33%, rgba(var(--hR2), var(--hG2),var(--hB2),  calc(var(--tr)*2)));
    box-shadow: 15px 15px 10px 5px rgba(calc(var(--hR)/4), calc(var(--hG)/4),calc(var(--hB)/4), var(--tr));
}

#eco {                                       /* Ecopsych */
background-image: linear-gradient(to right, rgba(var(--eR), var(--eG),var(--eB), var(--tr)),33%,rgba(var(--eR2), var(--eG2),var(--eB2),  calc(var(--tr)*2)));
    box-shadow: 15px 15px 10px 5px rgba(calc(var(--eR)/4), calc(var(--eG)/4),calc(var(--eB)/4), var(--tr));
}

#ken {                                     /* Kenning */
    background-image: linear-gradient(to right, rgba(var(--kR), var(--kG),var(--kB), var(--tr)),33%, rgba(var(--kR2), var(--kG2),var(--kB2), calc(var(--tr)*2)));
    box-shadow: 15px 15px 10px 5px rgba(calc(var(--kR)/4), calc(var(--kG)/4),calc(var(--kB)/4), var(--tr));
}

#res {                                       /* Research */
    background-image: linear-gradient(to right, rgba(var(--rR), var(--rG),var(--rB), var(--tr)),33%, rgba(var(--rR2), var(--rG2),var(--rB2),  calc(var(--tr)*2)));
    box-shadow: 15px 15px 10px 5px rgba(calc(var(--rR)/4), calc(var(--rG)/4),calc(var(--rB)/4), var(--tr));
}

.neutral {
        width:90%;
        margin:auto;
		padding:20px;
		background: rgba(255,255,255,0.5);
        font-size:2.5vh;
		border-top:4px solid rgba(255,255,255,0.1);
        border-left:4px solid rgba(255,255,255,0.1);
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
        border-radius:3vmax;
        color:#303030;
}

.neutral h2{padding-top:2vmax;}
.neutral h2::before{content:'\0066d\00a0';color:var(--hC2);}
.summary h2::before{content:none;}
		
p   {
    margin-left:10px;
    margin-right:10px;
    margin-bottom:2vh;
    margin-top:2vh;
    text-align:justify;
    line-height:1.5em;
}
    
p::first-letter {
  font-size: 1.3em;
}


img {
    background:#f0f0f0;
    border-radius:10%;
    opacity:0.7;
    width:16vmax;
    height:auto;
    shape-outside: margin-box;
}


.inlineimgR {
    float:right;
    margin-left:20px;
    margin-right:-20px;
    border-radius:70vmax 0 0 70vmax;
}

.inlineimgL {
    float:left;
    margin-right:20px;
    margin-left:-24px;
    border-radius:0 70vmax 70vmax 0;
}

.contact {
        width:100%;
        left: 50%;
        transform: translateX(-50%);
		text-align:center;
		justify-content: center;
        align-items:center;
        vertical-align:middle;
        z-index:1;
		position:fixed;
    	bottom:0;
		font-size:2vh;
        line-height:1.5em;
	    border:0;
	    background-color:rgba(var(--wR),var(--wG),var(--wB),calc(var(--tr)*1.5));
	    color:#e0e0e0;
}

.glass-button {
    padding: 8px 16px;
    border: 0;
    text-decoration: none;
    border-radius: 15px;
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
   	border-top:2px solid rgba(255,255,255,0.1);
    border-left:2px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
 }

 .glass-button:hover {
   background-color: rgba(85,1805,0,0.2);
 }


.glow {
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  
  from {text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #88b5bf, 0 0 40px #88b5bf, 0 0 50px #88b5bf;}
  to {text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #f2cb9b, 0 0 50px #f2cb9b;}
}




@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .contact{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    }
.contact a	{font-weight:500;}
.contact span	{width:100%;}

@media(hover: hover) and (pointer: fine) {
    .logobg:hover {filter:brightness(120%);}
    .tabbg:hover h1 {
        -webkit-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        animation: glow 1s ease-in-out infinite alternate;}
}

@media screen and (orientation:portrait) {
    body {animation: animatedBackground 120s linear alternate infinite;}
    #inlineimgR,#inlineimgL {float:none; margin:auto;width:100%;}
}