@import url("https://fonts.googleapis.com/css2?family=Andika&family=Julius+Sans+One&display=swap");.body{background-image:url(https://images.pexels.com/photos/1181325/pexels-photo-1181325.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);background-attachment:fixed;background-size:cover;background-position:50%;box-sizing:border-box;font-family:Andika,sans-serif}.body:before{position:absolute;left:0;top:0}.card:hover .card-image{opacity:0}h1,h2,h3,h4,h5,h6{font-family:Julius Sans One,sans-serif;margin-bottom:20px}.container{position:relative;display:flex;justify-content:flex-start;z-index:2;height:100%;overflow-x:auto;overflow-y:hidden;padding:20px}.container .card{width:300px;min-width:300px;height:450px;margin:25px;box-shadow:5px 5px 5px rgba(6,30,117,.8);border-radius:25px;background-color:hsla(0,0%,100%,.2);overflow:hidden;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(20px);text-align:center}.card .content{padding:20px;transition:all .8s ease;color:#ccc;transform:translateY(200px);opacity:0}.card:hover .content{transform:translateY(0);opacity:1}.card img{position:absolute;top:50px;opacity:.2;z-index:-1}.card .content h2{color:#fff;font-weight:400}.card .content a{display:inline-block;margin-top:20px;text-decoration:none;padding:8px 30px 11px;border:2px solid #fff;text-transform:uppercase;color:#fff;border-radius:50px;box-shadow:0 5px 50px rgba(0,0,0,.8);transition:all .8s ease}.card .content a:hover{background:#f6c40e}@media only screen and (max-width:100%){.container{display:block}}