*{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        /* border: 1px solid blue;  */
    
        }
        @media screen and (max-width: 1200px) {
          body{
          transform-origin: top;
          transform: scale(1.3);
          margin:0 auto;
          }
             
          }
    
    body {
        
        background-color: rgba(128, 128, 128, 0.723);
        background-image: url("assets/blue-background.jpg");

    }
    /* the main container */
    .card-container { 
        display: grid;
        grid-template-columns: 1fr; 
        grid-template-rows: 1fr; 
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
        }
    
    .front-side {
      width: 441px;
      height: 330px;
      grid-area: 1 / 1 / 2 / 2; 
      background-image: url("assets/back-card.jpg");
      background-size: contain;
      background-repeat: repeat;
      /* adjust this to space out the cards */
      margin: 100px auto;
      overflow: hidden;
      box-shadow: 3px 6px 15px 7px #00000094;
      z-index:5;
      /* background-color:rgb(0, 0, 0); */
    }
    
    .back-side {
      width: 441px;
      height: 330px;
      grid-area: 1 / 1 / 2 / 2; 
      background-image: url("assets/front-card-lara-edit.svg");
      /* adjust this to space out the cards */
      margin: 100px auto;
      /* overflow: hidden; */
      z-index:4;
    }

    
    .icon-container { 
      width: 150px;
      /* height: 10%; */
      margin-top: 5%;
      margin-left: 34%;
      display:grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: 
      "a b"
      "c d";
      grid-gap: 10px;
      }
      /* .email { grid-area: 1 / 1 / 2 / 2;
      position: static;
      z-index: 2;
      height: 50px;
      width: 50px;
    } 

      .linkedin { grid-area: 3 / 1 / 4 / 2;
      position: static; 
      z-index: 2;
      height: 50px;
      width: 50px;
    }  */

    button{
      margin: 0 auto;
      background-color:rgba(42, 108, 189, 0);
      border-radius: 15px;
      margin-top: 100px;
      margin-left: 35%;
      width:430px;
      height:330px;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      z-index: 5;
      position:absolute;
      top: 0;
      left: 0;
      cursor: url("/assets/APointer-cursor.svg"), auto;

      }
      

    
    .back-side-image 
    { grid-area: 4 / 1 / 5 / 2;
      position: absolute;
      top: 372px;
      left: 170px;
      height: 342px;
      width: 460px;
        } 
    
    
    h1{
      margin-bottom: 0px;
      margin-left: 0px;
      font-size: 35px;
      font-weight: 1px;
      font-style: normal;
      font-family:'IBM Plex Serif', serif;
    }
    
    h2{
      margin-bottom: 0px;
      margin-left: 24%;
      font-size: 18px; 
      font-weight: 100px;
      font-style: normal;
      font-family: 'IBM Plex Serif', serif;
    }
    
    h3{
      margin-bottom: 0px;
      font-size: 11px;
      font-weight: 1px;
      font-style: normal;
      font-family:'IBM Plex Serif', serif;
    }
    
    .text-container {
      position: static;
      top: 0;
      left: 0;
      margin-top: 80px;
      margin-left: 65px;
    }
    body {
      Cursor: url("/assets/ADefault-cursor.svg"), auto;
    }



    /* svg styling */
    .st1{display:inline;}
    
  
    
    .svg-interaction:hover{
      fill:rgb(27, 114, 237);
      opacity: 0.5;
      animation:pulse; 
      animation-duration: 2s;
    }
    
    .email-icon{
      fill:none;
      stroke:#dac000;
      stroke-miterlimit:10;
    }
     
      .linkedin-icon{
        fill:none;
        stroke:#dac000;
        stroke-miterlimit:10;
        /* stroke-width:40px; */
        /* width:40%; */
      }