@import url('https://fonts.cdnfonts.com/css/kodchasan');
      
:root {
  color-scheme: light only;
}

html {
        margin:    0 auto;
        max-width: 62.5;
        scroll-behavior: smooth;  
        overflow-x: hidden; 
          }


      body {
          background-color: #F7F7F7;
          
        }
        
        h1 {
          font-size: 4vw;
          font-size: min(max(20px, 4vw), 40px);
          padding-top: 1rem;
          color: black;
          color: rgb(78, 78, 78);
          text-align: center;
          font-family: 'Kodchasan ExtraLight', sans-serif;
          
          
        }
        @media only screen and (max-height: 600px) {
          h2 {
            font-family: 'Kodchasan Bold', sans-serif;

          }
        }

        h2 {
          font-size: 6vw;
          font-size: min(max(20px, 6vw), 40px);
          color: rgb(78, 78, 78);
          text-align: left;
          font-family: 'Kodchasan ExtraLight', sans-serif;
          font-weight: 100; 
          margin: 1.2rem;
          max-width: 60rem;
          
        }
       

        @media only screen and (max-height: 600px) {
          h2 {
            font-size: 2vw;
          }
        }
       
        
        h3 {
          font-family: 'Farsan';
          font-size: 2rem;
          font-size: min(max(20px, 6vw), 40px);
          text-align: center;
          color: rgb(51, 50, 50);
          font-weight: 900;

        }

        h4 {
          font-family: 'Farsan';
          font-size: 1.225rem;
          font-size: min(max(0.7rem, 5vw), 30px);
          text-align: center;
          color: rgb(130, 130, 130);

        }

        h5 {
          font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
          font-size: 1.6rem;
          text-align: center;
          color: rgb(78, 78, 78);

        }

      *  h6 {
          font-family: 'Kodchasan ExtraLight', sans-serif;
          font-size: min(max(18px, 2vw), 35px);

          line-height: 1.7;
          text-align: center;
          color: rgb(130, 130, 130);

        }
        h7 {
          font-family: 'Kodchasan ExtraLight', sans-serif;
          font-size: 1.125rem;
          line-height: 1.7;
          text-align: center;
          color: rgb(130, 130, 130);

        }
        p {
          font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
          font-size: 0.6rem;

          text-align: left;
          color: rgb(130, 130, 130);

          line-height: 1.2;

        }
        #p2 {
          font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
          font-size: 17px;
          text-align: left;
          color: rgb(66, 66, 66);
          padding-left: 1.5rem;
          line-height: 1.2;

        }
        a {
          font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
          font-size: 17px;
          text-align: center;
          text-decoration: none;

        }

        .i {
          font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
          font-style: italic;
          color: rgb(66, 66, 66);


        }



 /* RESPONSIVE DIV */ 
        .responsive { 
          width: 60%;       
          margin-left: auto; 
          margin-right: auto; 
        }
        @media only screen and (max-width: 800px) {
        .responsive {
          width: 90%;
        }
        }
    


/* CIRCLE IMAGES LOGOS */        
        #circleimg {
          margin: auto;
          text-align: center;
         }
         #circleimg img{
          max-width: 150px;
          height: auto;
          width: 22vw;
         }
 /* CIRCLE IMAGES LOGOS */        
        #quote {
          margin: auto;
          text-align: center;
        }
        #quote img{
          max-width: 80px;
          height: auto;
          width: 10vw;
        }        

/* MY PORTFOLIO IMAGES  */        
        #myImg {
          margin-bottom: 1rem;
          
          border-radius: 0.2rem;
          box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.7),
                    -6px -6px 10px rgba(255, 255, 255, .5),
                    6px 6px 8px rgba(255, 255, 255, .075),
                    6px 6px 10px rgba(0, 0, 0, .15);
        }
       
        


/* BUTTONLINK*/        
        #buttonlink {
          margin: auto;
          text-align: center;
          
        
        }
        
        
        
/* CASE PICTURES */        
        #casepicture {
          box-sizing: border-box;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          
        }
        #casepicture img{
          width: 100%; 
          margin-top: 1rem;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          
          margin-left: auto; 
          margin-right: auto; 
          z-index: 99 !important;
        }
        @media only screen and (max-width: 600px) {
          #casepicture img{
            max-width: 80%;
  
          }
        }
        
      @media only screen and (max-width: 800px) {
        .cases {
          width: 70%;
        }
      }
   

