/* #gridWrapp{
    display: grid;
    grid-template-columns: 200px 200px 200px; */
    /* grid-auto-rows: 200px; */
/* } */
.clearfix::after{
    content: ".";
    visibility: hidden;
    clear: both;
}

main{
    width: 80%; margin: 0px auto;
    margin-top: 7rem;
    margin-bottom: 7rem;
}
p{
margin-top:1em;
}
/* https://blog.logrocket.com/custom-cursor-css/#create-custom-cursors ->
they forget to mention that the graphic has to be 32px by 32px ... duhhhhh-> can be up to 128by128...*/
/* #index > span.hint > button{ */
     /* cursor: url('/media/lab_cursor.svg'), auto; */
     /* cursor: url('media/cat_nip_cursor128x.png'), auto; */
/* } */
#index p {
    width:80%;
}

/* article{
    justify-content: center;
    display:flex;
    align-items: center;
    flex-direction: column;*/
    /* german tutorial for animations with example code
 https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren */
/* #test {
  animation-name:             widen-brighten;
  animation-duration:         4s;
  animation-direction:        alternate;
  animation-timing-function:  ease-in-out;
  animation-iteration-count:  infinite;
}

@keyframes widen-brighten {
  from {
    fill:darkgreen;
    width: 20px;
  }
  to {
    fill: lime;
    width: 200px;
  }
} */
 /* rems, vw, and everything I need to know about units
 https://developer.mozilla.org/en-US/docs/Web/CSS/length
 */
