*,:after,:before{padding:0;margin:0;box-sizing:border-box}body{width:100%;font-family:Lato,sans-serif;background-color:#221319;color:#fff}.App{width:100%;height:auto}li{list-style:none;margin:4% 0}nav{width:100%;height:8vh;display:flex}nav ul{display:flex;justify-content:space-between;width:100%;height:auto;align-items:center}.organise,.behind{width:20%;display:flex;justify-content:space-between;align-items:center;padding:1%}.behind,.hidden{font-size:1.1em;font-weight:800}.hidden{font-weight:300}.title{font-size:1.3em;font-weight:600;padding:2%}.viewport{width:100%;height:30vh;align-items:center;justify-content:space-around;display:flex;background-color:#937581;padding:1%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;border-radius:30px}.viewport img{width:30%;height:auto}.Display{width:100%;height:auto;display:flex;flex-wrap:wrap}.Display li{width:50%;height:auto;display:flex;justify-content:center}.Display button{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1%;gap:5%;width:90%;height:35vh;background-color:#937581;border:1px solid #8d6775;color:#fff;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;border-radius:30px;cursor:pointer}.Display button img{width:30%;height:auto}.content-box h2{width:100%;height:15vh;display:flex;justify-content:space-between;align-items:center;background-color:#937581;border:1px solid #e7dfe2;font-size:1.2em;padding:0 1%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;border-radius:30px}.detail-view h2{margin-left:3%}.viewport p{width:60%;font-size:.8em;font-weight:900;line-height:120%}.Display button h2{font-size:1.3em}.search,.search input{padding:2%}.search input{outline:none;border:none;border-radius:10px}@media only screen and (min-width: 768px){.desk-screen{height:65vh}.desk-screen img{width:30%}.desk-screen h2{font-size:1.7em;line-height:130%}.search{padding-left:8.5%}.search input{width:50%}.Display{justify-content:center}li{display:flex;flex-wrap:wrap}.Display li{width:15%;height:auto;margin:1%}.organise,.behind{justify-content:center}.organise{gap:10%}.viewport p{font-size:1.5em}.detail-view img{width:10%}.detail-view h2{width:30%;font-size:2em}.content-box h2{width:50%}.Display button{transition:width 2s,height 2s,transform 2s}.Display button:hover{width:400px;height:350px;transform:rotate(20deg);border-top-color:#0eb7da;border-right-color:#0eb7da}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}