fahne.php

Quell Code

<style>
  .alles{
    background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGuyMtZMAaXX8Ckz3j60MdNTKer4x-mGIHiQD6irfXI2oSQd0EQ');
}

#alles{
  border:2px solid black;
  height:404px;
  width:606px;
  display:block;

  background-repeat:no-repeat;
  background-size:contain;
  display:flex;
  flex-wrap:wrap;
}
.fahnebox{
  height:200px;
  width:200px;
  display:block;
  border:1px solid black;
}
.fahnebox:hover{
  background:rgba(255,255,1,0.7);
  cursor:pointer;
}
#gross{
   border:2px solid black;
  position:fixed;
  top:20px;
  left:20px;
  z-index:22;
    height: 404px;
    width: 604px;
  display:none;
  /*
  background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGuyMtZMAaXX8Ckz3j60MdNTKer4x-mGIHiQD6irfXI2oSQd0EQ');
  */
  background-repeat:no-repeat;
  background-size:300% 200%;
  background-position:-1200px -400px;
  flex-wrap:wrap;
}
.minifahne{
  height:20px;
  width:20px;
  border:1px solid black;
  display:block;
}
.minifahne:hover{
  background:rgba(111,111,111,0.7);
  cursor:pointer;
}
#gross:after{
  height:40px;
  width:40px;
  display:block;
  content:'X';
  position:absolute;
  right:-45px;
  line-height:40px;
  font-size:30px;
  border:2px solid black;
  box-shadow:2px 2px 2px black;
  border-radius:50%;
  text-align:center;
  background:lightgrey;
  cursor:pointer;
}
#gross:after::hover{
  content:'';
  background:green;
  color:white;
}
/* formular */
  .formular{
    height: calc(80vh - 20px);
    width:calc(80vw - 20px);
    background:rgba(21,12,162,0.9);
    color:white;
    top:10vh;
    text-align:center;
    transition:1000ms all;
    position:absolute;
    left:-100vw;
    padding:10px;
    border-radius:23px;
    overflow:auto;
    border:8px solid black;
    margin:0 10vw;
 box-shadow:4px 4px  4px black;
}
 .formular::-webkit-scrollbar{
      width:20px;height:30px
 }
 .formular::-webkit-scrollbar-thumb{
      border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
      background:linear-gradient(to bottom,#008aff,#111b55);
  }
 .formular::-webkit-scrollbar-track{
       background:linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);
   border-top-right-radius: 20px;
  }
  #close{
    position:absolute;
    top:0px;
    left:0px;
    width:35px;
    height:35px;
    border:2px solid white;
    background:grey;
    font-size:33px;
    cursor:pointer;
    border-top-left-radius:20px;
    border-bottom-right-radius:10px;
  }
  #close:hover{
    background:lightgrey;
    color:red;
  }











