/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

    .papermask{
      -webkit-mask-image: url(https://i.ibb.co/KhqQW5x/73696-B1-E-A0-D7-4529-B2-D2-FB27-F0-D5-B437.png);
      -webkit-mask-size: 150%; 
      -webkit-mask-repeat: no-repeat; 
      -webkit-mask-position: center;   
    }
    
    a{
        color:pink;
    }    
    
    #container{
        width:450px;
        height: 450px;
        margin: 0 auto;
        position:absolute;
        left: 50%;
        top: 20%;
        /*transform: translateX(-50%);*/
        border-width: 8px;
        border-style: solid;
        border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8 fill round;
    }     
  
    #content{
        border:1px solid blue;
        background: white;
        height: 430px;
        display: flex;
        justify-content: center;
    }

    #eng {
        transform: rotate(-20deg);
        transition: 0.5s;
      
    }
    
    #kr {
        transform: rotate(15deg);
        transition: 0.5s;
    }
    
    .candy {
        width:200px;
        height:200px;
        float:left;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    #xtrainfoeng{
        background-image:url('https://od.lk/s/ODZfNzUzMjc1NzRf/Notes');
        position: absolute;
        left:20px;
        width:260px;
        height:250px;
        font-size:15px;
        padding-left: 25px;
        padding-right: 25px;
    }

    #xtrainfokr{
        background-image:url('https://od.lk/s/ODZfNzUzMjc1NzRf/Notes');
        width:260px;
        height:250px;
        font-size:15px;
        padding-left: 30px;
        padding-right: 30px;
        position:absolute;
        right: 20px;
    }
    
    #xtrainfoeng:hover {
      transform: rotate(10deg);
    }
    
    #xtrainfokr:hover {
      transform: rotate(-10deg);
    }
    
    #kr:hover {
      margin-top:-10px;
    }

    #eng:hover {
      margin-top: -10px;
    }