@keyframes peek_out{
    /* translate second value = y negative pushes it up? maybe something to do with svg definitons(remember about the eyes scale factor */
    0%  {translate: -1vw 6vw;}
    10% {translate: -.7vw 2vw;}
    15% {translate: -.4vw 4vw;}
    20% {translate: -2vw 1vw;} /* should have been -.2vw but it's kinda cute as is XD */
    25% {translate: 0vw -.5vw;}
    55% {translate: 2vw -1vw;}
    80% {translate: -1vw -2.2vw;}
    85% {translate: -1.5vw -.5vw;}
    90% {translate: 1vw 2.5vw;}
    100%{translate: -1vw 4.5vw;}
}
@keyframes happy_kitty{
    /* transform: rotateZ(-180deg); */
    0%{translate: -.5vw -2.3vw;}
    50%{translate: .5vw 1vw;}
    /* 100%{translate: -1vw -2.4vw;} */
    100%{translate: -.5vw -2.0vw;}
}
/* kittyCat, kittyGif, */
#testKitty{
    /* overflow:hidden; */
    /* z-index: 2000!important; */
    position:fixed;
    bottom:0px;left:45px;
    animation-duration: 16s;
    animation-name: peek_out;
    animation-direction:alternate;
    animation-timing-function:ease-in-out;
    animation-iteration-count: infinite;
     /* trigger with js on catnip pickup */
    animation-play-state: paused;
}
/* @keyframes peek_out{
    0%  {translate: -1vw 6vw;}
    10% {translate: -.7vw 2vw;}
    15% {translate: -.4vw 4vw;}
    20% {translate: -2vw 1vw;}
    25% {translate: 0vw -.5vw;}
    55% {translate: 2vw -1vw;}
    80% {translate: -1vw -2.5vw;}
    85% {translate: -1.5vw -.5vw;}
    90% {translate: 1vw 2.5vw;}
    100%{translate: -1vw 4.5vw;}
} */
/* not really satisfied with the blink, maybe just go for eyes following cursor or so
the 0.5 on the last % made it work a lot better*/
/* still am thinkin that another approach would be maybe better, like visible/invisible elments that get triggered on
certain times via js
(for more elaborate climbing out animation, or to have the paws better interact with the footer border....
BUT I spend way to mutch time on this for now ...so make it work with the catnip as is, make layout responsive for
mobile/smaller screens and come back here later, after cs50 is done  */
@keyframes blink{
     0%  {height:0.5px;}
    5%{height:6.5px;}
    10% {/* height:6.5px; */
         height:13px;}
    15% {height:0.5px;}
    35%{height:0.5px;}
    75%{height:0.5px;}
    100% {height:0.5px;}
}
#kittyEyeLeft, #kittyEyeRight {
    animation-duration: 2s;
    /* animation-direction: alternate; */
    animation-direction: alternate, alternate-reverse, normal;
    animation-timing-function:ease;
    /* animation-timing-function:linear; */
    /* animation-timing-function:steps(5, jump-start); */
    animation-name: blink;
    animation-iteration-count: infinite;
}
/* https://stackoverflow.com/questions/42109985/css-animation-starts-after-certain-amount-of-time */
@keyframes flying_hearts1{
    0%  {translate: -1vw 15vw;}
    10% {translate: -.3vw 10vw;}
    20% {translate: 1.5vw 3vw;}
    30% {translate: 2vw 1.5vw;}
    55% {translate: 2.7vw -5vw;}
    70% {translate: 3.5vw -18vw;}
    85% {translate: 1.0vw -23.5vw;}
    /* translate: .1vw -120.5vw; */
    90% {translate: -.2vw -29.5vw;}
    100%{translate: -1vw -35vw;}
}
@keyframes flying_hearts2{
    0%  {translate: -1vw 15vw;}
    5% {translate: -.3vw 10vw;}
    15% {translate: 1vw 3vw;}
    35% {translate: 1.2vw 1.5vw;}
    65% {translate: 2.7vw -5vw;}
    75% {translate: 3vw -18vw;}
    85% {translate: 1.5vw -23.5vw;}
    95% {translate: .5vw -29.5vw;}
    100%{translate: -1vw -35vw;}
}
@keyframes flying_hearts3{
    0%  {translate: 2vw 15vw;}
    5% {translate: 1.3vw 10vw;}
    15% {translate: 2vw 6vw;}
    35% {translate: 3.2vw 4.5vw;}
    65% {translate: 2.7vw -11.5vw;}
    75% {translate: 1vw -19vw;}
    85% {translate: -1vw -23.5vw;}
    95% {translate: -.5vw -25.5vw;}
    100%{translate: 1vw -35vw;}
}
@keyframes flying_hearts4{
    0%  {translate: 2vw 15vw;}
    10% {translate: 1.3vw 10vw;}
    20% {translate: 2vw 6vw;}
    30% {translate: 3.2vw 4.5vw;}
    55% {translate: 2.7vw -11.5vw;}
    70% {translate: 1vw -19vw;}
    85% {translate: -1vw -23.5vw;}
    90% {translate: -.5vw -25.5vw;}
    100%{translate: 1vw -35vw;}
}
/* for variety, it's a bit to uniform atm
but first paws */
@keyframes flying_hearts5{
    0%  {translate: 3.5vw 15vw;}
    10% {translate: 1.3vw 5vw;}
    20% {translate: 0.5vw 2.5vw;}
    30% {translate: -0.5vw 1.5vw;}
    55% {translate: -0.8vw -5vw;}
    70% {translate: .8vw -18vw;}
    85% {translate: 1.7vw -23.5vw;}
    90% {translate: 2.4vw -29.5vw;}
    100%{translate: 3.5vw -35vw;}
}
@keyframes flying_hearts6{
    0%  {translate: 3.5vw 15vw;}
    15% {translate: 1.3vw 5vw;}
    35% {translate: 0.5vw 2.5vw;}
    48% {translate: -0.5vw 1.5vw;}
    55% {translate: -0.8vw -5vw;}
    80% {translate: .8vw -18vw;}
    90% {translate: 1.7vw -23.5vw;}
    95% {translate: 2.4vw -29.5vw;}
    100%{translate: 3.5vw -35vw;}
}
@keyframes flying_hearts7{
    0%  {translate: 1.25vw 15vw;}
    10% {translate: 2.4vw 7vw;}
    20% {translate: 3.5vw 6vw;}
    30% {translate: 2.8vw 3.5vw;}
    55% {translate: 1.4vw -12vw;}
    70% {translate: 0.2vw -20vw;}
    85% {translate: -1vw -25.5vw;}
    90% {translate: -.5vw -29.5vw;}
    100%{translate: 2.2vw -35vw;}
}
@keyframes flying_hearts8{
    0%  {translate: 1.25vw 15vw;}
    5% {translate: 2.4vw 7vw;}
    25% {translate: 3.5vw 6vw;}
    45% {translate: 2.8vw 3.5vw;}
    55% {translate: 1.4vw -12vw;}
    65% {translate: 0.2vw -20vw;}
    70% {translate: -1vw -25.5vw;}
    85% {translate: -.5vw -29.5vw;}
    100%{translate: 2.2vw -35vw;}
}
@keyframes fade_out{
    /* 0%, 100%{opacity:0;}
    50%{opacity:1;} */
    0% {opacity:1;}
    100%{opacity:0;}
}
#heartBox{
    position:fixed;
    bottom:0px;left:75px;
    width:130px;height:auto;
    /* background-color: #d536ffb0; */
    visibility: hidden;
}
/* #kittyHeart0, #kittyHeart1, #kittyHeart2,  */
.kittyHearts{
    /* position:fixed; */
    animation-duration: 2s;
    /* animation-direction: normal;*/
    /* animation-timing-function:ease; */
    animation-timing-function:linear;
    /* animation-timing-function:steps(5, jump-start); */
    animation-name: flying_hearts1;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
/* cleanUp when time, needs to get deleted in index.html as well as here, make_hearts() does a better job XD */
#kittyHeart1{
    animation-delay:600ms;
}
#kittyHeart2{
    animation-name: flying_hearts2;
    animation-delay:900ms;
}
#noNipAnymore{
    display:none;
}
#noNipAnymore:hover{
    cursor: not-allowed;
}
/*
for pasuing animation....
https://stackoverflow.com/questions/28903825/make-a-pause-during-infinite-css3-animation */
/* #testKitty{ */
   /* test for multiple anims+how svg elements behave */
    /* overflow:hidden; */
    /* position:absolute;
    bottom:32rem;left:15rem; */
    /* animation-duration: 120s;
    animation-name: peek_out;
    animation-iteration-count: infinite; */