@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Cairo");
*{box-sizing:border-box}
/*
.container,body,li,ul{display:flex;align-items:center;justify-content:center}
body{font-family:sans-serif;width:100%;background:#eee;flex-direction:column}

li,ul{margin:0;padding:0;list-style:none}
ul{flex-wrap:wrap;margin-top:20px}

li{margin:.5em;padding:.5em 1em;background:#fff}.container,li{flex-direction:column}.text{width:900px}.flag{width:180px;height:120px;overflow:hidden;border:1px solid #efefef}h1{font-weight:400;color:#639;font-size:2em}h2{font-size:.75em;color:#d3d3d3}h2,h3{font-weight:700}h3{text-align:center;font-size:.65em;text-transform:uppercase}a,h3{color:#708090}a{font-size:1em}


*/
body{
  height:100vh;
  width:100vw;
}
.algeria{background:linear-gradient(90deg,#006232,#006232 50%,#fff 0,#fff);position:relative}.algeria:before{content:"";border-radius:50%;left:0;right:0;width:50px;height:50px;background:transparent;box-shadow:-9px 0 0 8px #d21034;top:35px;right:-10px}

.algeria:after,.algeria:before{position:absolute;margin-left:auto;margin-right:auto}.algeria:after{content:"?";left:0;right:0;color:#d21034;font-size:2em;transform:rotate(20deg);top:calc(50% - 12px);left:calc(50% - 5px)}

.armenia{background:linear-gradient(180deg,#d90012,#d90011 33.33333%,#0033a0 33.33333%,#0033a0 66.66667%,#f2a800 66.66667%,#f2a800)}

.austria{background:linear-gradient(180deg,#ed2939,#ed2939 33.33333%,#fff 33.33333%,#fff 66.66667%,#ed2939 66.66667%,#ed2939)}

.azerbaijan{background:linear-gradient(180deg,#00b5e2,#00b5e2 33.33333%,#ef3340 33.33333%,#ef3340 66.66667%,#509e2f 66.66667%,#509e2f);position:relative}

.azerbaijan:before{position:absolute;content:"";border-radius:50%;left:0;margin-left:auto;right:0;margin-right:auto;background:transparent;width:30px;height:30px;top:calc(50% - 15px);left:-6px;box-shadow:-4px 0 0 3px #fff}

.azerbaijan:after{position:absolute;content:"?";color:#fff;font-size:24px;transform:rotate(22deg);top:calc(50% - 13px);left:52%}.bahamas{background:linear-gradient(146deg,#000 25%,transparent 0) 0 -60px,linear-gradient(34deg,#000 25%,transparent 0) 0 -60px,linear-gradient(180deg,#00abc9,#00abc9 33.33333%,#fae042 33.33333%,#fae042 66.66667%,#00abc9 66.66667%,#00abc9);background-size:180px 120px}.bahrain{background:linear-gradient(90deg,#fff,#fff 25%,#ce1126 0,#ce1126);position:relative}.bahrain:before{position:absolute;content:"";width:24px;height:100%;background:linear-gradient(154deg,#fff 32%,transparent 0) 0 12px,linear-gradient(24deg,#fff 32%,transparent 0) 0 36px;background-size:24px 24px;left:44px;top:0}.bangladesh{background:radial-gradient(110px at 40% 50%,#f42a41 0,#f42a41 35%,transparent 0,transparent 100%),#006a4e}.barbados{background:linear-gradient(90deg,#00267f,#00267f 33.33333%,#ffc726 33.33333%,#ffc726 66.66667%,#00267f 66.66667%,#00267f);position:relative}.barbados:before{position:absolute;content:"?";font-size:3em;left:calc(50% - 18px);top:26px}.belgium{background:linear-gradient(90deg,#000,#000 33.33333%,#fae042 33.33333%,#fae042 66.66667%,#ed2939 66.66667%,#ed2939)}.benin{background:linear-gradient(90deg,#008751,#008751 40%,transparent 0,transparent),linear-gradient(180deg,#fcd116,#fcd116 50%,#e8112d 0,#e8112d)}.bolivia{background:linear-gradient(180deg,#d52b1e,#d52b1e 33.33333%,#ffe000 33.33333%,#ffe000 66.66667%,#007934 66.66667%,#007934)}.botswana{background:linear-gradient(0deg,#75aadb,#75aadb 35%,#fff 0,#fff 40%,#000 0,#000 60%,#fff 0,#fff 65%,#75aadb 0,#75aadb)}.brazil{background:linear-gradient(149deg,#009b3a 30%,transparent 0),linear-gradient(-149deg,#009b3a 30%,transparent 0),linear-gradient(-30deg,#009b3a 30%,transparent 0),linear-gradient(30deg,#009b3a 30%,transparent 0),radial-gradient(90px at 50% 50%,transparent 0,transparent 35%,#fedf00 0,#fedf00 100%),radial-gradient(180px at 40% 96%,transparent 0,transparent 35%,#fff 0,#fff 39%,transparent 0,transparent 100%),#002776;overflow:hidden}.bulgaria{background:linear-gradient(180deg,#fff,#fff 33.33333%,#00966e 33.33333%,#00966e 66.66667%,#d62612 66.66667%,#d62612)}.burkina{background:linear-gradient(180deg,#ef2b2d,#ef2b2d 50%,#009e49 0,#009e49);position:relative}.burkina:after{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;top:calc(50% - 26px);font-size:36px;color:#fcd116}.burundi{background:radial-gradient(100px at 50% 50%,#fff 0,#fff 35%,transparent 0,transparent 100%),linear-gradient(146deg,#ce1126 20%,transparent 0) 90px -118px,linear-gradient(-146deg,#ce1126 20%,transparent 0) 90px -118px,linear-gradient(-34deg,#ce1126 20%,transparent 0) 90px 118px,linear-gradient(34deg,#ce1126 20%,transparent 0) 90px 118px,linear-gradient(146deg,#1eb53a 20%,transparent 0) 0 -60px,linear-gradient(34deg,#1eb53a 20%,transparent 0) 0 -60px,linear-gradient(-146deg,#1eb53a 20%,transparent 0) 180px -60px,linear-gradient(-34deg,#1eb53a 20%,transparent 0) 180px -60px,#fff;position:relative}.burundi:before{content:"?";top:36px}.burundi:after,.burundi:before{position:absolute;font-size:18px;-webkit-text-stroke:.5px #1eb53a;width:180px;height:120px;text-align:center;color:#ce1126}.burundi:after{content:"?   ?";top:60px}.cameroon{background:linear-gradient(90deg,#007a5e,#007a5e 33.33333%,#ce1126 33.33333%,#ce1126 66.66667%,#fcd116 66.66667%,#fcd116);position:relative}.cameroon:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;color:#fcd116;font-size:26px;top:35%}.central-african-republic{background:linear-gradient(90deg,transparent 0,transparent 42%,#d21034 0,#d21034 58%,transparent 0,transparent),linear-gradient(180deg,#003082,#003082 25%,#fff 0,#fff 50%,#289728 0,#289728 75%,#ffce00 0,#ffce00);position:relative}.central-african-republic:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;color:#ffce00;font-size:22px;left:15px}.chad{background:linear-gradient(90deg,#002664,#002664 33.33333%,#fecb00 33.33333%,#fecb00 66.66667%,#c60c30 66.66667%,#c60c30)}.chile{background:linear-gradient(180deg,#fff,#fff 50%,#d52b1e 0,#d52b1e);position:relative}.chile:after{position:absolute;content:"?";box-sizing:border-box;color:#fff;font-size:26px;text-align:center;background:#0039a6;height:60px;width:60px;left:0;padding-top:10px}.colombia{background:linear-gradient(180deg,#fcd116 0,#fcd116 50%,#003893 0,#003893 75%,#ce1126 0,#ce1126)}.comoros{background:linear-gradient(146deg,#3d8e33 25%,transparent 0) 0 -60px,linear-gradient(34deg,#3d8e33 25%,transparent 0) 0 -60px,linear-gradient(180deg,#ffc61e 0,#ffc61e 25%,#fff 0,#fff 50%,#ce1025 0,#ce1126 75%,#3a75c4 0,#3a75c4);position:relative;background-size:180px 120px}.comoros:before{position:absolute;content:"";border-radius:50%;height:50px;width:50px;left:20px;top:36px;box-shadow:-10px 0 0 0 #fff}.comoros:after{position:absolute;content:"?  ?  ?  ?";color:#fff;width:8px;font-size:8px;top:40px;left:34px}.costa-rica{background:linear-gradient(180deg,#002a7f 15%,#fff 0,#fff 35%,#ce1126 0,#ce1126 65%,#fff 0,#fff 85%,#002b7f 0,#002b7f)}.cote-d-ivoire{background:linear-gradient(90deg,#f77f00 33.33333%,#fff 33.33333%,66.66667%,#009e60 66.66667%,#009e60)}.cuba{background:linear-gradient(146deg,#cf142b 25%,transparent 0) 0 -60px,linear-gradient(34deg,#cf142b 25%,transparent 0) 0 -60px,linear-gradient(180deg,#002a8f 20%,#fff 0,#fff 40%,#002a8f 0,#002a8f 60%,#fff 0,#fff 80%,#002a8f 0,#002a8f);background-size:180px 120px;position:relative}.cuba:before{position:absolute;content:"?";color:#fff;font-size:24px;top:42px;left:20px}.czech-republic{background:linear-gradient(146deg,#11457e 25%,transparent 0) 0 -60px,linear-gradient(34deg,#11457e 25%,transparent 0) 0 -60px,linear-gradient(180deg,#fff 50%,#d7141a 0);background-size:180px 120px}.democratic-republic-of-congo{background:linear-gradient(146deg,#007fff,#007fff 45%,#f7d618 0,#f7d618 50%,#ce1021 0,#ce1021 60%,#f7d618 0,#f7d618 65%,#007fff 0,#007fff);position:relative}.democratic-republic-of-congo:before{position:absolute;content:"?";color:#f7d618;font-size:36px;top:10px;left:20px}.denmark{background:linear-gradient(180deg,transparent 40%,#fff 0,#fff 55%,transparent 0,transparent),linear-gradient(90deg,transparent 30%,#fff 0,#fff 40%,transparent 0,transparent),#c60c30}.djibouti{background:linear-gradient(146deg,#fff 25%,transparent 0) 0 -60px,linear-gradient(34deg,#fff 25%,transparent 0) 0 -60px,linear-gradient(180deg,#6ab2e7 50%,#12ad2b 0);background-size:180px 120px;position:relative}

.djibouti:before{position:absolute;content:"?";color:#d7141a;font-size:30px;top:40px;left:16px}.east-timor{background:linear-gradient(145deg,#000 25%,transparent 0) 0 -60px,linear-gradient(34deg,#000 25%,transparent 0) 0 -60px,linear-gradient(155deg,#ffc726 30%,transparent 0) 0 -60px,linear-gradient(25deg,#ffc726 30%,transparent 0) 0 -60px,#dc241f;position:relative}.east-timor:before{position:absolute;content:"?";color:#fff;font-size:36px;top:36px;left:16px;transform:rotate(115deg)}.estonia{background:linear-gradient(180deg,#4891d9 33.33333%,#000 33.33333%,#000 66.66667%,#fff 66.66667%)}.finland{background:linear-gradient(180deg,transparent 35%,#003580 0,#003580 60%,transparent 0),linear-gradient(90deg,transparent 30%,#003580 0,#003480 45%,transparent 0),#fff}.france{background:linear-gradient(90deg,#002395 33.33333%,#fff 33.33333%,#fff 66.66667%,#ed2939 66.66667%)}.gabon{background:linear-gradient(180deg,#009e60 33.33333%,#fcd116 33.33333%,#fcd116 66.66667%,#3a75c4 66.66667%)}.the-gambia{background:linear-gradient(180deg,#ce1126 30%,#fff 0,#fff 35%,#0c1c8c 0,#0c1c8c 65%,#fff 0,#fff 70%,#3a7728 0)}.germany{background:linear-gradient(180deg,#000 33.33333%,#d00 33.33333%,#d00 66.66667%,#ffce00 66.66667%)}.ghana{background:linear-gradient(180deg,#ce1126 33.33333%,#fcd116 33.33333%,#fcd116 66.66667%,#006b3f 66.66667%);position:relative}.ghana:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;color:#000;text-align:center;font-size:40px;top:calc(50% - 27px)}.greece{background-image:repeating-linear-gradient(180deg,#0d5eaf,#0d5eaf 13.33333px,#fff 13.33333px,#fff 26.66667px);position:relative}.greece:before{position:absolute;content:"";width:66.66667px;height:66.66667px;background:linear-gradient(180deg,transparent 26.66667px,#fff 26.66667px,#fff 40px,transparent 40px),linear-gradient(90deg,transparent 26.66667px,#fff 26.66667px,#fff 40px,transparent 40px),#0d5eaf}.guinea{background:linear-gradient(90deg,#ce1126 33.33333%,#fcd116 33.33333%,#fcd116 66.66667%,#009460 66.66667%)}.guinea-bissau{background:linear-gradient(90deg,#ce1126 35%,transparent 0),linear-gradient(180deg,#fcd116 50%,#009e49 0);position:relative}.guinea-bissau:before{position:absolute;content:"?";color:#000;font-size:40px;top:calc(50% - 27px);left:10px}.guyana{background:linear-gradient(149deg,#ce1126 24%,transparent 0) 0 -60px,linear-gradient(31deg,#ce1126 24%,transparent 0) 0 -60px,linear-gradient(149deg,#000 26%,transparent 0) 0 -60px,linear-gradient(31deg,#000 26%,transparent 0) 0 -60px,linear-gradient(160deg,#fcd116 32%,transparent 0) 0 -60px,linear-gradient(20deg,#fcd116 32%,transparent 0) 0 -60px,linear-gradient(161deg,#fff 34%,transparent 0) 0 -60px,linear-gradient(19deg,#fff 34%,transparent 0) 0 -60px,#009e49}.hungary{background:linear-gradient(180deg,#cd2a3e 33.33333%,#fff 33.33333%,#fff 66.66667%,#436f4d 66.66667%)}.iceland{background:linear-gradient(180deg,transparent 43%,#d72828 0,#d72828 54%,transparent 0),linear-gradient(90deg,transparent 34%,#d72828 0,#d72828 41%,transparent 0),linear-gradient(90deg,transparent 30%,#fff 0,#fff 45%,transparent 0),linear-gradient(180deg,transparent 38%,#fff 0,#fff 59%,transparent 0),#003897}.india{background:radial-gradient(circle,transparent 16.66667%,navy 19.66667%,transparent 19.66667%),linear-gradient(180deg,#f93 33.33333%,#fff 33.33333%,#fff 66.66667%,#138808 66.66667%);position:relative}

.india:before{position:absolute;padding:0;content:"?";font-size:48px;line-height:42px;text-align:center;font-weight:100;height:33.33333%;top:0;bottom:0;left:0;right:0;margin:auto;color:navy}.indonesia{background:linear-gradient(180deg,#ce1126 50%,#fff 0)}.iran{background:linear-gradient(180deg,#239f40 33.33333%,#fff 33.33333%,#fff 66.66667%,#da0000 66.66667%);position:relative}.iran:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;font-size:44px;text-align:center;font-weight:700;color:#da0000;top:22%}.iraq{background:linear-gradient(180deg,#ce1126 33.33333%,#fff 33.33333%,#fff 66.66667%,#000 66.66667%);position:relative}.iraq:before{position:absolute;content:"???? ????";left:0;margin-left:auto;right:0;margin-right:auto;font-family:Cairo,sans-serif;font-size:20px;text-align:center;font-weight:700;color:#449d71;top:36%}.ireland{background:linear-gradient(90deg,#169b62 33.33333%,#fff 33.33333%,#fff 66.66667%,#ff883e 66.66667%)}.israel{background:linear-gradient(180deg,transparent 15%,#0038b8 0,#0038b8 30%,transparent 0,transparent 70%,#0038b8 0,#0038b8 85%,transparent 0),#fff;position:relative}.israel:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;top:28%;font-size:48px;font-weight:700;-webkit-text-stroke:1px #0038b8;color:#0038b8}.italy{background:linear-gradient(90deg,#009246 33.33333%,#fff 33.33333%,#fff 66.66667%,#ce2b37 66.66667%)}.jamaica{background:linear-gradient(146deg,#009b3a 20%,transparent 0) 90px -118px,linear-gradient(-146deg,#009b3a 20%,transparent 0) 90px -118px,linear-gradient(-34deg,#009b3a 20%,transparent 0) 90px 118px,linear-gradient(34deg,#009b3a 20%,transparent 0) 90px 118px,linear-gradient(146deg,#000 20%,transparent 0) 0 -60px,linear-gradient(34deg,#000 20%,transparent 0) 0 -60px,linear-gradient(-146deg,#000 20%,transparent 0) 180px -60px,linear-gradient(-34deg,#000 20%,transparent 0) 180px -60px,#fed100}.japan{background:radial-gradient(100px at 50% 50%,#bc002d 0,#bc002d 35%,transparent 0,transparent 100%),#fff}.kuwait{background:#fff;border-left:50px solid #000;border-top:35px solid #007a3d;border-bottom:35px solid #ce1126}.laos{background:radial-gradient(70px at 50% 50%,#fff 0,#fff 35%,transparent 0,transparent 100%),linear-gradient(180deg,#ce1126 25%,#002868 0,#002868 75%,#ce1126 0)}.latvia{background:linear-gradient(180deg,#9e3039 40%,#fff 0,#fff 60%,#9e3039 0)}.liberia{background:repeating-linear-gradient(180deg,#bf0a30,#bf0a30 10.90909px,#fff 10.9090909091px,#fff 21.8181818182px);position:relative}.liberia:before{position:absolute;content:"?";color:#fff;font-size:24px;box-sizing:border-box;background:#002868;text-align:center;padding-top:10px;width:54.54545px;height:54.54545px}.libya{background:radial-gradient(45px at 52% 50%,#000 0,#000 35%,transparent 0,transparent 100%),radial-gradient(50px at 50% 50%,#fff 0,#fff 35%,transparent 0,transparent 100%),linear-gradient(180deg,#e70013 25%,#000 0,#000 75%,#239e46 0);position:relative}.libya:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;color:#fff;text-align:center;top:40%;left:20%;transform:rotate(45deg)}.lithuania{background:linear-gradient(180deg,#fdb913 33.33333%,#006a44 33.33333%,#006a44 66.66667%,#c1272d 66.66667%)}

.luxembourg{background:linear-gradient(180deg,#ed2939 33.33333%,#fff 33.33333%,#fff 66.66667%,#00a1de 66.66667%)}.madagascar{background:linear-gradient(90deg,#fff 30%,transparent 0),linear-gradient(180deg,#fc3d32 50%,#007e3a 0)}.malaysia{background:repeating-linear-gradient(180deg,#bf0a30,#bf0a30 9.23077px,#fff 9.2307692308px,#fff 18.4615384615px);position:relative}.malaysia:before{position:absolute;content:"?";color:#fc0;font-size:48px;box-sizing:border-box;background:radial-gradient(65px at 50% 50%,#010066 0,#010066 35%,transparent 0,transparent 100%),radial-gradient(75px at 42% 50%,#fc0 0,#fc0 35%,transparent 0,transparent 100%),#010066;text-align:center;padding-top:5px;padding-left:36px;width:90px;height:64.61538px}.maldives{border:30px solid #d21034;background:radial-gradient(55px at 55% 50%,#007e3a 0,#007e3a 35%,transparent 0,transparent 100%),radial-gradient(60px at 50% 50%,#fff 0,#fff 35%,transparent 0,transparent 100%),#007e3a}.mali{background:linear-gradient(90deg,#14b53a 33.33333%,#fcd116 33.33333%,#fcd116 66.66667%,#ce1126 66.66667%)}.mauritania{background:radial-gradient(120px at 50% 30%,#006233 0,#006233 35%,transparent 0,transparent 100%),radial-gradient(120px at 50% 40%,#ffc400 0,#ffc400 35%,transparent 0,transparent 100%),#006233;position:relative}.mauritania:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;font-size:24px;color:#ffc400;text-align:center;top:15%}.mauritius{background:linear-gradient(180deg,#ea2839 25%,#1a206d 0,#1a206d 50%,#ffd500 0,#ffd500 75%,#00a551 0)}.monaco{background:linear-gradient(180deg,#ce1126 50%,#fff 0)}.myanmar{background:linear-gradient(180deg,#fecb00 33.33333%,#34b233 33.33333%,#34b233 66.66667%,#ea2839 66.66667%);position:relative}

.myanmar:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;color:#fff;font-size:64px;text-align:center;top:10px}.namibia{background:linear-gradient(146deg,#003580 45%,#fff 0,#fff 50%,#d21034 0,#d21034 60%,#fff 0,#fff 65%,#009543 0);position:relative}.namibia:before{position:absolute;content:"?";color:#ffce00;font-size:64px;left:10px}.namibia:after{position:absolute;content:"";border-radius:50%;height:24px;width:24px;background:#ffce00;border:3px solid #003580;top:22px;left:20px}.nauru{background:linear-gradient(180deg,transparent 45%,#ffc61e 0,#ffc61e 55%,transparent 0),#002b7f;position:relative}.nauru:before{position:absolute;content:"?";color:#fff;font-size:44px;left:30px;top:60px}.nepal{background:radial-gradient(44px at 16% 34%,#dc1038 0,#dc143c 35%,transparent 0,transparent 100%),radial-gradient(44px at 16% 39%,#fff 0,#fff 35%,transparent 0,transparent 100%),linear-gradient(40deg,#dc143c 30%,transparent 0) 4px -6px,linear-gradient(33deg,#dc143c 25%,transparent 0) 4px -54px,linear-gradient(40deg,#003893 36%,transparent 0),linear-gradient(33deg,#003893 30%,transparent 0) 0 -50px;background-size:180px 120px;position:relative}.nepal:before{font-size:48px;bottom:4px;left:10px}.nepal:after,.nepal:before{position:absolute;content:"?";color:#fff}.nepal:after{font-size:28px;top:36px;left:18px}.the-netherlands{background:linear-gradient(180deg,#ae1c28 33.33333%,#fff 33.33333%,#fff 66.66667%,#21468b 66.66667%)}.new-zealand{background:#00247d;background-size:100px 100px;position:relative}.new-zealand:before{position:absolute;content:"";top:0;left:0;background:linear-gradient(180deg,transparent 40%,#cc142b 0,#cc142b 60%,transparent 0),linear-gradient(90deg,transparent 45%,#cc142b 0,#cc142b 55%,transparent 0),linear-gradient(180deg,transparent 35%,#fff 0,#fff 65%,transparent 0),linear-gradient(90deg,transparent 40%,#fff 0,#fff 60%,transparent 0),linear-gradient(146deg,transparent 50%,#cc142b 0,#cc142b 53%,transparent 0) -45px 31px,linear-gradient(146deg,transparent 50%,#cc142b 0,#cc142b 53%,transparent 0) 46px -35px,linear-gradient(34deg,transparent 50%,#cc142b 0,#cc142b 53%,transparent 0) -51px -31px,linear-gradient(34deg,transparent 50%,#cc142b 0,#cc142b 53%,transparent 0) 48px 32px,linear-gradient(146deg,transparent 45%,#fff 0,#fff 55%,transparent 0),linear-gradient(34deg,transparent 45%,#fff 0,#fff 55%,transparent 0);background-size:90px 60px;width:90px;height:60px;background-repeat:no-repeat}

.niger{background:radial-gradient(50px at 50% 50%,#e05206 0,#e05206 35%,transparent 0,transparent 100%),linear-gradient(180deg,#e05206 33.33333%,#fff 33.33333%,#fff 66.66667%,#0db02b 66.66667%)}.nigeria{background:linear-gradient(90deg,#008751 33.33333%,#fff 33.33333%,#fff 66.66667%,#008751 66.66667%)}.north-korea{background:radial-gradient(80px at 35% 50%,#fff,#fff 35%,transparent 0,transparent 100%),linear-gradient(180deg,#024fa2 15%,#fff 0,#fff 20%,#ed1c27 0,#ed1c27 80%,#fff 0,#fff 85%,#024fa2 0);position:relative}.north-korea:before{position:absolute;content:"?";color:#ed1c27;font-size:48px;left:38px;top:23px}.norway{background:linear-gradient(180deg,transparent 43%,#002868 0,#002868 54%,transparent 0),linear-gradient(90deg,transparent 28%,#002868 0,#002868 37%,transparent 0),linear-gradient(90deg,transparent 25%,#fff 0,#fff 40%,transparent 0),linear-gradient(180deg,transparent 38%,#fff 0,#fff 59%,transparent 0),#ef2b2d}.pakistan{background:radial-gradient(90px at 71% 42%,#01411c,#01411c 35%,transparent 0,transparent 100%),radial-gradient(100px at 65% 50%,#fff,#fff 35%,transparent 0,transparent 100%),linear-gradient(90deg,#fff 30%,#01411c 0);position:relative}.pakistan:before{position:absolute;content:"?";color:#fff;transform:rotate(40deg);font-size:24px;right:30px;top:25px}.palau{background:radial-gradient(100px at 40% 50%,#ffde00,#ffde00 35%,transparent 0,transparent 100%),#4aadd6}.panama{background:linear-gradient(90deg,#005293 50%,transparent 0),linear-gradient(#d21034 50%,transparent 0),#fff;position:relative}.panama:after,.panama:before{position:absolute;content:"?";box-sizing:border-box;background:#fff;font-size:32px;padding-left:15%;padding-top:4%;width:89px;height:59px}.panama:before{color:#005293}.panama:after{right:0;bottom:0;color:#d21034}.peru{background:linear-gradient(90deg,#d91023 33.33333%,#fff 33.33333%,#fff 66.66667%,#d91023 66.66667%)}.phillippines{background:linear-gradient(146deg,#fff 25%,transparent 0) 0 -60px,linear-gradient(34deg,#fff 25%,transparent 0) 0 -60px,linear-gradient(180deg,#0035a9 50%,#d00922 0);background-size:180px 120px;position:relative}.phillippines:before{position:absolute;content:"?";color:orange;font-size:2.25em;top:0;bottom:0;margin:auto 0;left:5%;height:1em}.poland{background:linear-gradient(180deg,#fff 50%,#dc143c 0)}.qatar{background:linear-gradient(90deg,#fff 25%,#8d1b3d 0);position:relative}.qatar:before{position:absolute;content:"";width:20px;height:100%;background:linear-gradient(160deg,#fff 30%,transparent 0) 0 7px,linear-gradient(20deg,#fff 30%,transparent 0) 0 7px;background-size:20px 13.18681px;left:44px;top:0}.republic-of-china{background:#fe0000;position:relative}

.republic-of-china:before{position:absolute;content:"?";box-sizing:border-box;color:#fff;background:#000095;padding-left:20px;top:0;width:90px;height:60px;font-size:56px}.republic-of-china:after{position:absolute;content:"";border-radius:50%;height:20px;width:20px;background:#fff;border:2px solid #000095;top:20px;left:30px}.republic-of-congo{background:linear-gradient(135deg,#009543 40%,#fbde4a 0,#fbde4a 60%,#d21034 0,#dc241f 0);position:relative}.romania{background:linear-gradient(90deg,#002b7f 33.33333%,#fcd116 33.33333%,#fcd116 66.66667%,#ce1126 66.66667%)}.russia{background:linear-gradient(180deg,#fff 33.33333%,#0039a6 33.33333%,#0039a6 66.66667%,#d52b1e 66.66667%)}.rwanda{background:linear-gradient(180deg,#00a1de 50%,#fad201 0,#fad201 75%,#20603d 0);position:relative}.rwanda:before{position:absolute;content:"?";right:20px;box-sizing:border-box;color:#e5be01;font-size:36px;top:10px}.rwanda:after{position:absolute;content:"";border-radius:50%;height:13px;width:13px;background:#e5be01;border:1px solid #00a1de;top:23px;right:26px}.saint-kitts-and-nevis{background:linear-gradient(145deg,#009e49 35%,#fcd116 0,#fcd116 40%,#000 0,#000 60%,#fcd116 0,#fcd116 65%,#ce1126 0);position:relative}.saint-kitts-and-nevis:after,.saint-kitts-and-nevis:before{position:absolute;content:"?";color:#fff;font-size:30px;transform:rotate(42deg)}.saint-kitts-and-nevis:before{right:40px;top:16px}.saint-kitts-and-nevis:after{left:40px;top:62px}.saint-lucia{background:linear-gradient(-45deg,#fcd116 14%,transparent 0) -89px -10px,linear-gradient(45deg,#fcd116 14%,transparent 0) 89px -10px,linear-gradient(-65deg,#000 16%,transparent 0) -89px -10px,linear-gradient(65deg,#000 16%,transparent 0) 89px -10px,linear-gradient(-65deg,#fff 18%,transparent 0) -89px -10px,linear-gradient(65deg,#fff 18%,transparent 0) 89px -10px,#6cf}.sao-tome-and-principe{background:linear-gradient(135deg,#d21034 20%,transparent 0) 0 -60px,linear-gradient(45deg,#d21034 20%,transparent 0) 0 -60px,linear-gradient(180deg,#12ad2b 33.33333%,#ffce00 33.33333%,#ffce00 66.66667%,#12ad2b 66.66667%);background-size:180px 120px;position:relative}.sao-tome-and-principe:before{position:absolute;content:"?  ?";color:#000;font-size:30px;right:12px;top:38px}.senegal{background:linear-gradient(90deg,#00853f 33.33333%,#fdef42 33.33333%,#fdef42 66.66667%,#e31b23 66.66667%);position:relative}

.senegal:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;color:#00853f;font-size:36px;top:30%}.seychelles{background:linear-gradient(170deg,transparent 79%,#007a3d 0),linear-gradient(160deg,transparent 65%,#fff 0),linear-gradient(141deg,transparent 45%,#d62828 0),linear-gradient(120deg,transparent 27%,#fcd856 0),#003f87}.sierra-leone{background:linear-gradient(180deg,#1eb53a 33.33333%,#fff 33.33333%,#fff 66.66667%,#0072c6 66.66667%)}.somalia{background:#4189dd;position:relative}.somalia:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;color:#fff;font-size:44px;top:24px}.south-sudan{background:linear-gradient(146deg,#0f47af 25%,transparent 0) 0 -60px,linear-gradient(34deg,#0f47af 25%,transparent 0) 0 -60px,linear-gradient(180deg,#000 30%,#fff 0,#fff 35%,#da121a 0,#da121a 65%,#fff 0,#fff 70%,#078930 0);background-size:180px 120px;position:relative}.south-sudan:before{position:absolute;content:"?";color:#fcdd09;font-size:30px;top:38px;left:18px;transform:rotate(45deg)}.sudan{background:linear-gradient(148deg,#007229 25%,transparent 0) 0 -60px,linear-gradient(33deg,#007229 25%,transparent 0) 0 -60px,linear-gradient(180deg,#d21034 33.33333%,#fff 33.33333%,#fff 66.66667%,#000 66.66667%);background-size:180px 120px}.suriname{background:linear-gradient(180deg,#377e3f 20%,#fff 0,#fff 30%,#b40a2d 0,#b40a2d 70%,#fff 0,#fff 80%,#377e3f 0);position:relative}.suriname:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;color:#ecc81d;font-size:40px;top:31px}.sweden{background:linear-gradient(90deg,transparent 30%,#fecc00 0,#fecc00 45%,transparent 0),linear-gradient(180deg,transparent 38%,#fecc00 0,#fecc00 59%,transparent 0),#006aa7}.switzerland{background:linear-gradient(180deg,transparent 33.33333%,#fff 33.33333%,#fff 66.66667%,transparent 0),linear-gradient(90deg,transparent 33.33333%,#fff 33.33333%,#fff 66.66667%,transparent 0),red;background-size:80px 80px;background-repeat:no-repeat;background-position:50px 20px}.syria{background:linear-gradient(180deg,#ce1126 33.33333%,#fff 33.33333%,#fff 66.66667%,#000 66.66667%);position:relative}.syria:before{position:absolute;content:"?      ?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;color:#007a3d;font-size:26px;top:40px}.tanzania{background:linear-gradient(145deg,#1eb53a 40%,#fcd116 0,#fcd116 43%,#000 0,#000 57%,#fcd116 0,#fcd116 60%,#00a3dd 0);position:relative}.thailand{background:linear-gradient(180deg,#ed1c24 15%,#fff 0,#fff 30%,#241d4f 0,#241d4f 70%,#fff 0,#fff 85%,#ed1c24 0)}.togo{background:repeating-linear-gradient(180deg,#006a4e,#006a4e 20%,#ffce00 20%,#ffce00 40%);position:relative}

.togo:before{position:absolute;content:"?";box-sizing:border-box;text-align:center;font-size:40px;padding-top:6px;color:#fff;background:#d21034;height:71px;width:71px}.tonga{background:#c10000;position:relative}.tonga:before{position:absolute;content:"";width:50%;height:50%;background:linear-gradient(180deg,transparent 33.33333%,#c10000 33.33333%,#c10000 66.66667%,transparent 0),linear-gradient(90deg,transparent 33.33333%,#c10000 33.33333%,#c10000 66.66667%,transparent 0),#fff;background-size:40px 40px;background-repeat:no-repeat;background-position:50% 10px}.trinidad-and-tobago{background:linear-gradient(45deg,transparent 40%,#fff 0,#fff 43%,#000 0,#000 57%,#fff 0,#fff 60%,transparent 0),#ce1126}.tunisia{background:radial-gradient(60px at 55% 50%,#fff 35%,transparent 0),radial-gradient(90px at 50% 50%,transparent 30%,#fff 0,#fff 36%,transparent 0),#e70013;position:relative}.tunisia:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;font-size:30px;color:#e70013;text-align:center;top:37px;left:23px;transform:rotate(45deg)}.turkey{background:radial-gradient(77px at 40% 50%,#e30a17 35%,transparent 0),radial-gradient(90px at 36% 50%,#fff 30%,#fff 36%,transparent 0),#e30a17;position:relative}

.turkey:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;font-size:28px;color:#fff;text-align:center;top:39px;left:28px;transform:rotate(45deg)}.ukraine{background:linear-gradient(180deg,#005bbb 50%,#ffd500 0)}.uae{background:linear-gradient(90deg,red 30%,transparent 0),linear-gradient(180deg,#00732f 33.33333%,#fff 33.33333%,#fff 66.66667%,#000 66.66667%)}.the-united-kingdom{background:#00247d;background-size:100px 100px;position:relative}.the-united-kingdom:before{position:absolute;content:"";top:0;left:0;background:linear-gradient(180deg,transparent 40%,#cc142b 0,#cc142b 60%,transparent 0),linear-gradient(90deg,transparent 45%,#cc142b 0,#cc142b 55%,transparent 0),linear-gradient(180deg,transparent 35%,#fff 0,#fff 65%,transparent 0),linear-gradient(90deg,transparent 40%,#fff 0,#fff 60%,transparent 0),linear-gradient(146deg,transparent 50%,#cc142b 0,#cc142b 53%,transparent 0) -65px 45px,linear-gradient(146deg,transparent 50%,#cc142b 0,#cc142b 53%,transparent 0) 55px -45px,linear-gradient(34deg,transparent 50%,#cc142b 0,#cc142b 53%,transparent 0) -75px -43px,linear-gradient(34deg,transparent 50%,#cc142b 0,#cc142b 53%,transparent 0) 70px 46px,linear-gradient(146deg,transparent 45%,#fff 0,#fff 55%,transparent 0),linear-gradient(34deg,transparent 45%,#fff 0,#fff 55%,transparent 0);width:180px;height:120px;background-repeat:no-repeat}.vietnam{background:#da251d;position:relative}.vietnam:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;color:#ff0;font-size:64px;top:14px}.western-sahara{background:radial-gradient(48px at 53% 50%,#fff 35%,transparent 0),radial-gradient(50px at 50% 50%,#d21034 35%,transparent 0),linear-gradient(135deg,#d21034 20%,transparent 0) 0 -60px,linear-gradient(45deg,#d21034 20%,transparent 0) 0 -60px,linear-gradient(180deg,#000 33.33333%,#fff 33.33333%,#fff 66.66667%,#007229 66.66667%);background-size:180px 120px;position:relative}.western-sahara:before{position:absolute;content:"?";left:0;margin-left:auto;right:0;margin-right:auto;text-align:center;font-size:20px;color:#d21034;top:46px;left:6px}.yemen{background:linear-gradient(180deg,#ce1126 33.33333%,#fff 33.33333%,#fff 66.66667%,#000 66.66667%)}

 


#w{
  display:none;
  height:400px;
  width:600px;
}
  
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<h3>Wähle ein Land</h3>
<div id="info"></div>
<select id="land">
</select><br>

<small>' Man könnte auch auf Heder Fahne 11.000 Felder legen ohne großen aufwamnd</small><br>
<div id="alles"  class="">
  <div id="zeilung1" data-feld="0px 0px" class="fahnebox" data-min="1" data-max="600"></div>
  <div id="zeilung2" data-feld="-620px 0px" class="fahnebox" data-min="601" data-max="1200"></div> 
  <div id="zeilung3" data-feld="-1240px 0px" class="fahnebox" data-min="1201" data-max="1800"></div> 
  <div id="zeilung4" data-feld="0px -420px" class="fahnebox" data-min="1801" data-max="2400"></div> 
  <div id="zeilung5" data-feld="-620px -420px" class="fahnebox" data-min="2401" data-max="3000"></div> 
  <div id="zeilung6" data-feld="-1240px -420px" class="fahnebox" data-min="3001" data-max="3600"></div>  
</div>
<div id="gross">
</div>
<div id='formular' class='formular'>
  <div id="close">X</div>
  <h1>Einkaufsformular für  Feld Nr. <span id="kaufid"></h1>
<form>
  <p><label>Name:    </label><i class="fa fa-user fa-lg fa-fw"></i> <input name="name" type="text" required="required"></p>
  <p><label>Nachname:    </label><i class="fa fa-paper-plane fa-lg fa-fw"></i> <input name="nachname" type="text" required="required">  </p>
  <p><label>Stadt    </label><i class="fa fa-home fa-lg fa-fw"></i> <input name="plz" type="text">  </p>
  <p> <label>Postleitzahl:   </label> <i class="fa fa-bars fa-lg fa-fw"></i> <input pattern="[0-9]{5}" name="plz" title="5stellige Zahl!">  </p>
  <p> <label>Website:     </label><i class="fa fa-at fa-lg fa-fw"></i> <input type="url" name="website" required="required">  </p>
  <p><label>E-Mail:   </label><i class="fa fa-envelope fa-lg fa-fw"></i> <input type="email" name="mail" required="required"></p>
  <p> <label>Telefon:    </label><i class="fa fa-phone fa-lg fa-fw"></i> <input type="tel" name="telefon">  </p>
  <p><label>Geburtsdatum:    </label><i class="fa fa-calendar-alt fa-lg fa-fw"></i> <input type="date" name="geburtstag"></p>
  <p><label>Geben sie einen Text an der in den gekauften Feld zu sehen ist:  <i class="fa fa-comment fa-lg fa-fw"></i> </label> <br><textarea name="anzeigetext" cols="30" rows="15" maxlength="1000" wrap="soft"></textarea> </p>
  <p>
    <label>Wie viel können sie Spenden:</label><i class="fa fa-question fa-lg fa-fw"></i> 
      <select name="spenden" style="width: 400px;">
        <option value="0">Leider Nix</option>
        <option value="10">Nicht mehr als 10 Euro</option>
        <option value="50" selected>Nicht mehr also 50</option>
        <option value="100">Nicht mehr also 100</option>
        <option value="500">Nicht mehr also 500</option>
        <option value="1000">Nicht mehr also 1000</option>
      </select> 
      <small>*  Angaben können später noch geändert werden</small>
  </p>
 <p><input type="hidden" name="id" id="hiddenid" value="5839"><input type="submit" value="Absenden"></p>
</form>
</div>
  <script>
 var aktuellesland='';
      var countries = ["algeria", "armenia","austria","azerbaijan","bahamas","bahrain","bangladesh", "barbados", "belgium", "benin", "bolivia", "botswana", "brazil", "bulgaria", "burkina faso", "burundi", "cameroon", "central-african-republic", "chad", "chile", "colombia", "comoros", "costa-rica", "cote-d-ivoire", "cuba", "czech-republic", "democratic-republic-of-congo", "denmark", "djibouti", "east-timor", "estonia", "finland", "france", "gabon", "the-gambia", "germany", "ghana", "greece", "guinea", "guinea-bissau", "guyana", "hungary", "iceland","india" ,"indonesia", "iran", "iraq", "ireland", "israel", "italy", "jamaica", "japan", "kuwait", "laos", "latvia", "liberia", "libya", "lithuania", "luxembourg", "madagascar", "malaysia", "maldives", "mali", "mauritania", "mauritius", "monaco", "myanmar", "namibia", "nauru", "nepal", "the-netherlands", "niger", "nigeria", "north-korea", "norway", "pakistan", "palau", "panama", "peru", "phillippines", "poland", "qatar", "republic-of-china", "republic-of-congo", "romania", "russia", "rwanda", "saint-kitts-and-nevis", "saint-lucia", "sao-tome-and-principe", "senegal", "seychelles", "sierra-leone", "somalia", "south-sudan", "sudan", "suriname", "sweden", "switzerland", "syria", "tanzania", "thailand", "togo", "tonga", "trinidad-and-tobago", "tunisia", "turkey", "ukraine", "uae", "the-united-kingdom", "vietnam", "western-sahara", "yemen"];
var sel='';
    document.getElementById('info').innerHTML='Aktuelle Anzahl Felder . '+countries.length*600;
for(h=0;h<=countries.length;h++){
     inp=document.getElementById('land');
     opti=document.createElement('option');
     opti.value=countries[h];
     opti.innerHTML=countries[h];
     inp.appendChild(opti);
}
document.getElementById('land').addEventListener('change',function(){
  $('#alles').attr('class',''); 
  $('#alles').addClass(this.value);
   aktuellesland=this.value;
  $('#gross').attr('class','');
  $('#gross').addClass(this.value);
})

var mengesperre=200;
var sperren=[];
for(v=0;v<=mengesperre;v++){ 
     ran=Math.floor((Math.random() * 3600) + 1);
     sperren.push('id'+ran);
}
$('#close').click(function(){
    $('#formular').css('left','-100vw');
})
$('#gross').after().click(function(){
    $('.minifahne').remove();
    $('#gross').css('display','none');
})
 
$('.fahnebox').click(function(){
      posi=$(this).data('feld');
      min=$(this).data('min');
      max=$(this).data('max');
      $('#gross').css({'display':'flex','background-position':''+posi+''})
      erstelle(min,max);
})

function erstelle(min,max){
    haupt=document.getElementById('gross');
    for(s=1;s<=30;s++){
       divs=document.createElement('div');
       haupt1=haupt.appendChild(divs);
       for(s1=1;s1<=20;s1++){
           min++;
           divs1=document.createElement('div');
           divs1.className='minifahne';
           divs1.id=aktuellesland+'id'+min;
           divs1.innerHTML='X';
           for(u=0;u<=mengesperre-1;u++){
               k='id'+min;
               if(sperren[u]==k){
                   //console.log(sperren[u]+'='+k)
                   divs1.style.background='orange';
                   divs1.style.cursor='not-allowed';
                   divs1.className='minifahne verkauft';
               }else{

               }
           } 
           clickbarmachen(divs1);
           haupt1.appendChild(divs1)
       }
   }
   function clickbarmachen(x){
       x.addEventListener('click',function(){
       vk=$(this).hasClass('verkauft');
       if(vk==true){
           console.log('schon verkauft');
           return;
       }
           kaufen=confirm('Wollen die dieses Feld kaufen');
           if(kaufen==true){
               document.getElementById('kaufid').innerHTML=x.id;
               document.getElementById('hiddenid').value=x.id;
               var items = document.getElementById('formular');
               items.style.left='0vw';
           }else{
     //alert('Dann nicht')
           }
       })
}
}
</script>