diff --git a/css/freakymas.css b/css/freakymas.css index 96c4abf..4612de1 100644 --- a/css/freakymas.css +++ b/css/freakymas.css @@ -9,18 +9,18 @@ body { background: url("../images/christmas-celebration-with-decorated-tree.jpg") no-repeat center center fixed; background-size: cover; - overflow-x: hidden; - min-height: 100vh; - overflow-y: hidden; color: white; min-width: 100vw; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; position: relative; + overflow-x: hidden; + min-height: 100vh; } + body::before { content: ''; position: fixed; @@ -298,20 +298,23 @@ color: wheat; } .footer { + border-radius: 30px; margin-top: 100px; display: flex; - border: 1px solid #ffff; - width:2000px; - height:200px; - background: none; - background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ; - border: 1px solid rgba(255,255,2555,0.18); - backdrop-filter: blur(10px); - box-shadow: 0 8px 32px 0 rgba(0,0,0,37); + justify-content: space-between; + align-items: center; + width: 100%; + height: auto; + background: none; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); + border: 1px solid rgba(255, 255, 255, 0.18); + backdrop-filter: blur(10px); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); + padding: 10px 20px; } .footer p { - margin-left: 39%; + margin-left: 20px; } .footer img { @@ -324,14 +327,10 @@ color: wheat; justify-content: center; align-items: center; gap: 20px; - margin-left: -425px; - margin-top: -10px; - + margin-top: 0; } #social-buttons-container img { - justify-content: center; - align-items: center; width: 40px; height: 40px; transition: 0.3s; @@ -356,6 +355,7 @@ color: wheat; transform: scale(1.1); } + @media screen and (max-width: 600px) { h1 { margin-top: -60px; @@ -430,6 +430,34 @@ margin-top: -10px; z-index: -1; margin-left: -200px; } +h1 { + margin-top: 0; +} + +#music-player { + width: 200px; + height: 30px; + font-size: 14px; + bottom: 20px; + right: 20px; +} + +#music-player #current-song { + font-size: 0.8em; + font-weight: bold; + margin-bottom: 8px; +} + +.footer { + flex-direction: column; + text-align: center; + align-items: center; +} + +#social-buttons-container { + flex-direction: column; + align-items: center; +} } @keyframes penis { @@ -470,3 +498,6 @@ margin-top: -10px; } + + +