/* } */


/* #labyrinth #content{
     display:flex;
} */
@keyframes pulse{
    0%{
        opacity: 0%;
    }
    50%{
        opacity: 100%
    }
    100%{
        opacity: 0%;
    }
}

#labyrinth #content p > .hint{
    display:inline-block;
    line-height:.9;
}
#labyrinth #content > div > div {
    width: 40%;
    /* min-width:340px; */
    float: left;
    text-align:justify;
    /* min-width: 33%; */
}
/* etymologie->img in p */
#labyrinth #content > div > div > p img{
    width: 85%;
    min-width:340px;
    height:auto;
    /* text-align: center; */
    /* margin corresponds to the parent-elements width... now what you gonna do with that?
    nuthin, just eyeballing it*/
    margin-left:5%;
    /* min-width: 33%; */
}


/* -> 'real' animations
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations */
/* @keyframes pulse{ from{opacity: 0%;    }   to{  opacity: 100%  }} */


#labyrinth #content > div > div+div {
    /* min-width: 340px; */
    width:auto;
    height: 30rem;
    float: right;
    margin-right:8rem;
    background:no-repeat center/contain url('media/lab_small_aligned.png');
}
#labyrinth #content > div > div+div > img, #labyrinth_hack img{
    /* width: 40%; -> doesn't work in this case couse it scales the svg and 'pulls' off canvas elements(inkscape created) in 'view' maybe funny for some effects, but not right right now */
/* min-width: 33%; */
    /* width:auto; */
    height: 30rem;
    /* margin-bottom:5%; */
    opacity: 0%;
    /* transition-property: opacity;
    transition-duration: 3s;*/
    animation-duration: 8s;
    animation-name: pulse;
    animation-iteration-count: infinite;
    /* animation-play-state: running; */
    /* float: right; */
    /* margin-right:15%; */
}
#labyrinth_hack{
    display:none;
    margin-bottom:1.5rem;
    /* its not showing the goddamn background ... double hacking it -.- ... do you have both set to pulse?.. you have ... seat -> problem -> screen ..... */
    background:no-repeat center/contain url('media/lab_small_aligned.png');
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
for further/better animating... later -> usefull for catnip though, maybe

