/*FONTS*/ /*font-family: 'Comfortaa', cursive; font-family: 'Gotu', sans-serif; font-family: 'Montserrat', sans-serif; font-family: 'Raleway', sans-serif; font-family: 'Rancho', cursive; font-family: 'Rock Salt', cursive;*/ /*ROOT-VARIABLEN*/ :root { --greenColor:rgba(47,79,79,1.0); --linkColorALT:rgba(178,34,34,1.0); --linkColor:rgba(240, 120, 4,1.0); --linkLightColor:rgba(178,34,34,0.6); --link2Color:rgba(138,79,0,1.0); --orangeLightColor:rgba(240, 120, 4, 0.22); --greenLightColor:rgba(47,79,79,0.6); --greenLight2Color:rgba(47,79,79,0.3); --textColor:rgba(0,0,0,0.8); --textLightColor:rgba(150,150,150,1); --dropSh:drop-shadow(3px 3px 5px rgba(0,0,0,0.6)); --subTitleFF: 'Comfortaa', cursive; } html {height:100%; width:100%; font-size:100%; font-size:16px; background:white; /*scroll-behavior: smooth;*/} body {min-height:100vh; scroll-behavior: smooth; width:100vw; font-family: 'Open Sans', sans-serif; line-height:1.5; margin:0; padding:0; overflow-x:hidden; color:rgba(0,0,0,0.8); font-size:1rem; background: transparent; transition:all 0.8s ease-in-out; display:grid; gap:2rem; grid-template-columns: 1fr 64rem 1fr; grid-template-areas: "header header header" ". main ." "footer footer footer"; grid-template-rows: auto 1fr auto; animation:show 3s ease-in forwards;} @keyframes show{ from { opacity:0.1;} to { opacity:1;} } *, *:before, *:after {box-sizing:border-box; margin:0; padding:0; quotes: "»" "«";} img {max-width:100%; display:block; height:auto; border:0.5px solid var(--greenColor); user-select:none;} div.anzeige {position:fixed; top:1rem; left:1rem; height:2rem; width:auto; color:black; z-index:200; background:pink;} /*::-webkit-scrollbar {width:1rem;} ::-webkit-scrollbar-track {background:var(--greenLight2Color); border-radius:100vw; margin-block:0.5rem;} ::-webkit-scrollbar-thumb {background:var(--greenLightColor); height:10rem; height:10vw; border-radius:100vw; margin-block:0.5rem; transition:all 0.8s ease-in-out; border:0.1rem solid var(--greenColor);} ::-webkit-scrollbar-thumb:hover {background:var(--linkLightColor);} @supports (scrollbar-color:red blue){ * {scrollbar-color: var(--greenColor) var(--greenLight2Color); scrollbar-width:auto;} } ::-webkit-resizer {color:var(--linkColor);}*/ /*ZEN - HAMBURGER*/ div#zen {display:none; width:2.7rem; height:1.6rem; border:1px solid rgba(0,0,0,0.0); position:relative; /*top:1.5rem; right:2rem;*/ overflow:visible; cursor:pointer; z-index:2000; background:rgba(255,255,255,0);} span.zen {display:block; height:0.2rem; background:var(--textColor); border-radius:0.1rem; position:absolute; left:0; right:0; box-shadow:0px 0.5px 0px white;} span.zen:first-child { top:0; left:0; right:0;} span.zen:nth-child(2) { top:50%; margin-top:-2px; left:0; right:0;} span.zen:nth-child(3) { top:50%; margin-top:-2px;} span.zen:nth-child(4) { top:50%; margin-top:-2px;} span.zen:last-child { top:100%; margin-top:-4px; left:0; right:0;} div#zen:hover {cursor:pointer;} div#zen.open span.zen:first-child {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out;} div#zen.close span.zen:first-child { opacity:1; transition:all 300ms ease-in-out;} div#zen.open span.zen:nth-child(2) {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out 150ms;} div#zen.close span.zen:nth-child(2) { opacity:1; transition:all 300ms ease-in-out 150ms;} div#zen.open span.zen:last-child {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out 300ms;} div#zen.close span.zen:last-child { opacity:1; transition:all 300ms ease-in-out 300ms;} div#zen.open span.zen:nth-child(3) { opacity:1; transform:rotate(45deg) translate(-4px, 3px); transition:all 300ms ease-in-out; width:calc(141.421% - 6px); } div#zen.close span.zen:nth-child(3) { opacity:0; transform: rotate(0deg) ; transition:all 300ms ease-in-out; } div#zen.open span.zen:nth-child(4) { opacity:1; transform:rotate(-45deg) translate(-3px, -4px); transition:all 300ms ease-in-out; width:calc(141.421% - 6px); } div#zen.close span.zen:nth-child(4) { opacity:0; transform: rotate(0deg) ; transition:all 300ms ease-in-out; } div#zen:hover span.zen:first-child {animation:first 1s linear forwards;} div#zen:hover span.zen:nth-child(2) {animation:first 1s 0.2s linear forwards;} div#zen:hover span.zen:last-child {animation:first 1s 0.4s linear forwards;} @keyframes first { 0% {transform:translateX(0);} 25% {transform:translateX(-1rem);} 50% {transform:translateX(0);} 75% {transform:translateX(1rem);} 100% {transform:translateX(0);} } h1, h2, h3, h4 {display:inline-block; text-wrap:balance;} h1, h4.artUeber {font-family: 'Rock Salt', cursive;} h1 {text-shadow:1px 1px 1px white, 10px 10px 10px rgba(0,0,0,0.5); color:var(--greenColor); position:relative; overflow:hidden; position:relative; backface-visibility:visible; transform:rotateX(0deg); transition:all 0.8s ease-in-out; display:grid; place-items:center; animation:roTATE 10s 0s infinite ease-in-out forwards;} /*h1:hover {transform:rotateY(360deg); animation:roTATE 0.8s ease-in-out forwards;}*/ @keyframes roTATEX { 0% {transform:rotateX(0deg);} 100% {transform:rotateX(360deg);} } /*h1::before {content:attr(title); position:absolute; inset:0; backface-visibility:visible; transform:rotateY(180deg); transition:all 0.8s ease-in-out;}*/ /*h1:hover h1::before {transform:rotateY(0deg);}*/ h2 {font-family: 'Gotu', sans-serif; font-variant:small-caps; background:rgba(200,200,200,0.5); } h2.hidden {display:none;} h2.home, h3.home {font-family: 'Gotu', sans-serif;} h3 {font-variant: small-caps;} h3, h4, h5 {font-family: 'Comfortaa', cursive;} p, li, details, figcaption {font-family: 'Open Sans', sans-serif; font-size:1.2rem; hyphens:auto;} article.artEINZel p::first-letter, article.about p::first-letter, div.abschnitt.nachtrag p::first-letter {font-size:140%;} span.italic {font-style:italic;} .underlineRed {text-decoration:underline; text-decoration-color:var(--linkColor);} h1 {/*font-size:3.2rem;*/ font-size:clamp(2rem, 4.7vw, 3.2rem);} h2.artEINZ {font-size: clamp(2.2rem, 8vw, 5rem); line-height: 1; background-image: linear-gradient(90deg, var(--greenColor), var(--linkColor)); background-clip: text; -webkit-background-clip: text; color: transparent; animation:stretch 1s ease-in-out forwards;} h2.marginNone {margin:0; line-height:1;} h2.unterTitel {font-family: 'Comfortaa', cursive; font-variant:normal; font-size:1.8rem; margin:0; line-height:1.9rem; background:none; color:normal; color:var(--textLightColor); } @keyframes stretchX { 0% {letter-spacing:-1em;} 100%{letter-spacing:0;} } h3 {font-size:1.8rem; margin:0.5rem 0;} h4 {font-size:1.3rem; margin:0.5rem 0;} h4.artUeber {font-size:1.2rem;} h5 {font-size:1.1rem ;} ul {list-style:none;} li {margin:0.25rem 0 0.5rem 0;} ul.unterUL {list-style:circle; margin-left:1rem; padding-left:1rem; font-size:1.2rem; font-weight:normal} article.artEINZel p, article.about p {font-size:1.2rem; margin-bottom:0.3rem;} aside.moreInfos li, div.abschnitt li {font-size:1.08rem;} aside.moreInfos p, div.abschnitt p, details.moreInfos {font-size:1.08rem; margin:0.25rem 0 0.5rem 0; } a {color:var(--linkColor); position:relative; transition:all 0.4s ease-in-out;} a:hover {color:var(--greenColor); transition:all 0.4s ease-in-out;} a.small {font-size:1rem;} mark {background-image:linear-gradient(90deg, var(--orangeLightColor), var(--linkColor));} ::selection {background:var(--orangeLightColor);} main {grid-area:main; min-height:100vh; display:grid; grid-template-columns:1fr; gap:3rem; } footer {grid-area:footer; width:100vw;} /*HEADER*/ header.top {grid-area:header; width:100vw; position:sticky; top:0; display:grid; grid-template-columns:1fr 64rem 1fr; grid-template-areas: ". content ."; background:white; z-index:10; box-shadow:1px 0 2px rgba(0,0,0,0.6);} div.headerContainer {grid-area:content; width:64rem; display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:baseline;} nav {justify-self:end;} ul.nav {list-style-type:none; display:grid; grid-template-columns:repeat(5, auto); gap:1.2rem; } ul.nav li {position:relative; overflow:hidden; display:grid;} a.nav {font-family: 'Montserrat', sans-serif; font-size:1.3rem; text-decoration:none; color:transparent; position:relative; overflow:hidden;} a.nav::before {content:attr(title); position:absolute; top:0; bottom:0; left:0; right:0; z-index:20; background:transparent; transition:all 0.4s ease-in-out; display:grid; place-items:center; color:gray;} /*a.nav:hover {color:transparent;}*/ a.nav:hover::before {color:var(--greenColor); } /*a.nav::after {content: attr(title); display:grid; position:absolute; top:0; left:0; right:0; bottom:0; color:transparent; transition:all 0.4s ease-in-out; display:grid; justify-items:center; transform:translateY(100%);} a.nav:hover::after {-webkit-text-stroke: 1px var(--greenLightColor); transform: translateY(0%);}*/ span.border {position:absolute; top:calc(100% - 0.15rem); left:50%; right:50%; bottom:0; border-bottom:0.1rem solid silver; transition:all 0.4s ease-in-out; z-index:-10;} a.nav:hover ~ span.border {left:0; right:0;} /*SECTIONS*/ section.section {width:64rem;} /*article + * {background:red;}*/ /*HOME*/ section#home { width:100vw; margin-left:calc(-100vw / 2 + 100% /2); margin-right:calc(-100vw / 2 + 100% /2);opacity:1; scale:1;min-height:80vh; overflow:hidden; display:grid; grid-template-rows:auto 1fr; grid-column:1/-1;/*animation: imgAnimation linear forwards; animation-timeline:view(); animation-range:exit;*/} @keyframes imgAnimation { 25% {opacity:1;} 85%,100% {opacity:.1; scale:3;} } div.backgroundHome { grid-column:1/-1; grid-row:1/-1; background-size:cover; background-attachment:fixed; background-repeat:no-repeat; filter:grayscale(80%); display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; background-position:center center; /*background-color:blue; background-blend-mode:hard-light;*/ transition:all 0.8s ease-in-out;} /*div.backgroundHome.bg_0 {background-image: url('images/home/wegwarte.png'); } div.backgroundHome.bg_7 {background-image: url('images/home/efeu.JPG'); } div.backgroundHome.bg_1 {background-image: url('images/home/schoellkraut_blueten_gross.JPG'); } div.backgroundHome.bg_2 {background-image: url('images/home/rosengalle_gross.JPG'); } div.backgroundHome.bg_3 {background-image: url('images/home/maedesuess_gross.JPG'); background-position: top center; } div.backgroundHome.bg_4 {background-image: url('images/home/spindelstrauch_fruechte.JPG'); } div.backgroundHome.bg_5 {background-image: url('images/home/spindeslstrauch-blueten.png'); } div.backgroundHome.bg_6 {background-image: url('images/home/huflattich_laub.JPG'); }*/ section#home:hover div.backgroundHome {filter:grayscale(0%); /*background-blend-mode:normal;*/ transition:all 0.8s ease-in-out; } header.section.home { grid-column:1/-1; grid-row:1/2; z-index:2; margin-top:2rem; background:rgba(47,79,79,0.5); display:grid; align-items:center; grid-template-columns: 1fr 64rem 1fr; grid-template-areas: ". h2 ." ". h3 . ";} h2.home {grid-area:h2; font-size:3rem; color:white; grid-area:h2; text-shadow:1px 1px 1px rgba(0,0,0,0.8);} h3.home {grid-area:h3; color:white; font-style:italic;} .fadeOut {animation:fadeOut 1s forwards ease-in-out;} .fadeIn {animation:fadeIn 1s forwards ease-in-out;} @keyframes fadeOut { 0% {opacity:1; z-index:1;} 50% {opacity:0.3; z-index:1;} 100% {opacity:0.2; z-index:-1;} } @keyframes fadeIn { 0% {opacity:0.2; z-index:-1;} 100% {opacity:1; z-index:1;} } div.bgHome { grid-column:1/-1; grid-row:1/-1; background-size:cover; background-attachment:fixed; background-repeat:no-repeat; display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; background-position:center center; transition:all 0.8s ease-in-out; position:relative; z-index:-1; opacity:0; filter:grayscale(80%); } section#home:hover div.bgHome {filter:grayscale(0%); } div.bgHome.bg__0 {background-image: url('images/home/johanniskraut.jpg'); } div.bgHome.bg__1 {background-image: url('images/home/wegwarte.jpg'); } div.bgHome.bg__2 {background-image: url('images/home/schoellkraut_blueten_gross.JPG'); } div.bgHome.bg__3 {background-image: url('images/home/rosengalle_gross.JPG'); } div.bgHome.bg__4 {background-image: url('images/home/maedesuess_gross.JPG'); } div.bgHome.bg__5 {background-image: url('images/home/spindelstrauch_fruechte.JPG'); } div.bgHome.bg__6 {background-image: url('images/home/spindeslstrauch-blueten.png'); } div.bgHome.bg__7 {background-image: url('images/home/huflattich_laub.JPG'); } div.bgHome.bg__8 {background-image: url('images/home/kaisermantel_2.png'); } div.bgHome.bg__9 {background-image: url('images/home/efeu.JPG'); } div.bgHome.intro {opacity:1; z-index:1;} div.bgHome:target { opacity:1; z-index:1; transition:all 0.8s ease-in-out;} @keyframes slideIn { 0% {} 100% {} } @keyframes slide { 0% {opacity:0; z-index:-1;} 1% {opacity:0.2; } 5% {opacity:1; z-index:1;} 90%{opacity:1; z-index:1;} 99% {opacity:0.3;} 100% {opacity:0; z-index:-1;} } a.prev, a.next {position:absolute; z-index:2; bottom:1rem; color:white; font-size:2rem; background:var(--greenColor); } a.prev { left:0rem; padding:0 2rem 0 3rem; border-radius:0 1rem 1rem 0;} a.next { right:0rem; padding:0 3rem 0 2rem; border-radius:1rem 0 0 1rem;} a.prev:hover, a.next:hover {background:rgba(0,0,0,1);} div.tooltip {position:absolute; bottom:100%; left:0rem; right:0; margin: 0 auto; font-size:1rem; background: white; border: 5px solid silver; padding:0 1rem; font-family: 'Open Sans', sans-serif; font-variant:small-caps; max-width:10rem; height:auto; opacity:0; transition:all 0.4s ease-in-out; z-index:-10;} .tt {position:relative; cursor:pointer; display:inline-block; background:transparent;} .tt:hover div.tooltip {/*animation:tool forwards 0.8s ease-in-out;*/ opacity:1; transition:all 0.4s ease-in-out; z-index:2;} @keyframes tool { 0% {opacity:0.2;} 100% {opacity:1; } } /*ARTIKELÜBERSICHT*/ div.container.artUeber {display:grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap:2rem 1rem;} article.artUeber { filter:drop-shadow(0 0 0.3rem rgba(0,0,0,0.5)); background:white; display:grid; grid-template-columns:1fr; grid-template-rows: auto 10.25rem 1fr auto; gap:0.5rem; max-height:37rem; overflow:hidden; transition:transform 0.6s ease-in-out; transform:translateX(-2rem); opacity:0;} article.artUeber.leftNull {opacity:1; transform:translateX(0rem);} article.artUeber p {font-size:1.1rem; font-style:italic; hyphens:auto;} article.artUeber:hover {transform:translateY(-0.5rem);} aside.ueberblenden {padding:0 0.5rem; grid-template-columns:1fr; display:grid; place-items:center; align-content:start; overflow-Y:hidden; position:relative; } aside.ueberblenden::before {content:''; position:absolute; top:0; bottom:0; margin-bottom:-1rem; left:0; right:0; background:linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); z-index:20;} header.artUeber {height:4rem; display:grid; place-items:center;} figure.artUeber {width:100%; height:auto; position:relative; overflow:hidden; cursor:pointer; display:grid; align-content:center;} figcaption.artUeber {position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.5); display:grid; place-items:center; padding:0 0.2rem; transform:translateX(-100%); transition:all 0.8s ease-in-out; z-index:2;} img.artUeber {width:100%; height:auto; transition: all 0.8s ease-in-out;} img.artUeber:hover {transform:scale(1.2);} figure.artUeber:hover figcaption.artUeber {transform:translateX(0%);} button.weiterlesen { height:auto; grid-row: end; border:0.5px solid rgba(0,0,0,0.8); filter:drop-shadow(2px 3px 5px rgba(0,0,0,0.6)); background:rgba(47,79,79,0.7); align-self:end; font-size:1.5rem; cursor:pointer; color:white; text-shadow:1px 0 1px rgba(0,0,0,0.8); padding:1rem; transition:all 0.8s ease-in-out;} button.weiterlesen a {text-decoration:none; color:white;} button.weiterlesen:hover { background:var(--linkColor);} a.button { text-decoration:none; display:grid; place-items:center; width:100%; height:auto; grid-row:-1/-2; border:0.5px solid rgba(0,0,0,0.8); font-size:1.5rem; cursor:pointer; color:white; text-shadow:1px 0 1px rgba(0,0,0,0.8); transition:all 0.8s ease-in-out; padding:0.6rem; background-image: linear-gradient(45deg, var(--greenLightColor), var(--greenColor));} a.button:hover {background-image:linear-gradient(45deg, var(--greenLightColor), var(--link2Color)); color:white;} div#fulltext:not(:target) {display:none; height:0;} div#fulltext:target {display:block; height:auto; background:var(--greenColor); color:white;} /*EINZELARTIKEL*/ section.artEINZ {background:none; min-height:20vh; padding-block: clamp(1.5rem, 5vh, 2rem); display:grid; grid-template-columns:2fr 1fr; gap:1rem 2rem; grid-template-areas:" head head" "art INFO" "img INFO" ; grid-template-rows: auto auto 1fr; align-content:start; align-items:start;} header.section.artEINZ {grid-area:head; background:white;} article.artEINZ {grid-area:art; background:white; display:grid; gap:1rem; align-content:start; & .a, & .b, & .c, & .d, & .e, & .f, & .g, & .h, & .i, & .k,& .l, & .m, & .n, & .o {scale:.8; opacity:.8; animation:fade-in linear reverse; animation-timeline:view(); animation-range:entry;} } @keyframes fade-in{ to {scale:1; opacity:1;} } aside.moreInfos {grid-area:INFO; background:white; display:grid; gap:1rem; align-content:start;} span.subTitle {font-weight:bolder;; font-family:var(--subTitleFF);} /*aside.imagesArtEinz {grid-area:img; background:white; align-content:start; align-items:start;}*/ aside.imagesArtEinz { grid-area:img; display:grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-template-rows:auto; grid-template-rows:masonry; gap:1rem; align-items:center;} figure.artEINZ { position:relative; overflow:hidden; height:auto; width:auto; height:auto; transform:translateX(-2rem); opacity:0; } img.artEINZ {width:100%; height:auto; filter:drop-shadow(3px 3px 10px rgba(0,0,0,0.6)); z-index:100; transition:all 1s ease-in-out; display:block; } figcaption.artEINZ {position:absolute; top:0; height:100%; left:0; right:0; color:white; display:grid; place-items:center; text-align:center; align-content:center; background:var(--greenLightColor); transform:translateX(-100%); transition:all 0.8s ease-in-out; padding:0 0.5rem;} figcaption.artEINZ a {color:white; text-decoration:underline; } figure.artEINZ.isVisible {animation:VISIBLE 600ms 200ms ease-in forwards;} /*figure.artEINZ.isVisible img {display:block;}*/ @keyframes VISIBLE { 0% {opacity:0; transform:translateX(-2rem); } 100% {opacity:1; transform:translateX(0) ; } } figure.artEINZ:hover figcaption.artEINZ {transform:translateX(0); } figure.artEINZ:hover img.artEINZ{ transform:scale(1.5); } figure.artEINZ.span2 {grid-column:span 2 ;} figure.artEINZ.spanGanz {grid-column:1/-1;} div.abschnitt {background:rgba(0,0,0,0.04); padding:0.125rem 0; } div.abschnitt.zitat{border-image: linear-gradient(45deg,var(--greenLightColor),var(--linkColor))4%/9px/.5rem; padding: 5px; margin: 1rem 0; color: var(--greenColor);} details.moreInfos {} /*VIDEO*/ div.moreInfosVideo {position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;} iframe.moreInfos {cursor: pointer; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.6); position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /*AUDIO*/ audio.music {width:100%;} /*GOOGLE-BOOKS*/ iframe.iframeGoogleBooks {width:100%;height:auto; aspect-ratio:4/3;resize:both;} li.googleBooks {position:relative; width:100%; resize: both;} iframe.googleBooks {cursor:pointer; width:100%; height:100%; resize: both;} /*ABOUT AND BOOK*/ section.about {background:none; min-height:20vh; display:grid; grid-template-columns:1fr 33.3333%; gap:1rem 2rem; grid-template-areas:" head head" "art infos" ;} header.about {grid-area:head;} header.about h2 {margin:0; line-height:1;} article.about {grid-area:art;} aside.moreInfos.about {grid-area:infos;} figure.book {width:12rem; height:auto; float:left; margin:0 1rem 0.2rem 0; } figure.book img {filter:var(--dropSh);} figure.about { display:grid; place-items:center; width:70%; justify-self:start; transition:all 0.8s ease-in-out;} img.about {filter:grayscale(0.8) opacity(0.9) var(--dropSh); transition:all 0.8s ease-in-out; ;} img.about:hover {filter:grayscale(0.3); transform:translateY(-0.5rem);} /*FOOTER*/ footer#contact {display:grid; grid-template-columns: 1fr 42.6667rem 21.3333rem 1fr; grid-template-areas: " infos infos form form"; font-family: 'Montserrat', sans-serif; align-content:start; } aside.contact {grid-area:infos; background:var(--greenLightColor); color:white; display:grid; align-self:end;} div.wrapperCONTACT { padding:4rem 3rem; width:40rem; justify-self:end; width:42.6667rem; } details.contact {font-size:1.1rem; font-family: 'Open Sans', sans-serif; margin:1rem 0;} details.contact summary {font-size:1.2rem; font-family: 'Montserrat', sans-serif; } aside.form {grid-area:form; background:rgba(47,79,79,0.1); display:grid; box-shadow:0.125rem 0.125rem 0.625rem rgba(0,0,0,0.9);} div.wrapperFORM {display:grid; background:transparent; padding:2rem 3rem; align-self:end; width:21.3333rem;} form.contact {background:rgba(0,0,0,0.8); padding:1rem;} fieldset.contact {display:grid; grid-template-columns:1fr; gap:1rem; border:none;} div.form.test {display:grid; grid-template-columns:2fr 1fr; align-items:end; gap:0.5rem;} label.none {display:none;} input, textarea {width:100%; height:2rem; color:var(--greenColor); background:transparent; font-size:1.1rem; display:grid; align-items:center; border:none; border-bottom:2px solid var(--greenColor);} textarea {height:4rem;} input::placeholder, textarea::placeholder {font-size:1rem; font-family: 'Montserrat', sans-serif;} div.form.submitbox {display:grid; align-items:center; justify-items:start; } input.absenden {font-size:2.5rem; display:grid; align-items:center; justify-items:start; height:4rem; cursor:pointer; text-align:right;} div#output {display:none; margin-top:1rem; background:rgba(255,255,255,0.4); border:2px dotted var(--linkColor); padding:1rem;} div#output p {font-size:1rem; margin:0.4rem 0;} div#output p::first-letter {font-size:1rem;} /*BREAKPOINTS*/ @media screen and (max-width:1024px){ body {grid-template-columns:1fr; grid-template-areas: "header" "main" "footer"; } header.top {padding:0 2rem 1rem 1.5rem; grid-template-columns:1fr; grid-template-areas:"content";} div.headerContainer {width:auto; margin-left:0; margin-right:0; } /*h1 {font-size:4.7vw;} */ section#home {width:100vw; padding:0; grid-template-columns:1fr;} header.section.home {width:100vw; align-items:center; grid-template-columns: 1fr; grid-template-areas: " h2 " " h3";} h2.home, h3.home {padding:0 3rem 0 1.5rem;} section.section {width:100vw; padding:0 3rem 0 1.5rem;} footer#contact {grid-template-columns: 1fr 1fr; grid-template-areas:"infos form";} div.wrapperFORM, div.wrapperCONTACT {width:auto;} div.wrapperCONTACT {justify-self:start;} } @media screen and (max-width:900px){ div.headerContainer {gap:1rem;} section.artEINZ { grid-template-columns:1fr 1fr; gap:1rem; padding:0 2rem 0 1.5rem; } figure.artEINZ.span2 {grid-column:1/-1 ;} } @media screen and (max-width:800px){ ul.nav {gap:1rem;} section.artEINZ { grid-template-columns:1fr; grid-template-rows: auto auto auto auto; grid-template-areas:"head" "art" "INFO" "img";} section.about { grid-template-columns:1fr; grid-template-areas:" head" "art" "info" ;} footer#contact {grid-template-columns: 1fr; grid-template-areas: "infos" "form" ;} } @media screen and (max-width:705px){ div.headerContainer {grid-template-columns:1fr auto; align-items:center;} div#zen {display:inline-block;} nav {display:grid; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.99); grid-template-columns:1fr; grid-template-rows:1fr auto 3fr; grid-template-areas: "." "navi" "."; transform:translateX(-100%); opacity:0; transition:all 0.8s ease-in-out;} nav.open {transform:translateX(0); opacity:1;} ul.nav {grid-template-columns:1fr; grid-template-rows:repeat(9, auto); gap:1rem; justify-items:center; padding:1rem 2rem; grid-row:2 /span 1; background:transparent; } a.nav {font-size:clamp(5rem, 10vw, 10rem);} a.nav:hover {color:transparent;} a.nav::before, a.nav::after {content: attr(title); position:absolute; top:0; left:0; right:0; bottom:0; color:transparent; transition:transform 0.4s ease-in-out; display:grid;} a.nav::before { color:var(--greenColor); transform: translateY(0%); } a.nav:hover::before {color:transparent; transform:translateY(-100%);} a.nav::after { -webkit-text-stroke: 1px var(--greenLightColor); transform:translateY(100%);} a.nav:hover::after {-webkit-text-stroke: 1px var(--greenLightColor); transform: translateY(0%);} }