.layre-page#home{.layre-page__background{position:absolute;width:100%;height:calc(100vh + 420px);background-image:url(/dev/backgrounds/LayreBackgroundLight.svg);background-size:cover;background-repeat:no-repeat;background-attachment:fixed;@media (prefers-color-scheme:dark){background-image:url(/dev/backgrounds/LayreBackgroundDark.svg)}z-index:-1}.layre-page__start{display:flex;flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 60px);.lolText{position:relative;bottom:50px;color:#fff;padding:.25rem .5rem;background:rgba(0,0,0,.05);border-radius:5px;font-size:.8rem}}.layre-page__sections{display:flex;min-height:500px;position:relative;.layre-page__gradient-left,.layre-page__gradient-right{display:block;width:100%;max-height:500px;flex-grow:1;background:linear-gradient(to bottom,rgba(var(--layre-light-main-background),0),rgba(var(--layre-light-main-background),.95),rgba(var(--layre-light-main-background),1));@media (prefers-color-scheme:dark){background:linear-gradient(to bottom,rgba(var(--layre-dark-main-background),0),rgba(var(--layre-dark-main-background),100%))}@media (max-width:840px){display:none}}.layre-page__sections__content{display:flex;align-items:center;flex-grow:2;flex-direction:column;border-radius:10px 10px 0 0;width:80vw;height:100%;min-height:500px;background-color:rgb(var(--layre-light-main-background));color:rgb(var(--layre-light-main-foreground));@media (prefers-color-scheme:dark){background-color:rgb(var(--layre-dark-main-background));color:rgb(var(--layre-dark-main-foreground))}@media (min-width:840px){max-width:var(--layre-content-max-width)}@media (max-width:840px){width:100vw;border-radius:0}}}}.layre-page__sectioncontent{display:flex;padding:1.5rem;width:calc(100% - 3rem);max-width:var(--layre-content-max-width);@media (max-width:840px){h1{width:100%;text-align:center}}&.section-1{@media (max-width:840px){flex-direction:column;align-items:center}justify-content:center;.layre-page__section-1__image{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.text{padding:10px;h1,p{margin:0}p{margin-top:10px}}}&.section-2{align-items:center;flex-direction:column;.intr{position:relative;width:100%;height:37.5px;overflow-x:hidden;border-radius:5px}.layre-page__interests,.layre-page__interests2{position:absolute;top:0;display:grid;grid-template-columns:repeat(var(--interests-count),200px);grid-gap:10px;gap:10px;overflow:hidden;width:100%;.interest{display:flex;justify-content:center;align-items:center;background:linear-gradient(0deg,rgb(var(--layre-light-gradient-start)),rgb(var(--layre-light-gradient-end)));padding:0 .5rem;text-align:center;color:rgb(var(--layre-light-main-background));border-radius:5px;font-weight:700;pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:37.5px;@media (prefers-color-scheme:dark){background:linear-gradient(0deg,rgb(var(--layre-dark-gradient-start)),rgb(var(--layre-dark-gradient-end)))}}}.layre-page__interests .interest{animation:horizontalScroll;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:40s}.layre-page__interests2 .interest{animation:horizontalScroll2;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:40s}}&.section-3{justify-content:center;flex-wrap:wrap;gap:10px;a{position:relative;overflow:hidden;transition:all .25s ease;.titleCover,img{border-radius:10px}.titleCover{position:absolute;width:175px;height:175px;text-align:center;display:flex;justify-content:center;align-items:center;color:#fff;z-index:10;background:rgba(0,0,0,.25);transition:all .25s ease;opacity:0;backdrop-filter:blur(10px);span{transform:scale(1.25);transition:all .25s ease;max-width:150px;font-weight:700}}@media (hover:hover) and (pointer:fine){&:hover{transform:scale(1.05);.titleCover{opacity:1;span{transform:scale(1)}}}}&:active{transform:scale(1.01);.titleCover span{transform:scale(.99)}}}}&.section-3-5{flex-direction:column;align-items:center;.tools{display:flex;flex-direction:row;justify-content:center;gap:15px;@media (max-width:1210px){&{flex-direction:column;align-items:center;.tool{width:90%!important}}}.tool{width:250px;color:#fff;padding:.75rem 1.5rem;position:relative;z-index:0;overflow:hidden;border-radius:10px;transition:all .25s ease;i{margin-right:5px;margin-left:0;&:before{text-align:center}}&:before{display:block;content:"";width:100%;height:100%;background-image:var(--tool-bg-image);background-size:cover;position:absolute;z-index:-1;top:0;left:0;transform:scale(1.1);filter:blur(2px);transition:all .25s ease}&.darkenbg:before{filter:blur(2px) brightness(.5)}@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;transform:scale(1.05)}&:hover:before{transform:scale(1.3);filter:blur(6px) brightness(.75)}&.darkenbg:hover:before{transform:scale(1.3);filter:blur(6px) brightness(.25)}}&:active{transform:scale(1.025)}}}}&.section-4{flex-direction:column;align-items:center;.music-pages{display:flex;flex-direction:row;gap:20px;justify-content:center;@media (max-width:840px){flex-direction:column;align-items:center}a{display:block;border-radius:10px;padding:.5rem;transition:all .25s ease;width:100%;max-width:550px;text-decoration:none;color:#fff;@media (hover:hover) and (pointer:fine){&:hover{transform:scale(1.025)}}@media (prefers-color-scheme:light){position:relative;overflow:hidden;div{position:relative;z-index:10}}&:active{transform:scale(1.01)}}p{padding:0 1.25rem;font-weight:700}.layre-music{@media (prefers-color-scheme:light){&:before{content:"";position:absolute;width:200%;height:400%;display:block;background:linear-gradient(45deg,#75d3ff,#b9fcff);z-index:1;transition:all 1s ease;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0deg)}@media (hover:hover) and (pointer:fine){&:hover:before{transform:translate(-50%,-50%) rotate(270deg)}}}@media (prefers-color-scheme:dark){background:rgb(var(--layre-dark-main-background));outline:3px solid #75d3ff}}.layreboi-music{@media (prefers-color-scheme:light){&:before{content:"";position:absolute;width:200%;height:400%;display:block;background:linear-gradient(45deg,#dfb0ff,#c2efff);z-index:1;transition:all 1s ease;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0deg)}@media (hover:hover) and (pointer:fine){&:hover:before{transform:translate(-50%,-50%) rotate(270deg)}}}@media (prefers-color-scheme:dark){background:rgb(var(--layre-dark-main-background));outline:3px solid #dfb0ff}}}}&.section-5{flex-direction:column;align-items:center;p{margin:0}.layre-page__discord{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;.discord-logo{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.members{display:flex;flex-direction:row;@media (max-width:840px){display:none}.member{border-radius:100rem;margin-right:-25px;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;width:150px;height:150px;box-shadow:0 0 0 5px rgb(var(--layre-light-main-background));border:5px solid rgb(var(--layre-light-main-background));background-color:rgb(var(--layre-light-main-background));@media (prefers-color-scheme:dark){box-shadow:0 0 0 5px rgb(var(--layre-dark-main-background));border-left-color:rgb(var(--layre-dark-main-background));border-left-style:solid;border-left-width:5px;border-bottom-color:rgb(var(--layre-dark-main-background));border-bottom-style:solid;border-bottom-width:5px;border-right-color:rgb(var(--layre-dark-main-background));border-right-style:solid;border-right-width:5px;border-top-color:rgb(var(--layre-dark-main-background));border-top-style:solid;border-top-width:5px;background-color:rgb(var(--layre-dark-main-background))}}}.join-button{display:block;padding:.5rem 1rem;text-decoration:none;width:150px;text-align:center;font-weight:700;border-radius:10px;transition:transform .25s ease;color:rgb(var(--layre-light-main-foreground));background:rgb(var(--layre-light-image-unloaded));@media (prefers-color-scheme:dark){color:rgb(var(--layre-dark-main-foreground));background:rgb(var(--layre-dark-image-unloaded))}@media (hover:hover) and (pointer:fine){&:hover{transform:scale(1.075)}}&:active{transform:scale(1.05)}}}}}@keyframes horizontalScroll{0%{transform:translateX(-2100px)}to{transform:translateX(0)}}@keyframes horizontalScroll2{0%{transform:translateX(0)}to{transform:translateX(2100px)}}