*/
#labyrinth #content > div > div > img:hover{
    /* doesnt work this way, try later if at all ... */
    animation-play-state: paused;
    opacity: 100%;
}
#idkokdw #content{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#idkokdw #content div{
    margin-bottom:1rem;
    margin-top:1rem;
}
#idkokdw img{
    height:27rem;
    /* width:30%; */
    vertical-align: baseline;
    cursor: pointer;
}
/* and everythings yellow */
#idkokdw #content button{
    background-color: #fbeaa0;
    color: #F23545;
    border-color:#F23545;
}
#idkokdw #content button:hover{
    background-color: #F23545;
    color: #fbeaa0;
    border-color:#fbeaa0;
}
/* background-color:#F23545;
    border-color:#F23545;
    font-variant: small-caps;
    margin-top:-.15rem;
    font-size: .85rem; */

#projectLab > article{
    width: 80%;
}
#projectLab p {
    /* margin: 0px auto; */

    /* padding: 1rem 1rem 1rem; */
    text-align: justify;
    /* margin: 2em 10em 5em 2em; */
}
#projectLab div > img{
    margin-left:6rem;
    height:305px;
    cursor: pointer;
    vertical-align: top;
    /* clear:both; */
}
#projectLab img.spread{
    width: 33% !important;
    cursor: pointer;
    /* clear:both; */
}
#projectLab #bigPicturesModal .modal-dialog{
    /* margin: auto 0; */
    max-width:100%;

}
#projectLab #bigPicturesModal img{
    margin:0px auto;
    /* margin-left:0; */
    height:100%;
    cursor: pointer;
     align-items: center;
}
#projectLab div > .hint{
   margin: 1rem auto auto 6rem;
    /* clear:both; */
}

/*changing title tooltip not working just yet ...for later, maybe.

source/found on: https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute
also interesting: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role
a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}
a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
  background-color: #fff;
} */
.hint {
   /* font-style: italic; */
   font-size: .85rem;
   /* padding-top:-1rem; */
}
.hint button{
    background-color:#F23545;
    border-color:#F23545;
    font-variant: small-caps;
    margin-top:-.15rem;
    font-size: .85rem;
    padding: 0;
    /* border:0; */
}
h1, h4{
    margin-bottom:-.25rem;
}

#photo_galerie{
    justify-content: space-between;
    display:flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
#photo_galerie > img {
    /* cursor: zoom-in; */
    /*i think i like this one more,
    but maybe would be better to change it to zoom anyway ... to be more clear about the interaction!
    also replace it with zoom out in zoomed in state*/
    cursor: pointer;
    margin-top: .75rem;
    height:200px;
    vertical-align: baseline;
    /* background: linear-gradient(#e66465, #9198e5); */
   /* background-color: #F23545; */
}
/* #photo_galerie #blend-test{
     background-color: #F23545;
} */
/* Idea from
https://medium.com/@douglasmasho/changing-image-colors-in-css-24d9f31491cb for later */
/* #photo #photo_galerie img:hover{
    filter: hue-rotate(90deg); lustig aber to mutch für jetzt
} */
    /* height:220px; */
    /* zoom:1500%; -> not what i was looking for
    ->https://berlinischegalerie.de/en/collection/specialised-fields/photography thumbs further down, maybe complicated*/
    /* probably realy the transform in combination with a fixed outer div wich holds the picture content steady or smth.
    would need a rewrite of the whole html structure if i#d want it in my gallery as well, will try when i'm done with cs50
    and have a bit more time */
    /* transform: translateY(0); */
    /* mix-blend-mode: normal; */
    /* background-blend-mode: darken; */
/* } */

/* #gridWrapp > a > img{
    to be rplaced with on screensize dependend calc || not-> display flex works really well, didn't know about it XD
    height:200px;
} */
#conway_wrap{
    margin-bottom: 2.5rem;
}
#conway{
    width: 80%;
    /* margin: 0 auto; */
    margin-top:1rem;

    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* justify-content: flex-start; */
    align-items: baseline;
}
#conway > button, #fsdr button, #idkokdw > div > button{
    margin-bottom: 0.2rem;
    background-color:#F23545;
    border-color:#F23545;
    font-variant: small-caps;
}
/* urghs ... a bit of organizing might go along way ^^  */
#conway > button:hover, #fsdr button:hover, #idkokdw > div > button:hover, button.btn.btn-primary:hover{
    border-color:#F23545;
    /* font-variant: small-caps; */
    background-color: #fbeaa0;
    color: #F23545;
}
#conway p{
    width: 90%;
    text-align: justify;
    /* line-height: 95%; */
}
/* #conway_game{ */
    /* overflow-x:scroll; */
    /* width: xxxx; depends on fieldSize and cellSize, calc with js and append style */
    /* position: absolute;
    right: 20%; */
