@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');



body{
   background:#f5f5f5;
    font-family:DM Sans;
    width:100vw;
    max-width: 100%;
    overflow-x: hidden;
}
a{
  background:none;
  text-decoration:none;
}
.hr-container{
  width:100vw;
  text-align:center;
   display: flex;
   justify-content:center;
   align-items:center;
}
hr{
  width:5vw;
  margin:20px;
  animation:hr 2s 1;
}
.hr-long{
  width:70vw;
  margin:20px;
  animation:hr-long 2s 1;
}

@keyframes hr{
  from{width:0px;}
  to{width:5vw;}
}
@keyframes hr-long{
  from{width:0px;}
  to{width:70vw;}
}

.header-box{
  width:100vw;
  height:78px;
  background: #ffffff;
  display: -webkit-flex;
  display: flex;
  margin:-8px;
}
.header-favicon{
  width:50vw;
  display:flex;
    display: -webkit-flex;
  align-items:center;
   -webkit-justify-content:left;
    justify-content:left;
   animation:bounceInLeft;
  animation-duration:1.5s;
}
.header-favicon > img{
  height:50px;
  margin:0px 20px;
}
.header-button-group{
  display: -webkit-flex;
  display:flex;
 -webkit-justify-content:right;
  justify-content:right;
  align-items:center;
  text-align:right;
  height:78px;
  width:50vw;
 }
.header-button{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  height:90%;
  width:120px;
  font-size:20px;
  font-weight:bold;
  color:#1e70ff;
  border:none;
   transition:2s;
   letter-spacing: 1px;
    
    
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.page-container{
  width:100vw;
  margin:-8px;
  height:auto;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
    z-index:-2;
}
.section-box{
  width:50vw;
  height:auto;
  text-align:left;
  margin:40px 0px;
}
.section-box-centered{
  width:100vw;
  height:auto;
  text-align:center;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  margin:40px 0px;
}
.title{
  font-size:calc(30px + 1vw);
  font-weight:bold;
  letter-spacing:1px;
  color:#242424;
  animation:fadeInLeft;
  animation-duration:2s;
      text-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
         letter-spacing: 2px;

}
.title2{
  font-size:50px;
  font-weight:bold;
  letter-spacing:1px;
  color:#242424;
      text-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
         letter-spacing: 2px;

}
.description-p{
   font-size:22px;
  margin:20px;
  text-align:left;
  margin:10px 0px;
    color:#242424;
}
.description-p-centered{
    font-size:20px;
  margin:20px;
  text-align:center;
  margin:10px 0px;
    color:#242424;
}



.containerbottom{
background-color:white;
height:auto;
width: 100vw;
position: relative;
display: flex;
flex-direction:row;
align-items: center;
text-align:center;
margin:-8px;
bottom:0px;}

  

.footer {position: relative;font-size:calc(10px + 0.3vw);font-weight:bold;color:lightgrey;width:50vw;padding:20px 0px;text-align:left;}

.footer-p{margin:0px 70px;}

.footer-icons-container{width:50vw;padding:20px 0px;text-align:right;}

.footer-icons{margin:0px 40px;}

.social > i{color:#1e70ff;font-size:25px;margin:0px 15px;transition:0.3s;}

.social > i:hover{color:#242424;font-size:25px;margin:0px 15px;transition:0.3s;}

.footer a{color:lightgrey;font-style:italic;}







.commission-me-banner{
  width:100vw;
  height:280px;
  background:linear-gradient(to bottom right, #1e70ff, #61d3ed);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  margin:-8px
}
.commission-me-banner-title{
   font-size:calc(30px + 1vw);
  font-weight:bold;
  letter-spacing:1px;
  color:white;

text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
                 10px 20px 5px rgba(0,0,0,0.05),
                 -10px 20px 5px rgba(0,0,0,0.05);
         letter-spacing: 2px;
         display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.commission-me-banner-button{
  border:none;
  border-radius:5px;
  padding:15px;
  font-weight:bold;
  letter-spacing:1px;
  color:white;
  background:none;
  border:2px solid white;
  margin:0px 70px;
   transition:0.3s;
   
}
.commission-me-banner-button:hover{
   cursor: pointer;
  border:none;
  border-radius:5px;
  padding:15px;
  font-weight:bold;
  letter-spacing:1px;
  color:#242424;
  transition:0.3s;
  background:white;
  border:2px solid white;
  margin:0px 70px;
}




@media only screen and (max-width: 1000px) {
  
  
  .header-favicon{
  display:none;
}
.header-box{
  width:100vw;
  height:78px;
  background:white;
 display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin:-8px;
  justify-content:center;
  align-items:center;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
 
.header-button-group{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  height:70px;
  width:auto;

}
  .header-button{
    background:none;
    font-size:15px;
      width:90px;
  }
  .header-button:hover{
      text-shadow: 2px 2px 5px red;
  }
  .section-box{
    display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  flex-direction:column;
  }
  
   .description-p{

  text-align:center;
  }
  
  
  
  
  
}