/* UNDERLINE */ 
          #underline {
          margin: auto;
          border-top: 1.5px solid #7f7f7f;
          width: 30px;
          padding-bottom: 10px;
         }

          #link {
          margin: auto;
          width: 80px;
         } 

          #underline2 {
          margin: auto;
          border-top: 1.5px solid #7f7f7f;
          width: 30%;
         
          margin-top: 2rem;
          padding-bottom: 10px;
        }


       
/* SCREENSIZE */ 
        #screensize {
        height: 100vh;
        width: 100vw;
        scroll-behavior: smooth;
        text-align: center;
      }
        #screensize2 {
        padding-top: 50px;
        width: 80%;
        margin: auto;
      }      
      @media only screen and (max-width: 800px) {
        #screensize2 {
          
          width: 100%;

        }
      }  
      @media only screen and (max-width: 600px) {
        #screensize2 {
          width: 95%;

        }
      }  
      #screensize p{
        margin:auto;
        
      }
      
    
      



 /* MAIN */ 
        #main {
          margin: 10vh;
          z-index: 90;
        }

        @media only screen and (max-width: 700px) {
          #main {

          }
        }     
        @media only screen and (max-width: 500px) {
          #main {

          }
        } 

/* HEADER */ 



        #header{
          width:100%;
          position: absolute;
          padding-top: 1.3rem;

        }
        #left{
          padding-top: 1rem;
          padding-left: 2rem;
          float:left;
          position:fixed;
          width:100px;
        }

        @media only screen and (max-width: 800px) {
          #left {
            padding-left: 0.1rem;
          }
        }


        #right{
          float:right;
          width:100px;
          opacity:0;
        }
        #center{
          margin:0 auto;
          text-align: center;
          width: 100px;
        }
        #center img{
          min-height: 1.9rem;
          max-height: 2.2rem;
        }




  /* CASES */ 
          .cases { 
            filter: grayscale(1);
            -webkit-filter: grayscale(1);
            width: 60%; 
            height: 150px; 
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px; 
            margin-left: auto; 
            margin-right: auto; 
            background-color: rgb(255, 255, 255);
            z-index: 99 !important;
            border-radius: 10px;
            border-style: solid;
            border-color: rgb(255, 255, 255);
            overflow: hidden;
            
            
        }
        @media only screen and (max-width: 800px) {
          .cases {
            width: 90%;
          }
        }
             

        .cases:hover {
          opacity: 1;
          transition: 0.2s;
          filter: grayscale(0);
          -webkit-filter: grayscale(0);border-style: solid;
          box-shadow: 1px 9px 25px 0px rgba(94, 94, 94, 0.28);
            -webkit-box-shadow: 1px 9px 25px 0px rgba(43, 43, 43, 0.101);
            -moz-box-shadow: 1px 9px 25px 0px rgba(65, 65, 65, 0.28);
          
        }

        #image {
          max-width: 80%;
          max-height: 120px;
        }

  
   
        
      

        




        .scrolldown-wrapper {
          left: 50%;
          position: absolute;
          text-align: center;
          bottom: 0;
          transform: translate(-50%, -50%);
        
        }
          
        .scrolldown {
          border: 2px solid #505050;
          border-radius: 30px;
          height: 46px;
          margin: 0 auto 8px;
          text-align: center;
          width: 30px;
        }
        
        .scrolldown-p1,
        .scrolldown-p2 {
          animation-duration: 1.5s;
          animation-name: scrolldown;
          animation-iteration-count: infinite;
          fill: #505050;
        }
          
        .scrolldown-p2 {
          animation-delay: .75s;
        }
        
        @keyframes scrolldown {
          100% {
            opacity: 0;
            transform: translate(0, -8px);
          }
          50% {
            opacity: 1;
            transform: translate(0, 0);
          }
          0% {
            opacity: 0;
            transform: translate(0, 8px);
          }
        }

        .animate-in {
          -webkit-animation: fadeIn .5s ease-in;
          animation: fadeIn .5s ease-in;
      }
      
      .animate-out {
          -webkit-transition: opacity .5s;
          transition: opacity .5s;
          opacity: 0;
      }
      
      @-webkit-keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
      }
      
      @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
      }


.scroll-down {
  
  bottom: 0;
  animation-name:bounce;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-direction: alternate;
  position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
        
}

