@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;700&display=swap');
body {
    color: rgb(255, 255, 255);
    background: #bbbbbb;
    font-family: sans-serif;
    margin:0;
}
h1,h2  {
color:white;
font-family: 'Teko', sans-serif;
text-shadow: 0px 5px 8px rgba(0,0,0.5);
margin:0
}
ul,li {
    margin:0;
    padding:0;
    list-style:none;
    display:inline;
}

p{
font-size:16px;
font-weight:normal;
line-height:1.5;
}
.main-nav {
background-color:#0e0a73;
color:white;
padding:20px;
position:fixed;
width:100%;
top:0;
z-index:999
}
.main-nav a {
color:white;
text-decoration: none;
margin-right:20px;
}
.main-nav a:hover {
    color: lightblue !important;
text-decoration:underline;

}
.main-nav a:visited {
    color:lightgrey;
}
.dropdown {
    display:none;
    position:absolute;
    left:242px;
    padding-top:20px;
}
.dropdown li {
    display:block;
    width: 100%;
    background: none;
    border-top: 2px solid white;
    padding:10px;

}
.dropdown-link:hover .dropdown {
    display: block; 
}
.dropdown-link::after {
    content:"+";
    font-weight:bold;
}

.active {
color:#2a4a90!important;
text-decoration: underline!important;

}
.main-header{
background-image: url(images/skyline.png);
background-size: 400px;
background-position: 0px;
background-repeat: repeat-x;
padding:80px;
text-align:center;
padding-top: 138px;

}
.main-content {
background-color:#b2b2b2;
border-radius: 15px;
box-shadow: 5px 5px 8px rgba(23, 23, 23, 0.5);
width: 600px;
margin:100px auto;
text-align:left;
background-blend-mode: normal;

}

.workaround {
    padding: 50px;
    border: 2px solid #000;
    border-radius: 15px;
}
.button {
    background-color:grey;
  color: white;
  font-size: 24px;
  padding:20px;
  margin-top:40px;
  display:block;
  text-align:center;
  width:300px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  text-decoration:none;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 15px;
  border-bottom: 10px solid lightgray;
  transform: translateY(0px);
  transition-property: all;
  transition-duration: 300ms;
  opacity: .5;
  animation-name: moving-button;
  animation-duration: 2s;
  animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: reverse;
}
.button:hover {
    background-color:666;
    color: rgb(28, 46, 130);
    opacity:1;
    
}
.button:active {
    background:blue;
    color:white;
    margin-top:50px;
    border-bottom:none;
    transform:translate(10px)
}
.main-content img {
width: 50%;
display:block;
margin-left:auto;
margin-right: auto;
margin-bottom:10px;

}
.main-content img:last-child {
    margin-bottom:0;
}
.main-content img:first-child {
    display:none;
}
.main-content img:nth-child(3) {
    width:100%;
}
.main-header h1 {
    animation-name:popinheader;
    animation-duration: 1s;
}
.main-header h2 {
    animation-name:popinheader;
    animation-duration: 1s;
    animation-delay: .5s;
    opacity: 0;
    transform:translateY (50px);
    animation-fill-mode:forwards;
}
@keyframes popinheader {
from{ opacity:0;transform:translateY(50px);}
to {opacity: 1; transform:translateY(0px);}
}

@keyframes moving-button {
    0% {transform: translateX(0); background-color:#666; width:300px;}
25% {transform:translateX(-200px); background-color:blue;width:400px;}
50% {transform: translateX(0); background-color:#666;width:300px;}
75% {transform:translateX(200px); background-color:blue;width:400px;}
100% {transform: translateX(0); background-color:#666;width:300px;}
}