html,body{
    margin:0 auto;

}

body{
	background-color: antiquewhite;
	background-image: url('../images/bg.jpg');
	background-blend-mode: darken;
	background-size: cover;
        overflow-x:hidden;
}

.container-fluid{
        max-width:1205px;
 }

.row{
    margin:0.3rem;
    padding:0.75rem;
}

.justify{
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-box{
    text-align:justify;
    padding: 2rem;
    border: 1px solid #6c757d;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 2px 2px 5px rgba(0, 0 0, 0.1);
    opacity:0.95;
    color:rgb(31, 52, 52);
	font-family: text Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: medium;
}

/* cards*/
.card{	
	text-align: center;
	background-color:rgba(248, 249, 250);
	opacity:0.75;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: all 0.6s;
}

.card:hover{
	opacity:1;
}

.gallery-card{	
	text-align: center;
	background-color:rgba(248, 249, 250);
	opacity:0.75;
    border-radius: 0.5rem;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: all 0.6s;
    padding:0.7rem;
    margin-left:1rem;
}

.gallery-card img{
    border: 1px solid #6c757d;
    border-radius: 0.5rem;
}

.gallery-card:hover{
	opacity:1;
}

/* border style */
.borderimg {
  border: 50px solid transparent;
  padding: 5px;
  border-image: url(../images/frame.png) 10% round;
  margin-top:2.5rem;
  margin-bottom:2.5rem;
}

.borderimg2 {
  border: 50px solid transparent;
  padding: 25px;
  border-image: url(../images/frame2.png) 10% round;
}

.ribbon{
    background-image: url('../images/ribbon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    width:100%;
    height:500px;
    position:absolute;
    top:0;
    z-index:10;
}

/* specific section styles */
#flytrap{
	background-image:url("../images/trap.png");
	background-size: cover; 
	box-shadow: inset 0 0 80px 50px antiquewhite;
	border: 2px double #B31B1B;
	border-radius: 0rem;
    margin-top:2.5rem;
}

#bottom{
    background: linear-gradient(180deg, rgba(250, 235, 215, 0) 0%, rgba(248, 249, 250, 1) 40%);
    background-size: cover; 
    width:100vw;
}

#bottom img{
    width:100%;
    opacity:0.7;
}

/* font styles */
@font-face {
	font-family: 'blush';
	src: url(../fonts/Blush.otf);
}

@font-face {
  font-family: text;
  src: url(../fonts/TG-Transit.otf);
}

h1{
	color:rgba(248, 249, 250);
	font-family: 'blush', 'Courier New', Courier, monospace;
	text-shadow: 2px 2px 2px #6c757d;
}

h5{
    font-family: monospace;
    color:#6c757d;
    text-shadow: 2px 2px 2px #6c757d;
}

h6{
    font-family: monospace;
	text-decoration: none;
    color:rgba(0, 0 0, 0.65)
}

.card-title{
    font-family: monospace;
    font-size:large;
}

a{
    font-family: monospace;
	text-decoration: none;
	color:#6c757d;
}

a:hover{
	color:#B31B1B;
    text-shadow: 2px 2px 2px #6c757d;
    animation: link-hover 1.7s ease-out;
}

@keyframes link-hover{
    0% {
        opacity: 0.6;
    }
    100%{
        opacity: 1;
    }
}

/* nav styles */
.navbar{
     font-size:small;
     font-family: monospace;
     line-height: 15%;
     transition: all 0.6s;
	 box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.navbar-brand{
     font-size:small;
     text-align: center;
     line-height: 20%;
     text-decoration: underline wavy #B31B1B;
}

.nav-item a:hover{
	color:#B31B1B;
    animation: link-hover 1.7s ease-out;
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: #6c757d;
  --bs-dropdown-link-active-color: #fff;
}

.navbar-scrolled{
    opacity:0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.navbar {
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.25rem;
  --bs-navbar-toggler-font-size: 1rem;
  --bs-navbar-toggler-border-color: none;
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width: 0rem;
  --bs-navbar-toggler-transition: 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}

.nav-row{
    margin:0.3rem;
    padding:0rem;
    min-width:768px;
}

.ribbon-row{
    width:70%;
    position: relative; 
    padding-top:100px;
    margin:0 auto;
}

/* spin carousel styles */
.container{
	margin: 0 auto;
	width: 100%;
	position: relative;
}

#carousel{
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	animation: rotation 20s infinite linear;
}

#carousel figure{
	display: block;
	position: absolute;
	width: fit-content;
	height: fit-content;
	left: 50px;
	top: 50px;
	background:none;
	overflow: hidden;
	border: none;
}

#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}


@keyframes rotation{
	from{
		transform: rotateY(0deg);
	}
	to{
		transform: rotateY(360deg);
	}
}


/*media queries for responsiveness*/

@media (max-width: 990px) {
.ribbon-row{
   padding-top:90px;}
}

@media (max-width: 786px) {
.ribbon-row{
   padding-top:75px;
    width:100%;}
}

@media (max-width: 786px) {
.nav-row{
    min-width:90%;
}
}