style changes

src/plays/dev-jokes/devJokes.css

@@ -4,11 +4,12 @@
  justify-content: center;
  flex-direction: column;
  align-items: center;
- height: 100%;
  background-image: url("4485876.jpg");
  background-repeat: no-repeat;
+ background-position: center;
  background-size: cover;
- background-position: absolute;
+ height: 100%;
+ width: 100%;
 }
 .jokecontanier {
  margin: 20px;
@@ -21,7 +22,7 @@
  border-radius: 10px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
- margin-top: 300px;
+ margin-top: 30px;
  /* background: radial-gradient(#76b2fe, #b69efe); */
  background-color: rgb(0, 0, 0);
  background-color: rgba(199, 183, 183, 0.4);
@@ -35,7 +36,7 @@
 }
 
 .btn {
- background-color: #c2fbd7;
+ /* background-color: #c2fbd7;
  border-radius: 10px;
  box-shadow: rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset,
  rgba(44, 187, 99, 0.15) 0 1px 2px, rgba(44, 187, 99, 0.15) 0 2px 4px,
@@ -55,7 +56,28 @@
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 100px;
- width: 10%;
+ width: 10%; */
+ padding: 1em 2.1em 1.1em;
+ border-radius: 3px;
+ margin: 8px 8px 8px 8px;
+ color: black;
+ background-color: #c2fbd7;
+ display: inline-block;
+ -webkit-transition: 0.3s;
+ -moz-transition: 0.3s;
+ -o-transition: 0.3s;
+ transition: 0.3s;
+ font-family: sans-serif;
+ font-weight: 800;
+ font-size: .85em;
+ text-transform: uppercase;
+ text-align: center;
+ text-decoration: none;
+ box-shadow: rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset,
+ rgba(44, 187, 99, 0.15) 0 1px 2px, rgba(44, 187, 99, 0.15) 0 2px 4px,
+ rgba(44, 187, 99, 0.15) 0 4px 8px, rgba(44, 187, 99, 0.15) 0 8px 16px,
+ rgba(44, 187, 99, 0.15) 0 16px 32px;
+ position: relative;
 }
 
 .btn:hover {
@@ -65,3 +87,11 @@
  rgba(44, 187, 99, 0.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
 }
+@media screen and (max-width:764px) {
+ .jokecontanier{
+ width: 75%;
+ min-height: 40%;
+ margin-top: 100px;
+ font-size: larger;
+ }
+}