:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}


body {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 350;
    margin: 8%;
  }


  .intro {
    font-weight: 500;
  }

  img {
    size: 100%;
    padding-right: 10px;
  }


.container {
	max-width: 860px;
	margin: 0 auto;
}


.container > div {
	margin: 30px auto;
}


a {
    text-decoration: none;
    color:black;
  
    /* border-bottom: #000;
    border-style: groove;
   border-radius: 50%; */
  }

  
.about a:hover, .about a:active {
    text-decoration: none; 
    transition: all .2s;
}
   
   
.pupille a:hover, .pupille a:active, .links a:hover, .links a:active {
/* text-decoration: underline; */
border-bottom: 2px solid #000;
}

    /* text-decoration: none;
    border-radius: 25px;
    background-color: green;
    color: white;
    display: inline-block;

    padding: 10px 20px;
    text-align: center; */
 



#artek:hover, #bverfg:hover, #fhp:hover {
    color: #fff;
    /* box-shadow: 0 0 0 4px #000;  */
    background-color: #000;
    border-radius: 25px;
}

#artek:hover #artek2 {
  color:#000;
    }

    #bverfg:hover #bverfg2 {
        color:#000;
          }

          #fhp:hover #fhp2 {
            color:#000;
              }

#cribb:hover, #cribb:active {
    color: #fff;
    /* box-shadow: 0 0 0 4px #ff016b;  */
    background-color: #ff016b;
    border-radius:25px;
    /* background-color: #2b2d44; */
    }
    
    #cribb:hover #cribb2 {
        color:#ff016b;
    }


#codersociety:hover {
    /* box-shadow: 0 0 0 4px #DB5376;  */
    background-color: #DB5376;
    border-radius:25px;
   
    }
    #codersociety:hover #cs2 {
        color:#DB5376;
    }


#dra:hover {
    color: #fff;
    /* box-shadow: 0 0 0 4px #0A226A;  */
    background-color: #0A226A;
    border-radius:25px;
    }

    #dra:hover #dra2 {
        color:#0A226A;
    }


#meta:hover {
    color: #fff;
    /* box-shadow: 0 0 0 4px #DE302D;  */
    background-color: #DE302D;
    border-radius:25px;
}
#meta:hover #meta2 {
    color:#DE302D;
}


#otto:hover {
    color: #fff;
    /* box-shadow: 0 0 0 4px #DA2F2E;  */
    background-color: #DA2F2E;
    border-radius:25px;
}

#otto:hover #otto2 {
    color:#DA2F2E;
}

#safia:hover {
    /* box-shadow: inner 0 0 40px #93FC86;  */
    background-color: #93FC86;
    border-radius:25px;
    /* color: #fff; */
    /* color: #93FC86; */
}

#safia:hover #safia2 {
    color:#93FC86;
}

#tgtg:hover {
    /* box-shadow: 0 0 0 4px #C5EBE4;  */
    background-color: #C5EBE4;
    border-radius:25px;
}
#tgtg:hover #tgtg2 {
    color:#C5EBE4;
}

#tilda:hover {
    color: #fff;
    /* box-shadow: 0 0 0 4px #599788;  */
    background-color: #599788;
    border-radius:25px;
}

#tilda:hover #tilda2 {
    color:#599788;
}

#zdt:hover {
    /* box-shadow: 0 0 0 4px #BDADDD;  */
    background-color: #BDADDD;
    border-radius:25px; 
    /* text-shadow: 0 0 20px #BDADDD;  */
}    


.contact {
	display: grid;
	grid-template-columns: 50% 50%;
    padding: 30px 0 30px 0;
}

/*
.contact {
	display: grid;
	grid-template-columns: 1fr 1fr;    
}
*/


.wiggle a {
    padding-bottom: 5px;
    background: url("line.svg");
    background-repeat: repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
    background-repeat: repeat-x;
    background-size: 15px 20px; 
    background-position: 2px 19px;
    animation: move 15s linear infinite;
    -webkit-animation: move 15s linear infinite;
    animation-play-state: paused;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
  }
  
 .wiggle a:hover {
    animation-play-state: running;
    text-decoration: none;
  }
  
  
  @-webkit-keyframes move {
  from {
      background-position: 2px 19px;
    }
    to {
      background-position: 500px 19px;
    }
  }
  
  @keyframes move {
  from {
      background-position: 2px 19px;
    }
    to {
      background-position: 500px 19px;
    }
  }


.pupille { 
    /* left: -40px; */
    width: 1000px;
    height: 50px;
}

/* svg {
    display: block;
  } */



  .rotation 
  { 
    position: relative;
    top: 5px;
    left:40px;
    /* background-color: #000;
    border-radius: 50%; */
    width:25px; 
    height:25px; 
    margin-top:0px; 
    transform-origin:60% center; 
    /* position:relative;  */
    animation:rotate 3s linear infinite; 
    animation-play-state: paused;
}

/* .rotation div:before { 
    content:''; 
    position:absolute; 
    height:10%; 
    width:10%; 
    background:blue; 
    animation:rotate 3s linear reverse infinite; } */

@keyframes rotate 
{ 100% 
    { transform:rotate(360deg); 
    } 
}

.rotation:hover {
    animation-play-state: running;
    text-decoration: underline;
  }
  




.links {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 30px 0 30px 0;
    
}



@media (max-width: 640px) {

    body {
        font-size: 21px;
        line-height: 1.5;
        font-weight: 350;
        margin: 16% 8% 8% 8%;
      }

      #artek {
        color: #fff;
        /* box-shadow: 0 0 0 4px #000;  */
        background-color: #000;
        border-radius: 25px;
    }

      #cribb {
        color: #fff;
        /* box-shadow: 0 0 0 4px #ff016b;  */
        background-color: #ff016b;
        border-radius:25px;
        /* background-color: #2b2d44; */
        }
        
    
    #codersociety {
        /* box-shadow: 0 0 0 4px #DB5376;  */
        background-color: #DB5376;
        border-radius:25px;
       
        }
   
    
    
    #dra {
        color: #fff;
        /* box-shadow: 0 0 0 4px #0A226A;  */
        background-color: #0A226A;
        border-radius:25px;
        }
    
  
    
    #meta {
        color: #fff;
        /* box-shadow: 0 0 0 4px #DE302D;  */
        background-color: #DE302D;
        border-radius:25px;
    }
   
  
    #safia {
        /* box-shadow: inner 0 0 40px #93FC86;  */
        background-color: #93FC86;
        border-radius:25px;
        /* color: #fff; */
        /* color: #93FC86; */
    }
    

    
    #tgtg {
        /* box-shadow: 0 0 0 4px #C5EBE4;  */
        background-color: #C5EBE4;
        border-radius:25px;
    }
   
    

    #zdt {
        /* box-shadow: 0 0 0 4px #BDADDD;  */
        background-color: #BDADDD;
        border-radius:25px; 
        /* text-shadow: 0 0 20px #BDADDD;  */
    }    
    

    


	.contact {
        grid-template-columns: 1fr;
        padding: 60px 0 60px 0;
        /* padding: 1em; */
        grid-row-gap: 50px;
        /* display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%; */
	}

  .links {
    display: grid;
    grid-template-columns: 1fr;
      padding: 30px 0 30px 0;
    } 

    /* .wiggle {
     margin-left: 40px;
      }
  .wiggle .img {
    margin-left: 400px;
     } */

    .wiggle a {
        animation-play-state: running;
      }

      .rotation {
        animation-play-state: running;
      }

}