diff --git a/style.css b/style.css index fd8cd96..d5fc307 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,8 @@ html, body { height: 100%; - background: #eaeaea; + background-image: url(/images/bg.jpeg); + background-size: cover; overflow: hidden; } @@ -22,8 +23,10 @@ body { max-width: 1000px; height: 56.25vw; /* 16:9 aspect ratio */ max-height: 600px; - background: #f5f5f5; - box-shadow: 0 3vw 5vw #dbdbdb; + background-image: url(/images/bg.jpeg); + background-size: cover; + outline: 20px double #000000; + box-shadow: 0 0 8px 10px rgba(0, 131, 160, 0.837); } .container .slide .item { @@ -33,11 +36,10 @@ body { top: 50%; transform: translate(0, -50%); border-radius: 2vw; - box-shadow: 0 3vw 5vw #505050; background-position: 50% 50%; background-size: cover; display: inline-block; - transition: 0.5s; + transition: 1s; } .slide .item:nth-child(1), @@ -50,6 +52,10 @@ body { height: 100%; } +.slide .item:nth-child(1){ + box-shadow: 0 0 10px 7px #00bbe5e1; +} + .slide .item:nth-child(3) { left: 50%; } @@ -135,14 +141,16 @@ body { border: none; cursor: pointer; margin: 0 0.5vw; - border: 0.1vw solid #000; + border: 0.2vw solid #000; + background-color: rgb(173, 173, 173); transition: 0.3s; font-size: 1.4vw; } .button button:hover { - background: #ababab; + background: #000; color: #fff; + box-shadow:0 0 3px 3px inset #ffffff; } @media (max-width: 768px) {