diff --git a/home.css b/home.css index 650e700..5093769 100644 --- a/home.css +++ b/home.css @@ -11,6 +11,10 @@ gap: 40px; } +html[dir="html"] .grid-container { + margin-left:80px; +} + .content { display: flex; align-items: center; diff --git a/styles.css b/styles.css index 93d818b..888c255 100644 --- a/styles.css +++ b/styles.css @@ -49,6 +49,7 @@ body { line-height: 1; text-transform: lowercase; /* overflow: hidden; */ + margin-left:30px; } .deal-wheel > * { @@ -90,6 +91,9 @@ body { transform: rotate(var(--rotate)); user-select: none; } +html[dir="rtl"] .prize { + left:-51%; +} .cap { --cap-size: calc(var(--size) / 4); @@ -118,6 +122,10 @@ body { transform-origin: center left; } +html[dir="rtl"] .ticker { + left:-97%; +} + .btn-spin { border:none; border-radius: 1.25rem; @@ -306,19 +314,27 @@ body { .header-logo p { position: relative; - left: 12%; + margin-left:90px; margin-top: -36px; } +html[dir="rtl"] .header-logo p { + margin-right:80px; +} + .logo-container img { width:50px; height:50px; z-index: 2; position: absolute; - left: 45%; + left: 46%; top:48%; transform:translate(-50% , -50%); } + +html[dir="rtl"] .logo-container img { + left: 40%; +} @media (max-width: 600px) { .logo-container img { @@ -336,7 +352,7 @@ body { } .container { - height:350px; + height:480px; } @@ -362,7 +378,17 @@ body { transform:rotate(90deg) } .logo-container img { - left: 39%; + left: 44%; + top:46% +} +} + +@media (max-width: 450px) { + .container { + height:370px; + } + .logo-container img { + left: 41%; top:46% } }