/* } */
#steppingValue{
    width: 5rem;
}
/* Unity*/
#unityContainer{
    display:flex;
    justify-content: space-evenly;
}
#unityContainer button{
    /* justify-self:center; */
    margin-bottom:.5rem;
    height:3rem;
    width:15rem;

}
.unityWeb{
	width: 962px;
	height: 642px;
	border: none;
}
/* #fsdr div.cad-body{
    display:block!important;
    background-color: black;
} */
#fsdr .card p{
    width:35%;
}
#fsdr .card p + p{
    width:55%;
}
/* footer{
    position: absolute;
    bottom:0px;
} */
/* |||||||||||||||||||||||||||||||||||bootstrap overrides||||||||||||||||||||||||||||||||||||| */

.img-thumbnail{
    height: 200px;
}
/* .navbar{
    display: flex;
    justify-content: right;
} */
.navbar.fixed-top{
    /* margin-left:9%; */
    padding-left:2rem;
    /* justify-content: center; -> using the class justify-content-center instead ... not a big fan ... */
}
.nav-link:hover {
    color: #F23545;
}
.navbar-brand > img{
    height: 50px;
    /* position:relative;
    left:15px; */
}
.navbar-brand > img:hover{
    background-color: #F23545;
}
.active{
    color: #F23545 !important;
            /* font:  caps; */
    font-style: italic;
        }

/* RTFM
Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes.
Instead of adding .carousel-dark, set data-bs-theme="dark" on the root element,
a parent wrapper, or the component itself. */

/* .carousel-control-prev-icon{
    filter: invert(100%); */
 /* background-image:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")!important; */
/*
.carousel-control-next-icon {
  background-image:  url("../media/next.svg")!important;
} */

@media (max-width: 1250px) {
  #labyrinth #content > div > div+div,#labyrinth #content > div > div+div > img{
    width: auto;
    margin-right:0;
    height: 20rem;
    /* min-width: 33%; */
  }
}
@media (max-width: 1200px) {
  #labyrinth #content > div > div p img{margin-left:0;}
}
@media (max-width: 1024px) {
    #content, #photo_galerie{display:block!important;}
    #projectLab article, #fsdr article{width:90%;}
    video{width:100%}
    /*-> gets set in the js which checks for mobile, need to change it there
    #fsdr > article #unityContainer{display:block!important;}
    could need some layout work anyway. prob. best to redo everything at this point */
    #content img, #photo_galerie > img {width:100%;height:auto;cursor: default;}
    #idkokdw .hint, #photo .hint{display:none;}
    #idkokdw #info{left:-5rem!important;}
}
@media (max-width: 825px) {

    #labyrinth #content > div > div+div,#labyrinth #content > div > div+div > img{
    /*
    foolin around this is clearly not the way, goal was to kinda reorder the lab before the text block.
    Guess woudl need to redesign the html layout for this to work, flex layout instead of floats or something.
    Need to do that at some point for all pages .... could hack it with an additonal element that has initial
    display:none and gets visible at a certain width, but feels very hacky so yeah nay for now
    display:block;
    position: relative;
    left:2rem;
    top:.5rem; */
    /* margin-right:0; */
    height: 15rem;
    /* min-width: 33%; */
  }
}
@media (max-width: 730px) {
    main {width:90%;}
    /* #labyrinth #content{display:flex;} */
    /*p container*/
    #labyrinth #content > div > div {width:100%;float:none;}
    #labyrinth #content > div > div > p img{width:100%;}
    /* hide the fullview labyrinth */
    #labyrinth #content > div > div + div{display:none;float:none;}
    /* and show the hacky one */
    #labyrinth_hack {display:block;height:15rem;text-align:center;}
    #labyrinth_hack img {height:15rem;}
    /* #labyrinth #content > div > div > img{} */
}
/*
flex-basis:100%; -> never heard of it ... the solution to all our problems
https://stackoverflow.com/questions/50237812/display-flex-not-working-in-css*/