body{
  background-image: url("../images/world.jpg");
  background-size: 50%;
}

/******************************
Swatches
*******************************/

.swatch {
  display: block;
  text-align: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.swatch a div {
  width:170px;
  height: 590px;
  position: absolute;
  top:2em;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
  transform-origin: center 90%;
  display: inline-block;
  backface-visibility: hidden;
  margin-left: -80px;
}

/******************************
Swatches - Animation
*******************************/

.swatch #card1 {
  background-color: #0000CC;
  background-image: url("../images/languages/french.jpg");
  background-size: contain;
  animation: swatch-purple-motion 2s;
  transform: rotate(-65deg);
}
.swatch #card2 {
  background-color:#FFCC00;
  background-image: url("../images/languages/spanish.jpg");
  background-size: contain;
  animation: swatch-blue-motion 2s;
  transform: rotate(-40deg);
}
.swatch #card3 {
  background-color:#FE0000;
  background-image: url("../images/languages/german.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  animation: swatch-green-motion 2s;
  transform: rotate(-15deg);
}
.swatch #card4 {
  background-color:#01CC00;
  background-image: url("../images/languages/japanese.jpg");
  background-size: contain;
  animation: swatch-yellow-motion 2s;
  transform: rotate(15deg);
}
.swatch #card5 {
  background-color:#FE9900;
  background-image: url("../images/languages/chinese.jpg");
  background-size: contain;
  animation: swatch-orange-motion 2s;
  transform: rotate(40deg);
}
.swatch #card6 {
  background-color:#6F2F9F;
  background-image: url("../images/languages/english.jpg");
  background-size: contain;
  animation: swatch-red-motion 2s;
  transform: rotate(65deg);
}

@keyframes swatch-purple-motion {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(-65deg);
  }    
}

@keyframes swatch-blue-motion {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(-40deg);
  }
}

@keyframes swatch-green-motion {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(-15deg);
  }
}

@keyframes swatch-yellow-motion {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(15deg);
  }
}

@keyframes swatch-orange-motion {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(40deg);
  }
}

@keyframes swatch-red-motion {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(65deg);
  }
}

/******************************
Swatches - Hover
*******************************/

.swatch #card1:hover, .swatch #card2:hover, .swatch #card3:hover, .swatch #card4:hover, .swatch #card5:hover, .swatch #card6:hover {
  filter: brightness(80%);
}

/******************************
Popup
*******************************/

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 150px auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  width: 70%;
  min-height: 60%;
  position: relative;
  transition: all 5s ease-in-out;
}

/******************************
Popup- Content
*******************************/

.popup h2 {
  font-size: 2em;
  letter-spacing: 2px;
  margin-top: 0;
  color: white;
  text-align: center;
}

table{
  width: 60%;
  margin: auto;
}

table, tr, td{
  border: 1px solid white;
  border-collapse: collapse;
}

td{
  height: 50px;
  vertical-align: central;
}

.content{
    text-align: center;
}

.content a:hover{
    color: grey;
}

/******************************
Popup - Close
*******************************/

.popup .close {
  position: absolute;
  top: 10px;
  right: 30px;
  transition: all 200ms;
  font-size: 35px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
}

.popup .close-blue:hover {
  color: #0079FE;
}

.popup .close-yellow:hover {
  color: #FFCC00;
}

.popup .close-red:hover {
  color: #FE3231;
}

.popup .close-green:hover {
  color: #01CC00;
}

.popup .close-orange:hover {
  color: #EA7A2E;
}

.popup .close-purple:hover {
  color: #6F2F9F;
}

.popup .content {
  color: white;
  max-height: 30%;
  overflow: auto;
}

/******************************
Responsive
*******************************/


@media screen and (max-width: 1080px){
  .swatch a div {
    width:150px;
    height: 540px;
    top:5em;
    margin-left: -72px;
  }
  .popup h2 {
    font-size: 1.7em;
  }
  table{
    width: 70%;
  }
}

@media screen and (max-width: 980px){
  .swatch a div {
    width:140px;
    height: 500px;
    top:7em;
  }
}

@media screen and (max-width: 900px){
  .swatch a div {
    width:126px;
    height: 440px;
    top:8em;
    margin-left: -65px;
  }
  .popup h2 {
    width: 80%;
    margin: auto;
  }
  table{
    width: 100%;
  }
}

@media screen and (max-width: 840px){
  .swatch a div {
    width:115px;
    height: 400px;
    top:9em;
  }
}

@media screen and (max-width: 720px){
  body{
    overflow-y: scroll;
  }
  
  .swatch {
    display:flex;
    text-align: center;
    flex-direction: column;
    position:none;
    width:312px;
    margin-left: auto;
    margin-right: auto;
  }

  .swatch a div {

    height: 90px;
    position: relative;
    top:2em;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;

  }

  .swatch #card1 {
    transform: rotate(0deg);
    background-image: url("../images/languages/french-resp.jpg");
    animation: slideInLeft 2s ease;
  }
  .swatch #card2 {
    transform: rotate(0deg);
    background-image: url("../images/languages/spanish-resp.jpg");
    animation: slideInRight 2s ease;
  }
  .swatch #card3 {
    transform: rotate(0deg);
    background-image: url("../images/languages/german-resp.jpg");
    animation: slideInLeft 2s ease;
  }
  .swatch #card4 {
    transform: rotate(0deg);
    background-image: url("../images/languages/japanese-resp.jpg");
    animation: slideInRight 2s ease;
  }
  .swatch #card5 {
    transform: rotate(0deg);
    background-image: url("../images/languages/chinese-resp.jpg");
    animation: slideInLeft 2s ease;
  }
  .swatch #card6 {
    transform: rotate(0deg);
    background-image: url("../images/languages/english-resp.jpg");
    animation: slideInRight 2s ease;
  }

  @keyframes slideInLeft {
    0%{
      transform: translateX(-40%);
    }
    100%{
      transform: translateX(0%);
    }
  }

  @keyframes slideInRight {
    0%{
      transform: translateX(40%);
    }
    100%{
      transform: translateX(0%);
    }
  }
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

@media only screen and (max-width: 545px){
  @keyframes slideInLeft {
    0%{
      transform: translateX(-20%);
    }
    100%{
      transform: translateX(0%);
    }
  }

  @keyframes slideInRight {
    0%{
      transform: translateX(20%);
    }
    100%{
      transform: translateX(0%);
    }
  }
}

@media screen and (max-width: 512px){
  .box{
    width: 90%;
  }
  .popup{
    width: 90%;
  }
}

@media only screen and (max-width: 425px){
  @keyframes slideInLeft {
    0%{
      transform: translateX(-7%);
    }
    100%{
      transform: translateX(0%);
    }
  }

  @keyframes slideInRight {
    0%{
      transform: translateX(7%);
    }
    100%{
      transform: translateX(0%);
    }
  }
} 

@media screen and (max-width: 400px){
  .popup h2{
    font-size: 1.3em;
  }
}