@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');




 
.box:hover {
	-webkit-animation: rotate-center 1s ;
	        animation: rotate-center 1s ;
}


/* ----------------------------------------------
 * Generated by Animista on 2021-1-16 18:4:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
 @-webkit-keyframes rotate-center {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @keyframes rotate-center {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  














@media (prefers-color-scheme: light)
{


    * {
        margin: 0;
        padding: 0;
        font-family: 'Robot', sans-serif;
    }

    body {
        background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
        background-size: 400%, 400%;
        position: relative;
        animation: body_animation 10s ease-in-out infinite;
    }

    @keyframes body_animation {

        0% {
            background-position: 0 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0 50%;
        }
    }



    h1 {
        position: relative;
        margin: 0;
        font-size: 4em;
        font-weight: 900;
        color: #fff;
        z-index: 1;
        overflow: hidden;
        box-shadow: 10px 10px 15px silver;
        text-shadow: 10px 11px 70px snow;
    }

    input {
        position: relative;
        margin: 0;
        color: #fff;
        z-index: 1;
        overflow: hidden;
        text-shadow: 10px 11px 70px snow;
    }

        input:hover {
            color: red !important;
            box-shadow: 5px 5px 30px silver;
            transition: all 0.3s ease;
        }

    h1:before {
        content: '';
        position: absolute;
        left: 120%;
        width: 120%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, transparent 5%, #000);
        animation: animate_h1 5s linear forwards;
        animation-delay: 0s;
    }

    h1 span {
        color: snow;
    }


    body:before {
        content: '';
        position: absolute;
        left: 120%;
        width: 120%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, #000, #000);
        animation: animation_anfang 5s linear forwards;
        animation-delay: 0s;
        align-items: center;
    }


    @keyframes animation_anfang {
        0% {
            left: -20%;
        }

        100% {
            left: 110%;
        }
    }



    h2 {
        color: snow;
    }

    p {
        color: blue;
    }


    .container {
        position: relative;
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        grid-gap: 0 40px;
        grid-template-rows: auto;
    }

    .box {
        position: relative;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px;
    }

        .box:nth-child(1) {
            background: linear-gradient(to bottom right, #4776E6, #8E54E9);
        }

        .box:nth-child(2) {
            background: linear-gradient(to bottom right, #FF8008, #FFC837);
        }

        .box:nth-child(3) {
            background: linear-gradient(to bottom right, #1FA2FF, #12D8FA, #A6FFCB);
        }

        .box:nth-child(4) {
            background: linear-gradient(to bottom right, #1A2980, #26D0CE);
        }

        .box:nth-child(5) {
            background: linear-gradient(to bottom right, #FF512F, #DD2476);
        }

        .box:nth-child(6) {
            background: linear-gradient(to bottom right, #e65c00, #F9D423);
        }


    .container .box:before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: #fff;
        z-index: -1;
        transform: skew(2deg, 2deg)
    }

    .contant {
        position: relative;
        padding: 20px;
    }

    .box:hover {
        color: red !important;
        box-shadow: 4px 4px 30px silver;
        transition: all 0.3s ease;
    }


   






}




@media (prefers-color-scheme: dark) {


    * {
        margin: 0;
        padding: 0;
        font-family: 'Robot', sans-serif;
    }

    body {
        background: linear-gradient(-45deg, #ff0600, #FFBF00, #00F700, #098500, #0600FC, #5A0A8B, #003D84, #0000F0, #F65B00);
        background-size: 3000%, 3000%;
        position: relative;
        animation: body_animation 100s ease-in-out infinite;
    }

   /*    #ff0600, #FFBF00, #F7FB00, #098500, #0600FC, #5A0A8B,    */

    @keyframes body_animation {

        0% {
            background-position: 0 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0 50%;
        }
    }



    h1 {
        position: relative;
        margin: 0;
        font-size: 4em;
        font-weight: 900;
        color: #282828 !important;
        z-index: 1;
        box-shadow: 10px 10px 15px silver;
        text-shadow: 10px 11px 70px snow;
    }

    input {
        position: relative;
        margin: 0;
        color: #282828;
        z-index: 1;
        overflow: hidden;
        text-shadow: 10px 11px 70px snow;
    }

        input:hover {
            color: red !important;
            box-shadow: 5px 5px 30px silver;
            transition: all 0.3s ease;
        }

  

  


    body:before {
        content: '';
        position: absolute;
        left: 120%;
        width: 120%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, #000, #000);
        animation: animation_anfang 5s linear forwards;
        animation-delay: 0s;
        align-items: center;
    }


    @keyframes animation_anfang {
        0% {
            left: -20%;
        }

        100% {
            left: 110%;
        }
    }



    h2 {
        color: #282828 !important;
    }

    p {
        color: blue;
    }


    .container {
        position: relative;
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        grid-gap: 0 40px;
        grid-template-rows: auto;
    }

    .box {
        position: relative;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px;
    }

        .box:nth-child(1) {
            background: linear-gradient(to bottom right, #4776E6, #8E54E9);
        }

        .box:nth-child(2) {
            background: linear-gradient(to bottom right, #FF8008, #FFC837);
        }

        .box:nth-child(3) {
            background: linear-gradient(to bottom right, #1FA2FF, #12D8FA, #A6FFCB);
        }

        .box:nth-child(4) {
            background: linear-gradient(to bottom right, #1A2980, #26D0CE);
        }

        .box:nth-child(5) {
            background: linear-gradient(to bottom right, #FF512F, #DD2476);
        }

        .box:nth-child(6) {
            background: linear-gradient(to bottom right, #e65c00, #F9D423);
        }


    .container .box:before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: #fff;
        z-index: -1;
        transform: skew(2deg, 2deg)
    }

    .contant {
        position: relative;
        padding: 20px;
    }

    .box:hover {
        color: red !important;
        box-shadow: 4px 4px 30px silver;
        transition: all 0.3s ease;
    }


  
}