diff --git a/css/style.css b/css/style.css index 8c92d17..2dfb0ac 100644 --- a/css/style.css +++ b/css/style.css @@ -30,7 +30,6 @@ h1 { flex-direction: column; align-items: center; width: 100%; - max-width: 80vw; flex: 1; padding-top: 20px; box-sizing: border-box; @@ -379,6 +378,10 @@ button.item:active { padding-bottom: 1vh; /* Afasta a barra de rolagem do conteúdo */ } + .main { + max-width: 90vw; + } + .sidebar, .sidebarDonate{ height: 76vh; width: 90vw; @@ -418,6 +421,10 @@ button.item:active { margin-bottom: 12.5vh; } + .main { + max-width: 85vw; + } + .sidebar, .sidebarDonate{ height: 92vh; width: 48vw; @@ -456,6 +463,10 @@ button.item:active { margin-bottom: 12.5vh; } + .main { + max-width: 80vw; + } + .sidebar, .sidebarDonate{ height: 92vh; width: 48vw; @@ -494,6 +505,10 @@ button.item:active { margin-bottom: 12.5vh; } + .main { + max-width: 70vw; + } + .sidebar, .sidebarDonate{ height: 92vh; width: 40vw; @@ -503,6 +518,8 @@ button.item:active { height: 8vh; flex-direction: row; justify-content: space-between; + border-radius: 0; + width: 100%; } .downloadButton { @@ -535,10 +552,12 @@ button.item:active { width: 30vw; } - .menuBar{ + .menuBar { + height: 8vh; flex-direction: row; justify-content: space-between; - height: 8vh; + border-radius: 0; + width: 100%; } .downloadButton { @@ -569,10 +588,12 @@ button.item:active { width: 25vw; } - .menuBar{ + .menuBar { + height: 8vh; flex-direction: row; justify-content: space-between; - height: 8vh; + border-radius: 0; + width: 100%; } .downloadButton { @@ -581,6 +602,14 @@ button.item:active { transform: translateX(-50%); width: 15vh; } + + .buttonBlue{ + margin-left: 15vw; + } + + .button{ + margin-right: 15vw; + } } @media (min-aspect-ratio: 16/9) { @@ -602,10 +631,12 @@ button.item:active { width: 20vw; } - .menuBar{ + .menuBar { + height: 8vh; flex-direction: row; justify-content: space-between; - height: 8vh; + border-radius: 0; + width: 100%; } .downloadButton { @@ -613,6 +644,14 @@ button.item:active { transform: translateX(-50%); width: 15vh; } + + .buttonBlue{ + margin-left: 20vw; + } + + .button{ + margin-right: 20vw; + } } @media (min-aspect-ratio: 18/9) { @@ -634,16 +673,26 @@ button.item:active { width: 18vw; } - .menuBar{ + .menuBar { + height: 8vh; flex-direction: row; justify-content: space-between; - height: 8vh; + border-radius: 0; + width: 100%; } .downloadButton { left: 50%; transform: translateX(-50%); } + + .buttonBlue{ + margin-left: 25vw; + } + + .button{ + margin-right: 25vw; + } } @media (min-aspect-ratio: 22/9) { @@ -667,8 +716,12 @@ button.item:active { width: 15vw; } - .menuBar{ + .menuBar { height: 8vh; + flex-direction: row; + justify-content: space-between; + border-radius: 0; + width: 100%; } .downloadButton { @@ -677,11 +730,11 @@ button.item:active { } .buttonBlue{ - margin-left: 40vw; + margin-left: 30vw; } .button{ - margin-right: 40vw; + margin-right: 30vw; } } @@ -705,8 +758,12 @@ button.item:active { width: 12vw; } - .menuBar{ + .menuBar { height: 8vh; + flex-direction: row; + justify-content: space-between; + border-radius: 0; + width: 100%; } .downloadButton { @@ -714,11 +771,11 @@ button.item:active { } .buttonBlue{ - margin-left: 25vw; + margin-left: 35vw; } .button{ - margin-right: 25vw; + margin-right: 35vw; } }