@supports (font-size-adjust: 1) {
  .card {
    font-size-adjust: 0.5;
  }
}

p {
  line-height: calc(1ex / 0.32);
}

html {
  scroll-behavior: smooth;
  background: rgb(119,119,117);
}

body {
  font-family: Arial, sans-serif;
  color: #FFFFFF;
  margin: 0;
  padding: 0;

  background: rgb(119,119,117);
  background: radial-gradient(circle, rgba(119,119,117,1) 0%, rgba(24,24,23,1) 87%);
}

main {
  padding: 50px;
}

nav {
  backdrop-filter: blur(23px) saturate(100%);
  -webkit-backdrop-filter: blur(23px) saturate(100%);
  background-color: rgba(50, 50, 46, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.125);

  color: #fff;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav img{
  max-width: 45px;
  max-height: 45px;
  border-radius: 50%;
}

nav img:hover{
  animation: rotate360 1s linear infinite;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-container img {
  margin-right: 10px;
}

nav h2 {
padding-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

.card {
  width: 50%;
  text-align: center;

  backdrop-filter: blur(6px) saturate(100%);
  -webkit-backdrop-filter: blur(6px) saturate(100%);
  background-color: rgba(88, 88, 88, 0.45);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);

}

img {
  border-radius: 12px;
}

.btn{
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.btn:hover{
  position:relative;
  animation:bouncy 5s infinite linear;
  /* animation: rotate360 1s linear infinite; */
}

.btn{
  display:inline-block;
  padding:0.35em 1.2em;
  border:0.1em solid #FFFFFF;
  margin:0 0.3em 0.3em 0;
  border-radius:0.12em;
  box-sizing: border-box;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  color:#FFFFFF;
  text-align:center;
  transition: all 0.2s;
}

.btn:hover{
  color:#000000;
  background-color:#FFFFFF;
}

@media all and (max-width:30em){
  .card button{
    display:block;
    margin:0.4em auto;
  }
}
  

@keyframes bouncy {
  0%{top:0em}
  40%{top:0em}
  43%{top:-0.9em}
  46%{top:0em}
  48%{top:-0.4em}
  50%{top:0em}
  100%{top:0em;}
}
  

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes rotate360 {
  to { transform: rotate(360deg);}           
}

/* Responsive styles */
@media only screen and (min-width: 768px) {
  section {
    display: flex;
  }
    
  main {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .card {
    width:45%;
  }
}

@media (max-width: 480px) {
  .card {
    width: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;  
  }
  img {
    width: 100%;
    height: 100%;
  }
}