:root {
    --default-font-family: "Playwrite IN", serif;
    --primary-font-family: "Old Standard TT", serif;
}

body {
    --s: 100px; /* control the size */
    --c:#ece9e7;
    
    --l:var(--c) 20%,#0000 0;
    --g:35%,#dfdcdade 0 45%,var(--c) 0;
    background:
      linear-gradient(45deg,var(--l) 45%,var(--c) 0 70%,#0000 0),
      linear-gradient(-45deg,var(--l) var(--g) 70%,#0000 0),
      linear-gradient(45deg,var(--c) var(--g));
    background-size: var(--s) var(--s);
  }

.navbar {
    background-color: rgb(238, 235, 231) !important;
    font-family: var(--default-font-family);
    font-size:15px;
    font-weight: 250;
    border: 2px solid rgba(182, 180, 180, 0.075);
    border-radius: 5px;
    
}
.hero p {
   
      font-family: var(--default-font-family);
      font-size: 30px;
      padding: 15px 10px;
       
    }

.hero-about {
    font-family: var(--default-font-family);
    padding: 25px 10px;
    font-size: 20px;
}

.hero h1 {
    font-family: var(--primary-font-family);
    font-size: 60px;
    padding:10px 10px;
}

.hero h2 {
    font-family: var(--default-font-family);
    padding: 10px 10px;
    font-size: 20px;

}

.hero {
    background-color: rgb(238, 235, 231);
    border-radius: 10px;
    position: relative;
    top: 100px;
    border:2px solid rgba(182, 180, 180, 0.075);
    box-shadow: 20px black;
    
}

.navigation-links {
    display:flex;
    margin-top:40px;
    justify-content: center;
}

.navigation-links a {
    border-radius: 5px;
    padding: 20px 15px;
    text-decoration: none;
    text-transform: capitalize;
    background: #d1cecc6c;
    color:black;
    font-family: var(--primary-font-family);
    font-size: 20px;
    border: 1px solid rgba(0, 0, 0, 0.582);
    transition: all 120ms ease-in-out;

} 

.navigation-links a:hover {
    font-size: 22px;
    color:rgb(238, 235, 231);
    background-color: rgba(97, 59, 185, 0.548);

}

.contact-title {
    font-family: var(--default-font-family);
    padding: 25px 10px;
}

p {
    font-family: var(--default-font-family);
    font-size: 30px;
    padding:10px 10px;
    font-weight: 200;
}

.email-link {
font-family: var(--primary-font-family);
font-size: 25px;
text-decoration: none;
color:rgba(97, 59, 185, 0.788);
padding:10px 10px;
transition: all 120ms ease-in-out;
}

.email-link:hover{
    color:black;
    font-size:30px;
}
.social-icon-1 {
    position: relative;
    bottom:10px;
    right:40px;
    color:rgba(97, 59, 185, 0.788);
    font-size: 45px;

}

.socials {
    font-family: var(--default-font-family);
    font-size: 24px;
    font-weight: 200;
    padding: 40px 20px
}

.social-icon-2 {
    position: relative;
    bottom:10px;
    left: 50px;
    color:rgba(97, 59, 185, 0.788);
    font-size: 45px;
    
}

.social-icon-1, .social-icon-2 {
    display: inline-block; 
    margin: 0 10px;      
    transition: all 120ms ease-in-out;
}

.social-icon-1:hover {
    color:black;
    font-size:40px;
}

.social-icon-2:hover {
    color:black;
    font-size:40px;
}
.social-icon-1 a, .social-icon-2 a {
    text-decoration: none; 
    color: inherit;       
}

.about-me-para {
    font-family: var(--primary-font-family);
    font-size: 20px;
    font-weight: 300;
    background-color:rgb(238, 235, 231);
    border-radius: 20px;
    word-spacing: 5px;
}

.icons{
    transition: all 120ms ease-in-out;
    color:rgba(97, 59, 185, 0.788);
    font-size: 45px;
}

.icons:hover {
    color:black;
    font-size:48px;
}

#bottom-icon-1 {
    position:relative;
    left:175px;
}

#bottom-icon-2 {
    position: relative;
    bottom: 76px;
    left: 400px;
}


.profile-pic img {
    display: block;
    border-radius: 35%;
    margin: 0 auto;
    position: relative;
    border: 5px dotted rgb(182, 180, 180);

    right: 500px;
    bottom:260px;
    
}

.projectstitle {
    padding-top:20px;
        font-family: "Croissant One", serif;
        font-weight: 100;
      font-size:30px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    background: #000000;
    background: linear-gradient(to right, #3a3939 0%, #908B90 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
   
}

.border-wrap {
	--b: .4em; /* border width */
	--c: 3em; /* corner size */
	--r: 2em; /* corner rounding */
	place-self: center;
	position: relative;
	margin: 1em auto;
	border: solid  var(--b) transparent;
	padding: 1em;
	max-width: 40em;
	font: 1.25em ubuntu, sans-serif;
	
	&::before {
		position: absolute;
		z-index: -1;
		inset: calc(-1*var(--b));
		border: inherit;
		border-radius: var(--r);
		background: linear-gradient(rgb(221, 220, 220), rgb(80, 80, 80), rgb(207, 205, 207)) border-box;
		--corner: 
			conic-gradient(from -90deg at var(--c) var(--c), red 25%, #0000 0) 
				0 0/ calc(100% - var(--c))  calc(100% - var(--c)) border-box;
		--inner: conic-gradient(red 0 0) padding-box;
		mask: 
			var(--corner) subtract, 
			var(--inner);
		content: ''
	}
}

.container {
    padding:5rem;
    margin-bottom: 20px;
}



.slider-wrapper {
    position: relative;
    max-width: 40rem;
    margin: 0 auto;
    top:60px;
    padding-bottom:80px;
    
}

.slider {
    display: flex;
    aspect-ratio: 16/9;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
    border-radius: 15px;
    
}

.slider img {
    flex: 1 0.23 100%;
    scroll-snap-align: start;
    object-fit: cover;
}

.slider-nav {
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left:50%;
    transform: translateX(-50%);
    z-index: 1;

}

.slider-nav a {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 1;
    transition: opacity ease 250ms;
}

.slider-nav a:hover {
    opacity: 1;
}

.projects {
    font-family: var(--default-font-family);
    text-align: center;
    padding: 25px 10px;
}

.container-projects {
    padding: 60px 30px;
    max-width: 800px;
    display: block;
    margin: 0 auto;
}

.pro-h2 {
    font-family: var(--default-font-family);
    font-size: 30px;
    font-weight: 250;
   
}

.pro-1 {
    font-family: var(--primary-font-family);
    font-size: 20px;
    padding: 20px 20px 20px;
}

.col-md-6 {
    padding: 50px;
    background-color: rgba(238, 235, 231, 0.466);

}

.primary-link {
    border-radius: 6px;
    background-color:rgba(97, 59, 185, 0.548);
    color: white;
    padding: 20px 15px;
    text-decoration: none;
    box-shadow: 1px 2px rgba(187, 186, 186, 0.226);
    position: relative;
    left: 95px;
    transition: all 120ms ease-in-out;
    font-family: var(--primary-font-family);


}

.primary-link:hover {
    font-size: 20px;
}

.img-fluid {
    box-shadow: 1px 2px rgba(187, 186, 186, 0.226);
}