:root{--primary-color: #ffffff;--secondary-color:#000000;--grey-color: #cacaca;--light-grey: #ededed;font-size:14px;line-height:24px;font-weight:400;font-family:Futura}*{box-sizing:border-box}body{height:100vh;margin:0}#root{height:100vh}.body-container{background-color:var(--primary-color);color:var(--secondary-color);display:flex;flex-direction:column;height:100%;margin:0}.content-container{align-items:center;display:flex;flex-direction:column;flex-grow:1;justify-content:start;margin:30px 10px}header{align-items:center;border-bottom:1px solid var(--grey-color);display:flex;height:70px;justify-content:start;padding:0 20px}.titel-page{font-size:3rem;font-weight:200;letter-spacing:.3rem;line-height:3.5rem;margin:60px 40px;text-align:center;text-transform:uppercase}.article-container{display:flex;justify-content:center;max-width:1200px}.article{background-color:#f2f2f2;margin:10px;max-width:700px;min-width:33%;padding:30px}.titel{text-align:center}.img{box-sizing:border-box;width:60%}.img-container{display:flex;justify-content:center;padding:10px}.link{color:var(--secondary-color);display:flex;font-size:.8rem;font-weight:500;justify-content:center;letter-spacing:.1rem;margin:0;text-decoration:none;text-transform:uppercase}.link:hover{opacity:50%}.switch{display:flex;justify-content:center;margin:50px;max-width:600px}.hide-article{display:none}.pagination{align-items:center;display:flex;gap:10px;justify-content:center;margin:35px 35px 25px}.pagination-container{display:flex;gap:10px}.next,.previous{cursor:pointer;font-size:1.2rem}.next:hover,.previous:hover{opacity:50%}.pagination-number{align-items:center;border-radius:50%;border:solid 2px var(--light-grey);display:flex;font-family:Arial,Helvetica,sans-serif;font-size:.9rem;height:30px;justify-content:center;width:30px}.pagination-active{background-color:var(--light-grey)}.all-btn{display:flex;justify-content:center;margin:0}.all-btn p{color:var(--secondary-color);cursor:pointer;font-size:.9rem;margin:0}.all-btn p:hover{opacity:50%}footer{align-items:center;border-top:1px solid var(--grey-color);display:flex;height:70px;justify-content:center}.footer-text{font-size:.7rem;letter-spacing:.2rem;text-transform:uppercase}@media only screen and (max-width: 900px){.article-container{flex-direction:column;align-items:center}}@media only screen and (max-width: 425px){.content-container{padding:0}.titel-page{font-size:2rem;line-height:2.5rem;margin:40px 10px}.article{margin:10px 0}}