@keyframes bounce {
  from {
    transform:translateY(0px);
  }
  to {
    transform:translateY(10px);
  }
}



      
      button {
        padding: 1.2em 5em;
        background: #f7f7f7;
        border: none;
        border-radius: 5rem;
        color: #444;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .15rem;
        text-align: center;
        outline: none;
        cursor: pointer;
        transition: .2s ease-in-out;
        box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.7),
                    -6px -6px 10px rgba(255, 255, 255, .5),
                    6px 6px 8px rgba(255, 255, 255, .075),
                    6px 6px 10px rgba(0, 0, 0, .15);
      }
      button:hover {
        box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
                    -2px -2px 4px rgba(255, 255, 255, .4),
                    2px 2px 2px rgba(255, 255, 255, .05),
                    2px 2px 4px rgba(0, 0, 0, .1);
      }
      button:active {
        box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
                    inset -2px -2px 4px rgba(255, 255, 255, .5),
                    inset 2px 2px 2px rgba(255, 255, 255, .075),
                    inset 2px 2px 4px rgba(0, 0, 0, .15);
      }


      .coverall {
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        width: 99vw;
        scroll-behavior: smooth;
        }
        
        .centered-text {
            text-align: center;
            object-fit: cover;
        }
       
        .centered-text  h6{
          margin: auto;
          width: 60%;
        }
        @media only screen and (max-width: 800px) {
          .centered-text h6 {
            width: 90%;

          }
        }
        .centered-text  h7{
          margin: auto;
          padding: 1rem;
          width: 60%;
         

        }
        @media only screen and (max-width: 800px) {
          .centered-text h7 {
            width: 90%;
            
          }
        }
        .centered-text  h2{
          margin: auto;
          padding: 1rem;
          width: 70%;
        }
        @media only screen and (max-width: 100px) {
          .centered-text h2 {
            width: 90%;

          }
        }
        @media only screen and (max-width: 800px) {
          .centered-text h2 {
            width: 90%;

          }
        }
        .centered-text img{
          max-width: 80%;
          max-height: 80vh;
      }
        
      
      #testa{
        background-color: #333333;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
        color:#f7f7f7;

        
    }
    * { 
      font-size: 6vw;
      font-size: min(max(20px, 6vw), 40px);
      text-align: left;
      font-weight: 100;   
      max-width: 60rem;
      color:#fff;

    }
    * h2{ 
      font-size: 6vw;
      font-size: min(max(20px, 6vw), 40px);
      color: rgb(78, 78, 78);
      text-align: left;
      font-weight: 100;   
      max-width: 60rem;
      color:#333333;

    }
    * h2 b{ 
      font-size: 6vw;
      font-size: min(max(20px, 6vw), 40px);
      color: rgb(78, 78, 78);
      text-align: left;
      font-family: 'Kodchasan ExtraLight', sans-serif;
      font-weight: 100;   
      max-width: 60rem;
      color:#333333;

    }

    * p{ 
      font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
      font-size: clamp(16px, 4vw, 20px);
      text-align: left;
      color: rgb(102, 102, 102);
      line-height: 1;
      letter-spacing: .03rem;
      font-weight: 300;

    }
    * h5{ 
      font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
      font-size: 1rem;
      text-align: center;
      color: rgb(78, 78, 78);
    }
    * i{ 
      font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
      font-style: italic;
      color: rgb(66, 66, 66);
      font-size: clamp(16px, 4vw, 20px);
      font-weight: 500;


    }
  




 
    #thicc{
      font-weight: 500;
      color:#333333;
      font-family: 'Kodchasan', sans-serif;

      
      
  } 

  .coverall2 {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 99vw;
    scroll-behavior: smooth;
    }

  .footer {
    height: 20vh;
    width: 100vw;
    margin-top: 3rem;
  
    }
  

    .container {
      display: flex;
      justify-content: space-between;
      max-width: 70%;
      margin: 0 auto;
      padding: 20px;
  }
  @media only screen and (max-width: 900px) {
    container {
    max-width: 90%;
    
    }
  }

  .left-box, .right-box {
      width: 48%;
      box-sizing: border-box;
      padding: 20px;
      
  }
  
  .left-text:hover {
    color: #333333;
    text-decoration: underline;

  }
  .right-text:hover {
    color: #333333;
    text-decoration: underline;

  }

  .left-text {
      float: left;
      font-weight: 400;

  }

  .right-text {
      float: right;
      font-weight: 400;

  }