@import url("https://fonts.googleapis.com/css2?family=Delius&display=swap");@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");:root{--count:7;--gap:0px;--slant:60px}body,html{margin:0;padding:0;height:100%}.stripe-link{flex:1;display:block;height:100%;transition:flex .4s ease}.diagonal-stripes{display:flex;width:100%;height:100vh;overflow:hidden;gap:0}.stripe{flex:1;position:relative;filter:brightness(.8);clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);transition:transform .4s ease}.stripe:last-child{border-right:none}.stripe:hover{flex:2 1 0;filter:brightness(1) blur(0);z-index:2}.stripes{display:flex;width:100%;height:100%;transform:skewY(var(--angle));transform-origin:top left}.stripe{flex:1 1 0;margin-left:-50px;transition:flex .4s ease,transform .4s ease;height:100%;background-size:cover;background-position:50%;transition:transform .5s ease-in-out,filter .5s ease-in-out;filter:brightness(.8) blur(1px);transform:skewY(calc(-1 * var(--angle)));transform-origin:top left}.stripe:not(:first-child){margin-left:-50px;z-index:1}.top-bar{height:100px;width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 40px;box-sizing:border-box;background-color:white;background-color:rgba(255,255,255,.9);color:black;font-family:sans-serif;font-size:24px;z-index:10;position:absolute}.top-left{width:45%;text-align:right;padding-right:20px}.top-left,.top-right{font-family:Delius,cursive;font-size:32px}.top-center{width:10%;text-align:center}.top-right{width:45%;text-align:left;padding-left:20px}.logo{height:80px;width:100%;object-fit:contain}.stripe-link:hover{flex:2 1 0}.stripe-label{position:absolute;bottom:0;left:0;width:100%;height:100px;background-color:rgba(0,0,0,.6);color:white;display:flex;align-items:center;justify-content:center;font-size:20px;transform:translateY(10px);opacity:0;transition:opacity .4s ease,transform .4s ease;text-shadow:0 0 5px black;pointer-events:none;z-index:3}.stripe:hover .stripe-label{opacity:1;transform:translateY(0)}@media (max-width:480px){.diagonal-stripes{display:flex;flex-direction:column;width:100vw;height:auto;gap:10px}.stripe,.stripe-link{clip-path:none!important;transform:none!important;margin-left:0!important;flex:none!important;width:100%;height:200px}.top-bar{position:fixed}.content{padding-top:100px}.top-left,.top-right{font-size:25px}.top-center .logo{height:50px;width:auto}.top-center{flex:0 0 auto;text-align:center;display:flex;justify-content:center;align-items:center}.stripe-label{height:60px}}@media (min-width:481px) and (max-width:760px){.diagonal-stripes{display:flex;flex-direction:column;width:100vw;height:auto;gap:10px}.stripe,.stripe-link{clip-path:none!important;transform:none!important;margin-left:0!important;flex:none!important;width:100%;height:250px}.top-bar{position:fixed}.content{padding-top:100px}.top-left,.top-right{font-size:25px}.top-center .logo{height:50px;width:auto}.top-center{flex:0 0 auto;text-align:center;display:flex;justify-content:center;align-items:center}}