@charset "utf-8";


.btns{
	width: 95%;
	text-align: center;
	margin: 0 auto;
	
}
.btn-primary .btn img{
	align-content: center;
}


.brand{
	background-color: transparent;
	border: none;
}
.branding .btn:hover {
	background-color: transparent;
}

body{
	background-color: black;
	background-image: url("images/pattern.svg");
}
#avatar-window{
	border-top-left-radius: 300px;
	border-top-right-radius: 300px;
}
.navbar{
	bs-navbar-toggler-border-color: transparent;
	bs-navbar-toggler-icon-bg: url(https://static.vecteezy.com/system/resources/thumbnails/033/153/185/small/hamburger-list-icons-png.png);
	
}
.websites{
	width: 70%;
	margin: 0 auto;
	margin-top: 8%;
	margin-bottom: 5%;
}
.card {
background-color: rgba(255,255,255,0.17);
box-shadow: rgba(149, 157, 165, 0.1) 20px 8px 24px;
border-radius: 20px;
padding-top: 20px;
	padding-bottom: 10px;
	
	color: white;
	margin-bottom: 5%;
	
}
.entranceidentity{
	animation: fadeup ease-in;
animation-timeline: view();
animation-range: entry 2% cover 40%;
}
.entranceidentity h1{
	width: 60%;
	margin: 0 auto;
	font-family: "Cascadia Code", sans-serif;
	color: white;
	margin-top: 8%;
	
}
.branding h1{
	width: 60%;
	margin: 0 auto;
	font-family: "Cascadia Code", sans-serif;
	color: white;
	margin-top: 8%;
	
}

footer{
	font-family: "cascadia code", sans-serif;
	font-size: 0.8vw;
	margin:  0 auto;
	 text-shadow: 0 0 3px #ff9ec088, 0 0 3px #ff9ec065, 0 0 8px #ff9ec052;
	 margin-bottom: 2%;
	 text-align: center;
	 font-weight: 100;
}
.logofolio{
	margin-top: 6%;
		
	margin: 0 auto;
	text-align: center;
	
}

.logofolio img:hover{
	scale: 1.05;
	transition: 0.5s;
}

.menu{
	border:none;
	background-image:url(https://static.vecteezy.com/system/resources/thumbnails/033/153/185/small/hamburger-list-icons-png.png);
	
}
.bio{
width: 80%;
 font-family: "Cascadia Code", sans-serif;
 font-weight:200;
 color:white;
 align-content: center;
	margin-top: 6%;
	animation-name: fadeInOpacity;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;

	


}

.card{
	text-align: center;
}
.card .btn{
background-color: rgba(255,255,255,0.17);
border: none;
border-radius: 50px;
padding: 2px 15px;
font-family: "cascadia code", sans-serif;

}
.card p{
	font-family: "cascadia code", sans-serif;
	color: white;
	text-align: justify;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 6%;
}

.titlebox{
	margin: 0 auto;
	text-align: center;
	width: 80%;
	margin-top: 4%;
	margin-bottom: 2%;
			animation-name: fadeInOpacity;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}

.titlebox img{
	width:98%;
	border-radius: 30px;
	margin-top: 4%;
}

.gallery{
	width: 80%;
	animation: fadeup linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
.intro{
	color:white; 
	font-family: "Cascadia code", sans-serif;
	font-size: 1.8vw;
	text-align: center;
	margin-top: 4%;
	
}

.intro p{
	margin-top: 2%;
	

	
	
}

h1,h2{
   font-family: "Oswald", sans-serif;
  font-variation-settings: 'wdth' 800;
padding-bottom: 1%;
	
	color: rgba(230,142,83,1.00)
	
}
.fa{
	color:rgba(230,142,83,1.00)
}
.btnback{
    background-color: #ef384f;
	boder-color: none;
}

.btnfoward{
    background-color: #ef384f;
	boder-color: none;	
}
.lauranavbar{
	width: 80%;
	margin:0 auto;
	background-color: rgba(255,255,255,0.37);
	border-radius: 50px;
	font-family: "Cascadia code", Sans-serif;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	
}
.luamodel img{
	width: 100%;
}

.biotext{
	width:80%;
	text-align: justify;
	margin: 0 auto;
	align-content: center;
}

.biotext p{
	font-size: 1.1vw; 
}

.biotext a{
	background-color: #ef384f;
	border-radius: 25px;
	padding: 4px 15px;
	color: white;
	text-decoration: none;
	font-family: "cascadia code", sans-serif;
	font-weight: 300;
	float: right;
}
.navcontent{
	width: 99%;
	
}
.lauranavbar a{
color:white;
	
}

.lauranavbar a:hover{
	color: rgba(255,183,128,1.00);
}

.navbar-nav{
	background-color: #ef384f;
	border-radius: 25px;
	padding: 0px 15px;
	
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgba(230,142,83,1.00);
}
.btn:hover{
	background-color: rgba(230,142,83,1.00);
	scale: 1.1;
}

.navbar-toggler{
background-color: #ef384f;
	border-radius: 25px;
	padding: 8px 15px;
}

.navbar-toggler-icon{
	filter:brightness(100);
}
.dropdown-menu{
	background-color: #ef384f;
	border-radius: 15px;
	padding: 8px 15px;
	border: none;
}
.navbar-toggler:focus{
	box-shadow: none;
}
.dropdown-item:hover{
	background-color: rgba(255,255,255,0.17);
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	border-radius: 25px;
}

.introimgsq{
	display: none;
}

.introimgbig{
	max-width: 1600px;
		animation-name: fadeInOpacity;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
	box-shadow:  0px 28px 14px -11px rgba(255,62,107,0.36)

}

@media (max-width: 1199.98px){
	.introimgbig{
		display: none;
	}
	
	.introimgsq{
		display: block;
		max-width: 600px;
		margin: 0 auto;
			animation-name: fadeInOpacity;
	animation-timing-function: ease-in;
	animation-duration: 1s;
		box-shadow:  0px 28px 14px -11px rgba(255,62,107,0.36)
	}
	
	.introimgsq:hover{
	transform: rotate(-2deg)
	}
	
	
}
@media (max-width:768px) {
	.biotext p{
		font-size:2.2vw ;
}
body{
align-content: center;}

}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeup{
from{
opacity: 0; 
transform: translateY(40px)scale(0.5);}
to{
opacity: 1;
transform: translateY(0) scale(1);}
}


.modal-content{
background: rgba(255, 255, 255, 0.4); 
  backdrop-filter: blur(12px);

  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
font-family: "Cascadia code", sans-serif;
color: white;

}

.modaltext{
	text-align: justify;
	padding-top: 4%;
	padding-bottom: 4%;
}

.modaltext h1{
	width:90%;
	margin: 0 auto;
	  font-family: "Oswald", sans-serif;
	  color: white;
}
.modaltext p{
	width:90%;
	margin: 0 auto;

}
/* Modal Width */
@media (min-width: 992px) {
  .custom-modal-width {
    max-width: 60%;
    width: 60%;
  }
}

#modal1 p{
	font-weight: 200;
}
