@import url('https://fonts.googleapis.com/css2?family=Zain:wght@200;300;400;700;800;900&display=swap'); :root { --color-main:#4aba7f; --color-background:#f3f3f3; --color-orange : #ecbc74; --color-black :#3b5975; } ::selection { background-color: white; color: var(--color-main); } * { margin: 0px; padding: 0px; box-sizing: border-box; font-family: "Zain", sans-serif; } html , body { min-height: 100%; } body { background: url('images/pattern.svg') 100%; } main { display: flex; align-items: center; position: relative; height: 100vh; } main .box-image { width: 55%; text-align: center; } main .box-image img { width: 300px; animation: updown 2.5s infinite linear; } main .column-content { text-align: center; width: 35%; } main .column-content .title { font-size: 32px; color: var(--color-main); font-weight: bold; } main .column-content .subtitle { font-size: 24px; color: var(--color-black); } main .column-content .subtitle .muslim { color: var(--color-orange); font-weight: bold; } main .column-content .column-download { display: flex; flex-direction: column; } main .column-content .column-download .btn{ display: flex; align-items: center; padding: 10px; outline: none; border: none; justify-content: center; cursor: pointer; margin: 5px 0px; border-radius: 25px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; transition: all 0.5s ease; } main .column-content .column-download .btn .icon img{ width: 25px; } main .column-content .column-download .btn span { font-size: 24px; color: white; margin-right: 5px; } main .column-content .column-download .btn-download-from-edge { background-color: var(--color-main); } main .column-content .column-download .btn-download-from-chrome { background-color: var(--color-orange); } main .column-content .column-download .btn:hover { transform: translateY(-4px); } main footer { position: absolute; bottom: 0px; left: 0px; right: 0px; background-color: var(--color-black); text-align: center; padding: 5px; font-family: sans-serif; color: var(--color-background); } main footer .developer { font-size: 20px; color: var(--color-main); font-weight: bold; } /* responsive */ @media (max-width:660px){ main { flex-direction: column; justify-content: center; padding: 0px 5px; } main .box-image { width: 100%; } main .box-image img { height: 200px; width: 150px; } main .column-content { width: 100%; } main .column-content .title { font-size: 24px; } main .column-content .subtitle { font-size: 18px; } main .column-content .column-download .btn span { font-size: 18px; } } @keyframes updown { from { transform: translateY(5px); } to { transform: translateY(-5px); } }