html, body {
    background-image: radial-gradient(ellipse at top right, #174e6f 0%, #080e21 95%);
    background: -webkit-radial-gradient(top right,#174e6f 0%, #080e21 95%);
}

.star {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1049px 24px #fff, 1337px 787px #fff, 935px 765px #fff, 1254px 956px #fff, 222px 54px #fff, 57px 553px #fff, 803px 305px #fff, 235px 695px #fff, 701px 529px #fff, 371px 256px #fff, 1787px 255px #fff, 1569px 366px #fff, 1686px 682px #fff, 641px 693px #fff, 1049px 377px #fff, 917px 648px #fff, 436px 988px #fff, 921px 629px #fff, 984px 680px #fff, 301px 748px #fff, 1895px 541px #fff, 276px 220px #fff, 760px 201px #fff, 1549px 916px #fff, 1408px 970px #fff, 1010px 992px #fff, 933px 408px #fff, 153px 356px #fff, 64px 151px #fff, 996px 264px #fff, 540px 823px #fff, 537px 651px #fff, 1395px 994px #fff, 1369px 759px #fff, 1343px 15px #fff, 1116px 308px #fff, 993px 650px #fff, 1571px 438px #fff, 197px 57px #fff, 927px 720px #fff, 628px 372px #fff, 1589px 548px #fff, 868px 611px #fff, 1461px 453px #fff, 1450px 995px #fff, 1614px 343px #fff, 491px 904px #fff, 1841px 235px #fff, 341px 947px #fff, 926px 513px #fff, 1410px 73px #fff, 62px 876px #fff, 376px 725px #fff, 1054px 706px #fff, 280px 763px #fff, 222px 989px #fff, 587px 73px #fff, 1142px 748px #fff, 1085px 409px #fff, 1904px 424px #fff, 549px 719px #fff, 577px 377px #fff, 1117px 147px #fff, 654px 985px #fff, 1188px 987px #fff, 42px 659px #fff, 146px 842px #fff, 1137px 516px #fff, 1572px 988px #fff, 302px 633px #fff, 771px 320px #fff, 738px 34px #fff, 481px 733px #fff, 81px 598px #fff, 888px 66px #fff, 227px 92px #fff, 1909px 219px #fff, 852px 975px #fff, 238px 14px #fff, 981px 173px #fff, 1839px 281px #fff, 1445px 985px #fff, 451px 940px #fff, 740px 182px #fff, 627px 268px #fff, 99px 586px #fff, 1747px 443px #fff, 501px 673px #fff, 1450px 578px #fff, 1704px 938px #fff, 1266px 810px #fff, 1416px 372px #fff, 1154px 990px #fff, 1375px 458px #fff, 1716px 652px #fff, 207px 82px #fff, 457px 89px #fff, 1125px 370px #fff, 590px 130px #fff, 814px 274px #fff, 705px 642px #fff, 350px 622px #fff, 1124px 431px #fff, 1449px 641px #fff, 1412px 384px #fff, 811px 730px #fff, 102px 786px #fff, 1302px 61px #fff, 1391px 256px #fff, 1701px 36px #fff, 1119px 976px #fff, 1273px 814px #fff, 423px 870px #fff, 100px 731px #fff, 616px 786px #fff, 289px 521px #fff, 1893px 220px #fff, 534px 238px #fff, 250px 812px #fff, 1338px 861px #fff, 405px 557px #fff, 1019px 734px #fff, 1891px 371px #fff, 419px 504px #fff, 478px 207px #fff, 647px 227px #fff, 530px 795px #fff, 833px 348px #fff, 1723px 74px #fff, 1737px 524px #fff, 3px 373px #fff, 1653px 149px #fff, 477px 222px #fff, 852px 162px #fff, 1275px 275px #fff, 1281px 240px #fff, 1107px 567px #fff, 374px 718px #fff, 1128px 846px #fff, 1514px 415px #fff, 14px 23px #fff, 36px 953px #fff, 79px 583px #fff, 1149px 128px #fff, 1375px 627px #fff, 421px 420px #fff, 807px 620px #fff, 213px 310px #fff, 1533px 217px #fff, 377px 384px #fff, 344px 18px #fff, 1200px 974px #fff, 268px 920px #fff, 1010px 660px #fff, 1235px 520px #fff, 1023px 191px #fff, 23px 130px #fff, 194px 287px #fff, 158px 317px #fff, 1902px 443px #fff, 330px 570px #fff, 1677px 727px #fff, 352px 838px #fff, 1680px 672px #fff, 1325px 516px #fff, 1392px 968px #fff, 283px 265px #fff, 223px 379px #fff, 517px 336px #fff, 1637px 848px #fff, 278px 597px #fff, 231px 253px #fff, 792px 991px #fff, 881px 354px #fff, 1597px 712px #fff, 1708px 645px #fff, 1559px 211px #fff, 1027px 127px #fff, 705px 791px #fff, 254px 972px #fff, 463px 474px #fff, 1764px 867px #fff, 112px 615px #fff, 853px 531px #fff, 1698px 88px #fff, 1090px 870px #fff, 1760px 528px #fff, 308px 19px #fff, 1856px 471px #fff, 800px 233px #fff, 705px 144px #fff, 795px 945px #fff, 1026px 835px #fff, 714px 908px #fff, 967px 547px #fff, 1176px 595px #fff, 1722px 488px #fff, 150px 279px #fff, 667px 557px #fff, 1804px 645px #fff, 1550px 707px #fff, 448px 163px #fff, 1394px 110px #fff, 1870px 928px #fff, 157px 494px #fff, 1700px 554px #fff, 1127px 740px #fff, 540px 256px #fff, 1152px 33px #fff, 1238px 362px #fff, 1759px 95px #fff, 622px 814px #fff, 156px 375px #fff, 1004px 400px #fff, 511px 153px #fff, 1728px 243px #fff, 1461px 13px #fff, 1387px 431px #fff, 46px 807px #fff, 776px 61px #fff, 128px 99px #fff, 815px 982px #fff, 861px 211px #fff, 1159px 419px #fff, 1740px 183px #fff, 1528px 653px #fff, 1835px 811px #fff, 1904px 344px #fff, 1816px 377px #fff, 238px 589px #fff, 597px 820px #fff, 655px 470px #fff, 1576px 451px #fff, 1240px 71px #fff, 764px 940px #fff, 882px 77px #fff, 1114px 525px #fff, 1148px 849px #fff, 1557px 590px #fff, 201px 225px #fff, 385px 29px #fff, 372px 38px #fff, 443px 279px #fff, 63px 794px #fff, 290px 58px #fff, 22px 702px #fff, 405px 977px #fff, 991px 796px #fff, 1601px 723px #fff, 1655px 383px #fff, 1786px 406px #fff, 178px 665px #fff, 408px 246px #fff, 817px 669px #fff, 1803px 766px #fff, 453px 117px #fff, 1595px 649px #fff, 1290px 797px #fff, 427px 131px #fff, 1422px 342px #fff, 1418px 782px #fff, 19px 806px #fff, 84px 217px #fff, 342px 593px #fff, 265px 765px #fff, 1235px 372px #fff, 1319px 322px #fff, 749px 864px #fff, 981px 971px #fff, 947px 473px #fff, 911px 850px #fff, 1634px 149px #fff, 1245px 146px #fff, 1609px 425px #fff, 698px 693px #fff, 1883px 46px #fff, 1429px 135px #fff, 195px 731px #fff, 280px 662px #fff, 144px 797px #fff, 827px 173px #fff, 1035px 231px #fff, 1786px 1px #fff, 133px 62px #fff, 767px 249px #fff, 589px 358px #fff, 1318px 186px #fff, 1719px 729px #fff, 1760px 682px #fff, 201px 923px #fff, 1018px 11px #fff, 1525px 129px #fff, 1730px 507px #fff, 75px 944px #fff, 1578px 62px #fff, 1667px 401px #fff, 1255px 311px #fff, 99px 639px #fff, 1708px 289px #fff, 73px 44px #fff;
}

.meteor-1 {
    position: absolute;
    top: 120px;
    left: 57%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 8.4s linear infinite;
}
.meteor-1:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-2 {
    position: absolute;
    top: 183px;
    left: 31%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 7.4s linear infinite;
}
.meteor-2:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-3 {
    position: absolute;
    top: 101px;
    left: 65%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 5.4s linear infinite;
}
.meteor-3:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-4 {
    position: absolute;
    top: 150px;
    left: 28%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 4.3s linear infinite;
}
.meteor-4:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-5 {
    position: absolute;
    top: 227px;
    left: 27%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 6.6s linear infinite;
}
.meteor-5:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-6 {
    position: absolute;
    top: 64px;
    left: 91%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 7.3s linear infinite;
}
.meteor-6:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-7 {
    position: absolute;
    top: 107px;
    left: 34%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 6.4s linear infinite;
}
.meteor-7:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-8 {
    position: absolute;
    top: 192px;
    left: 72%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 3.6s linear infinite;
}
.meteor-8:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-9 {
    position: absolute;
    top: 212px;
    left: 36%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 7.4s linear infinite;
}
.meteor-9:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-10 {
    position: absolute;
    top: 287px;
    left: 81%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 3.9s linear infinite;
}
.meteor-10:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-11 {
    position: absolute;
    top: 72px;
    left: 80%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 6.6s linear infinite;
}
.meteor-11:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-12 {
    position: absolute;
    top: 193px;
    left: 53%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 3.8s linear infinite;
}
.meteor-12:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-13 {
    position: absolute;
    top: 223px;
    left: 67%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 7.3s linear infinite;
}
.meteor-13:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-14 {
    position: absolute;
    top: 235px;
    left: 79%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 9.1s linear infinite;
}
.meteor-14:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
.meteor-15 {
    position: absolute;
    top: 56px;
    left: 83%;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 7.2s linear infinite;
}
.meteor-15:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 15px 3px #fff;
}
@keyframes meteor {
    0% {
        opacity: 1;
        margin-top: -300px;
        margin-right: -300px;
   }
    12% {
        opacity: 0;
   }
    15% {
        margin-top: 300px;
        margin-left: -600px;
        opacity: 0;
   }
    100% {
        opacity: 0;
   }
}


.wrapper {
    width: 300px;
    height: 350px;
    background: white;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0;
    transform: scale(0.95);
    transition: box-shadow 0.5s, transform 0.5s;
}

.wrapper:hover {
    transform: scale(1);
    box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

.wrapper .container {
    width: 100%;
    height: 100%;
}

.wrapper .container .top {
    height: 80%;
    width: 100%;
    background: url('../img/student.png') no-repeat center center;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

.wrapper .container .bottom {
    width: 200%;
    height: 20%;
    transition: transform 0.5s;
}

.wrapper .container .bottom.clicked {
    transform: translateX(-50%);
}

.wrapper .container .bottom h1 {
    margin: 0;
    padding: 0;
}

.wrapper .container .bottom p {
    margin: 0;
    padding: 0;
}

.wrapper .container .bottom .left {
    height: 100%;
    width: 50%;
    background: #f4f4f4;
    position: relative;
    float: left;
}

.wrapper .container .bottom .left .details {
    padding: 20px;
    float: left;
    width: calc(70% - 40px);
}

.wrapper .container .bottom .left .buy {
    float: right;
    width: calc(30% - 2px);
    height: 100%;
    background: #f1f1f1;
    transition: background 0.5s;
    border-left: solid thin rgba(0, 0, 0, 0.1);
}

.wrapper .container .bottom .left .buy i {
    font-size: 30px;
    padding: 30px;
    color: #254053;
    transition: transform 0.5s;
}

.wrapper .container .bottom .left .buy:hover {
    background: #a6cdde;
}

.wrapper .container .bottom .left .buy:hover i {
    transform: translateY(5px);
    color: #00394b;
}

.wrapper .container .bottom .right {
    width: 50%;
    background: #a6cdde;
    color: white;
    float: right;
    height: 200%;
    overflow: hidden;
}

.wrapper .container .bottom .right .details {
    padding: 20px;
    float: right;
    width: calc(70% - 40px);
}

.wrapper .container .bottom .right .done {
    width: calc(30% - 2px);
    float: left;
    transition: transform 0.5s;
    border-right: solid thin rgba(255, 255, 255, 0.3);
    height: 50%;
}

.wrapper .container .bottom .right .done i {
    font-size: 30px;
    padding: 30px;
    color: white;
}

.wrapper .container .bottom .right .remove {
    width: calc(30% - 1px);
    clear: both;
    border-right: solid thin rgba(255, 255, 255, 0.3);
    height: 50%;
    background: #bc3b59;
    transition: transform 0.5s, background 0.5s;
}

.wrapper .container .bottom .right .remove:hover {
    background: #9b2847;
}

.wrapper .container .bottom .right .remove:hover i {
    transform: translateY(5px);
}

.wrapper .container .bottom .right .remove i {
    transition: transform 0.5s;
    font-size: 30px;
    padding: 30px;
    color: white;
}

.wrapper .container .bottom .right:hover .remove, .wrapper .container .bottom .right:hover .done {
    transform: translateY(-100%);
}

.wrapper .inside {
    z-index: 9;
    background: #92879b;
    width: 165px;
    height: 140px;
    position: absolute;
    top: -70px;
    right: -70px;
    border-radius: 0px 0px 200px 200px;
    transition: all 0.5s, border-radius 2s, top 1s;
    overflow: hidden;
}

.wrapper .inside .icon {
    position: absolute;
    right: 85px;
    top: 85px;
    color: white;
    opacity: 1;
}

.wrapper .inside:hover {
    width: 100%;
    right: 0;
    top: 0;
    border-radius: 0;
    height: 80%;
}

.wrapper .inside:hover .icon {
    opacity: 0;
    right: 15px;
    top: 15px;
}

.wrapper .inside:hover .contents {
    opacity: 1;
    transform: scale(1);
    transform: translateY(0);
}

.wrapper .inside .contents {
    padding: 5%;
    opacity: 0;
    transform: scale(0.5);
    transform: translateY(-200%);
    transition: opacity 0.2s, transform 0.8s;
}

.wrapper .inside .contents table {
    text-align: left;
    width: 100%;
}

.wrapper .inside .contents h1, .wrapper .inside .contents p, .wrapper .inside .contents table {
    color: white;
}

.wrapper .inside .contents p {
    font-size: 13px;
}