@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap'); /*** The new CSS reset - version 1.8.5 ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* STYLES FOR THE WHOLE WEBSITE */ @font-face { font-family: 'Manbow'; font-style: normal; font-weight: 100 800; src: url('/fonts/manbowLines.otf') format('opentype'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 800; src: url('/fonts/Raleway-VariableFont_wght.ttf') format('truetype'); } :root { --primary-color: #14FF00; --secondary-color: #dd00ff; --tertiary-color: #00F9FF; --text-color-black: #000000; --text-color-white: #f3eded; --background-color: #0d0e0eab; /* --background-color: #0d0e0e; */ --font-family-body: 'Raleway', sans-serif; --font-family-display: 'Manbow', sans-serif; } body { width: 100vw; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; font-family: var(--font-family-body); /* background-color: var(--background-color); */ background-image: url('/media/bg2.jpg'); backdrop-filter: blur(20px); background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; color: var(--text-color-black); margin: auto; } main { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; margin: auto; } header { background-color: var(--text-color-black); width: 100vw; position: sticky; top: 0; display: flex; z-index: 10; justify-content:space-between; padding: 0.5rem 0.5rem; } nav { justify-content: center; align-items: center; display: none; } nav ul { list-style: none; display: flex; justify-content: center; align-items: center; } section { display: flex; justify-content: center; flex-wrap: wrap; width: 100vw; background-color: var(--background-color); padding: 0rem 1rem; } .sectionTitle { text-align: center; font-size: 1.5rem; font-weight: 500; color: var(--text-color-white); background-color: var(--background-color); padding: 1rem; width: 100vw; } h1 { font-family: var(--font-family-display); } h2, h3, h4, h5, h6, p { color: var(--text-color-white); font-family: var(--font-family-body); } a { text-decoration: none; } .langSelector { display: flex; justify-content: center ; align-items: center; } button { background-color: var(--text-color-black); color: var(--text-color-white); padding: 1rem 0.5rem; font-size: 1rem; font-weight: 400; cursor: pointer; border-radius: 5%; transition : 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); } button:hover{ font-weight: 600; transform: scale(1.1); } span.secondary { color: var(--secondary-color); } span.primary { color: var(--primary-color); } span.tertiary { color: var(--tertiary-color); } span.white { background-color: var(--text-color-white); } span.black { background-color: var(--text-color-black); } .container { scroll-behavior: smooth; } /* Styles for Landing Page Hero Section */ .hero { min-height: 100vh; align-items: center; } .hero .container { display: flex; flex-direction: column; align-items: center; } .vinyl { /* order: -1; */ display: flex; width: 70%; justify-self: center; } .displayText { font-size: 3.5rem; font-weight: 900; color: var(--text-color-white); justify-self: start; /* margin: 2rem 0rem; */ text-align: center; } .subText { text-align: center; letter-spacing: 0.1rem; } .cta { padding-top: 3vh; } #ctaButton { background-color: var(--secondary-color); color: var(--text-color-white); padding: 1rem; font-size: 1rem; font-weight: 700; cursor: pointer; border-radius: 5%; box-shadow: 3px 3px 1px var(--primary-color); transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } #ctaButton:hover { background-color: var(--tertiary-color); color: var(--text-color-black); box-shadow: 5px 5px 1px var(--secondary-color); transform: scale(1.1); } /* Styles for Choice Section */ section.choice{ min-height: 100vh; max-width: 100vw; } .choice .container{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .choice .sectionTitle { padding: 2rem 0rem; } .choiceWrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; flex-shrink: 1; } .card { border-radius: 5%; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; padding: 1rem 1rem; } .cardImg { display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap; border-radius: 5%; } .card img { padding: 2px; background-size: cover; backdrop-filter: blur(20px); border-radius: 5%; background: linear-gradient(rgba(211, 14, 194, 0.6), rgba(16, 248, 248, 0.6)); } .cardTitle h3{ text-align: center; padding: 1rem 1rem; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.1rem; } .use .cardTitle h3 { color: var(--secondary-color); } .make .cardTitle h3 { color: var(--tertiary-color); } .cardText { color: var(--text-color-white); position: absolute; width: 100%; height: 0; overflow: hidden; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: start; background-color: rgba(0, 0, 0, 0.7); border-radius: 5%; transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .cardText h3 { text-align: center; font-size: 1.5rem; font-weight: 400; line-height: 1.5; padding: 2%; cursor: pointer; } .use .cardText h3 { color: var(--secondary-color); } .make .cardText h3 { color: var(--tertiary-color); } .cardText p { font-size: 1rem; font-weight: 200; line-height: 1.5; padding: 2%; } .card:hover { border: 2px solid var(--text-color-white); transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .card:hover .cardText { height: 100%; padding: 2%; } .card:hover .cardTitle { opacity: 0; transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .card:hover img { filter: blur(20px); transform: scale(1.1); transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } /* Style for Features Section */ .features .sectionSubTitle { font-size: 1rem; font-weight: 500; color: var(--text-color-white); padding: 1rem 1rem; letter-spacing: 0.1rem; } .features .container{ display: flex; flex-direction: column; justify-items: center; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; } .features p { font-size: 1rem; } .features .cta { align-self: center; } /* Styles for About Section */ section.about { min-height: 100vh; max-width: 100vw; } .about .container { display: flex; flex-direction: column; justify-content: start; align-items: center; } .aboutWrapper { padding: 2rem 1rem; font-size: 1.5rem; line-height: 1.5; } h3 span.secondary { padding: 1%; } .about .contentText p{ font-size: 1.2rem; line-height: 1.6; padding: 3rem 0rem; } /* Styles for the Team Section */ section.team { align-items: center; } .team .container { display: flex; flex-direction: column; justify-content: start; align-items: center; } .team .cta { align-self: center; } /* Styles for Footer */ section.footer { padding: 0rem 0rem; } footer { width: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--background-color); } .footerNav { display: flex; } .footerText { display: flex; align-items: center; padding: 1rem; font-size: 1.2rem; color: var(--text-color-white); } .creditText { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 1rem; font-size: 1rem; color: var(--text-color-white); } /* Styles for Creators.html & Musicians.html */ section.creators, section.musicians { min-height: 100vh; } .creators .container, .musicians .container { width: 100%; } .accordion { min-width: 100%; overflow: hidden; background-color: var(--background-color); color: var(--text-color-black); padding: 2rem 2rem; } .accordionLabel , .accordionContent { padding: 1rem 1rem; color: var(--text-color-black); } .accordionLabel { display: block; font-size: 1.5rem; font-weight: 500; color: var(--text-color-white); background-color: var(--text-color-black); position: relative; cursor: pointer; transition: background 0.3s; } .accordionLabel:hover { background-color: var(--text-color-white); color: var(--text-color-black); } .accordionLabel::after { font-size: 2rem; font-weight: 500; content: '+'; position: absolute; right: 1rem; } .accordionContent { margin: 1rem; background: var(--text-color-black); transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .accordionContent p { margin: 1rem; padding: 1rem 0rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--text-color-white); } details summary::-webkit-details-marker { display: none; } details[open] .accordionContent { height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: left; transition: 1s ease-out; animation: fadeIn 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } details[open] .accordionLabel { font-size: 2rem; background-color: var(--text-color-black); color: var(--secondary-color); transition : 0.5s ease-out; cursor: pointer; } details:not(open) .accordionLabel { transition: color 0.5s, font-size 1s ease-out; } details[open] .accordionLabel::after { content: '-'; } /* Styles for Contact.html */ section.contact { align-items: center; } .contact .sectionTitle { width: 100%; background-color: unset; } .sectionSubTitle h3 { text-align: center; font-size: 1.2rem; } .contactInfo{ color: var(--text-color-white); display: flex; flex-direction: column; justify-content: center; width: 100%; } .contactInfo h2 { font-size: 3rem; font-weight: 800; /* color: var(--text-color-white); */ } .info { display: flex; width: 100%; flex-wrap: wrap; flex-shrink: 1; justify-content: center; align-self: center; padding: 1rem 1rem; } .infoLayout{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 2rem; color: var(--text-color-white); transition: 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .infoLayout:hover { transform: scale(1.2); } .infoLayout p { letter-spacing: 0; } .infoLayout .icon:hover{ background-color: var(--primary-color); color: var(--text-color-black); } .icon { width: 5rem; border-radius: 50%; background-color: var(--text-color-white); padding: 1rem; } .callUs, .visitUs, .dmUs , .emailUs { padding: 1rem 0.5rem; } .contactForm { background-color: var(--background-color); display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 2rem 2rem; } .contactForm h2 { text-align: center; font-size: 2rem; font-weight: 500; color: var(--text-color-white); } form { display: flex; flex-direction: column; justify-content: start; padding: 2rem 0rem; color: var(--text-color-black); } textarea { height: 30vh; } form input, form textarea { padding: 1rem; border: 2px solid var(--text-color-white); background-color: var(--text-color-white); color: var(--text-color-black); } label { margin: 1rem 0rem; font-size: 1.5rem; font-weight: 500; color: var(--text-color-white); } input[type="submit"] { background-color: var(--text-color-black); color: var(--text-color-white); border: 2px solid var(--text-color-white); padding: 1rem; font-size: 1rem; font-weight: 400; cursor: pointer; border-radius: 5%; transition : 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); } form input[type="submit"]:hover { background-color: var(--primary-color); color: var(--text-color-black); font-weight: 600; transform: scale(1.1); } .sendBtn { display: flex; justify-content: end; padding: 1rem 0rem; } /* Styles for the privacyPolicy Page */ section.privacyPolicy { min-height: 100vh; align-items: center; color: var(--text-color-white); } .privacyPolicy .container { display: flex; flex-direction: column; justify-content: center; padding: 2rem 2rem; } .privacyPolicy h2:first-child { font-size: 1.7rem; font-weight: 700; color: var(--tertiary-color); padding: 2rem 0rem; } .privacyPolicy h2 { font-size: 1.5rem; font-weight: 500; color: var(--text-color-white); padding: 1rem 0rem; } .privacyPolicy h3 { font-size: 1.2rem; font-weight: 400; color: var(--text-color-white); padding: 1rem 0rem; } .privacyPolicy p { font-size: 1rem; font-weight: 300; line-height: 1.5; padding: 1rem 0rem; } .privacyPolicy a { color: var(--primary-color); font-weight: 500; } .privacyPolicy a:hover { color: var(--secondary-color); } /* Animations */ @keyframes appear { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translateX(0px); } } .block { animation: appear 1s cubic-bezier(0.075, 0.82, 0.165, 1); animation-timeline: view(); animation-range: entry 0% cover 50%; } h3.block { animation: appear 1.4s cubic-bezier(0.075, 0.82, 0.165, 1); animation-timeline: view(); animation-range: entry 0% cover 50%; } .cta { animation: appear 1.8s cubic-bezier(0.075, 0.82, 0.165, 1); animation-timeline: view(); animation-range: entry 0% cover 50%; } @keyframes appearFromTop { 0% { opacity: 0; scale: 2; transform: translate3d( 0, -100%, 0); } 100% { opacity: 1; transform: translate3d(0); } } .image { animation: appearFromTop 3s cubic-bezier(0.215, 0.750, 0.355, 1); animation-timeline: view(); animation-range: entry 0% cover 20%; } @-webkit-keyframes rotating { from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } @keyframes rotating { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 10s linear infinite; &:hover { animation-play-state: paused; cursor: pointer; } } /* Media Queries for tablet screens */ @media (min-width:599px) and (max-width: 1024px) { body { font-size: 20px; } nav { display: flex; } .displayText { font-size: 4rem; margin: 2rem 0rem; } .vinyl { justify-content: center; } .subText { font-size: 1.5rem; } .cta { padding-top: 5vh; } .sectionTitle { font-size: 2.5rem; } .choiceWrapper { gap: 2rem; } .card { /* max-width: 50vw; max-height: 80vh; */ } .cardTitle h3 { font-size: 2rem; } .cardText h3 { font-size: 1.5rem; } .cardText p { font-size: 1.2rem; } .features .sectionSubTitle h3{ font-size: 1.5rem; } .features .cardTitle h3, .team .cardTitle h3 { font-size: 1.5rem; } .features p { font-size: 1rem; } .features .cta { align-self: center; } section.about { min-height: unset; max-height: fit-content; } .aboutWrapper { font-size: 2rem; } .about .contentText p { font-size: 1.5rem; } .footerNav { display: flex; } .footerText { display: flex; align-items: center; padding: 1rem; font-size: 1.5rem; } .accordionLabel { font-size: 2rem; } details[open] .accordionLabel { font-size: 2.5rem; } .contactInfo h2 { font-size: 4rem; } .infoLayout { padding: 2rem 2rem; } .infoLayout p { font-size: 1.5rem; } .contactForm h2 { font-size: 2.5rem; } form { padding: 2rem 0rem; } textarea { height: 30vh; } } /* Media Queries for medium screens */ @media (min-width:1025px) and (max-width: 1440px) { body { display:flex; flex-direction: column; justify-content: center; align-items: center; } nav { display: flex; } section{ min-height: fit-content; align-items: center; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; justify-self: start; align-items: center; gap: 1rem; } .displayText { grid-column: 1; grid-row: 1 / span 3; font-size: 8rem; margin: 0rem 0rem; justify-self: end; } .vinyl { width: 70%; grid-column: 2; grid-row: 1; justify-content: start; align-items: start; } .subText { font-size: 1.5rem; justify-self: center; } .cta { grid-column: 2; justify-self: center; } .sectionTitle{ padding: 2rem 0rem; font-size: 3rem; } .choiceWrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)); width: 100%; justify-items: center; } .card { /* max-height: 80%; max-width: 80%; */ } .cardTitle h3 { font-size: 2.5rem; } .cardText h3 { font-size: 2rem; } .choice .cardText p { font-size: 1.5rem; } .cardText p { font-size: 1rem; } section.features { min-height: 120vh; } .features .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); /* width: 80%; */ justify-items: center; gap: 0rem; } .features .sectionTitle { grid-column: 1 / span 2; grid-row: 1; } .sectionSubTitle h3 { font-size: 1.5rem; text-align: center; } .features .sectionSubTitle { grid-column: 1 / span 2; grid-row: 2; } #videosReels { grid-column: 1; grid-row: 3; } #socialMedia { grid-column: 2; grid-row: 3; } #concerts { grid-column: 1; grid-row: 4; } #commercials { grid-column: 2; grid-row: 4; } #samples { grid-column: 1 / span 2; grid-row: 5; } .features .cardTitle h3, .team .cardTitle h3 { font-size: 2rem; } .features p { font-size: 1.2rem; } .features .cta { align-self: center; } section.about, section.team { min-height: fit-content; } .aboutWrapper { font-size: 2.5rem; width: min(1440px, 80%); } .teamWrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(32%, 1fr)); /* width: 80%; */ justify-items: center; gap: 1rem; } .team .sectionTitle { grid-column: 1 / span 3; grid-row: 1; } .team .card { flex-wrap: nowrap; /* max-height: 80%; max-width: 80%; */ } .team .cardTitle h3 { font-size: 1.5rem; padding: 1rem 0rem; } #daniel { grid-column: 1; grid-row: 2; } #haller { grid-column: 2; grid-row: 2; } #schneider { grid-column: 3; grid-row: 2; } section.footer { min-height: unset; height: 10vh; } .accordionLabel { font-size: 2.5rem; } details[open] .accordionLabel { font-size: 3rem; } } /* Media Queries for large screens */ @media (min-width:1441px) and (max-width: 1920px) { body { display:flex; flex-direction: column; justify-content: center; align-items: center; } nav { display: flex; } section { min-height: 100vh; align-content: center; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; justify-self: start; align-items: center; gap: 1rem; } .displayText { grid-column: 1; grid-row: 1 / span 3; font-size: 8rem; margin: 0rem 0rem; justify-self: end; } .vinyl { width: 70%; grid-column: 2; grid-row: 1; justify-content: center; align-items: start; } .subText { font-size: 1.5rem; justify-self: center; } .cta { grid-column: 2; justify-self: center; } .sectionTitle { padding: 2rem 0rem; font-size: 3rem; } .choiceWrapper { margin-top: 10%; display: grid; grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)); width: 100%; justify-items: center; } .card { /* max-height: 80%; max-width: 80%; */ } .cardTitle h3 { font-size: 2.5rem; } .cardText h3 { font-size: 2rem; } .cardText p { font-size: 1.5rem; } section.features { min-height: 120vh; } .features .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); /* width: 80%; */ justify-items: center; align-items: start; gap: 0rem; } .features .sectionTitle { grid-column: 1 / span 2; grid-row: 1; } .sectionSubTitle h3 { font-size: 1.5rem; text-align: center; } .features .sectionSubTitle { display: flex; justify-content: center; align-items: center; grid-column: 1 / span 2; grid-row: 2; padding: 4rem; } #videosReels { grid-column: 1; grid-row: 3; } #socialMedia { grid-column: 2; grid-row: 3; } #concerts { grid-column: 1; grid-row: 4; } #commercials { grid-column: 2; grid-row: 4; } #samples { grid-column: 1 / span 2; grid-row: 5; } .features .cardTitle h3, .team .cardTitle h3 { font-size: 2rem; } .features .cta { align-self: center; } section.about, section.team { min-height: fit-content; } .aboutWrapper { font-size: 2.5rem; width: min(1440px, 80%); } .about .contentText p { font-size: 2rem; } .teamWrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(32%, 1fr)); /* width: 80%; */ justify-items: center; gap: 1rem; } .team .sectionTitle { grid-column: 1 / span 3; grid-row: 1; } .team .card { flex-wrap: nowrap; /* max-height: 80%; max-width: 80%; */ } .team .cardTitle h3 { font-size: 1.5rem; padding: 1rem 0rem; } #daniel { grid-column: 1; grid-row: 2; } #haller { grid-column: 2; grid-row: 2; } #schneider { grid-column: 3; grid-row: 2; } section.footer { min-height: unset; height: 10vh; } .accordionContent p { font-size: 2rem; } .accordionLabel { font-size: 3rem; } details[open] .accordionLabel { font-size: 4rem; } } /* Media Queries for extra large screens */ @media (min-width:1921px) { body { display:flex; flex-direction: column; justify-content: center; align-items: center; } nav { display: flex; } section { min-height: 100vh; align-content: center; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; justify-self: start; align-items: center; gap: 1rem; } .displayText { grid-column: 1; grid-row: 1 / span 3; font-size: 12rem; margin: 0rem 0rem; justify-self: end; } .vinyl { width: 70%; grid-column: 2; grid-row: 1; justify-content: center; align-items: start; } .subText { font-size: 2.5rem; justify-self: center; } .cta { grid-column: 2; justify-self: center; } .sectionTitle { padding: 2rem 0rem; font-size: 5rem; } .sectionSubTitle h3 { font-size: 2rem; text-align: center; } .features .sectionSubTitle h3 { font-size: 2rem; } .choiceWrapper { margin-top: 10%; display: grid; grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)); width: 100%; justify-items: center; } .card { /* max-height: 80%; max-width: 80%; */ } .cardTitle h3 { font-size: 3rem; } .cardText h3 { font-size: 2.5rem; } .cardText p { font-size: 2rem; } section.features { min-height: 120vh; } .features .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); /* width: 80%; */ justify-items: center; align-items: start; gap: 0rem; } .features .sectionTitle { grid-column: 1 / span 2; grid-row: 1; } .sectionSubTitle h3 { font-size: 1.5rem; } .features .sectionSubTitle { display: flex; justify-content: center; align-items: center; grid-column: 1 / span 2; grid-row: 2; } #videosReels { grid-column: 1; grid-row: 3; } #socialMedia { grid-column: 2; grid-row: 3; } #concerts { grid-column: 1; grid-row: 4; } #commercials { grid-column: 2; grid-row: 4; } #samples { grid-column: 1 / span 2; grid-row: 5; } .features .cta { align-self: center; } section.about, section.team { min-height: fit-content; } .aboutWrapper { font-size: 2.5rem; width: min(1440px, 80%); } .about .contentText p { font-size: 2rem; } .teamWrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(32%, 1fr)); /* width: 80%; */ justify-items: center; gap: 1rem; } .team .sectionTitle { grid-column: 1 / span 3; grid-row: 1; } .team .card { flex-wrap: nowrap; max-width: 80%; } #daniel { grid-column: 1; grid-row: 2; } #haller { grid-column: 2; grid-row: 2; } #schneider { grid-column: 3; grid-row: 2; } section.footer { min-height: unset; height: 10vh; } .accordionContent p { font-size: 2rem; } .accordionLabel { font-size: 3rem; } details[open] .accordionLabel { font-size: 4rem; } }