<!-- CSS STYLING -->

<style>
/*###################################*/
/* Website Stuff */
/*###################################*/
* {
    box-sizing: border-box;
}

body {
    background-color: white;
    font-family: "Fresca";
}

.main {
    max-width: 1100px;
    margin: auto;
}

a {
    text-decoration: none;
    color: #ff8080;
    transition: color 1s;
}


a:hover {
    color: #df80ff;

}

h1 {
	color: #400080;
    font-size: 50px;

}


h2 {
	color: #400080;
}

h3 {
    color: #400080;
}

h4 {
	font-family: "Antic";
	line-height: 1.2;
	text-decoration: none;
    letter-spacing: 1pt;
    font-size: 12pt;
	color: #400080;
    padding: 6px;
    margin-top: 10px;
}



h5 {
  display: inline-block;
  font-size: 1.5em;
  max-width: 45%;
  background-color: #400080;
  color: #ff8080;
  float: bottom;
}




/* Style the Profile Pic */

.profile-picture {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    max-width: 100px;
    border-radius: 50%;
}

sta[class] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100px;
    filter:url(#round);
}

.proframe {
    margin-top:30px;
    content:"";
    display:block;
    padding-top:100%;
  background:#400080;
  padding: 60px 60px;
  clip-path: polygon(50% 0%, 64% 26%, 98% 35%, 74% 57%, 79% 91%, 50% 77%, 21% 91%, 26% 57%, 2% 35%, 34% 27%);
}

/* Style the Linktree/Caard-like Buttons */

.nav-icon {
  vertical-align: middle;
  display: inline-block;
  fill: #ff8080;
  color: #ff8080;
  cursor: pointer;
  font-family: "Antic";font-size: 14px;
  transition: 0.3s;
}

.nav-icon:hover {
  vertical-align: middle;
  display: inline-block;
  fill: white;
  transition: 0.3s;
}

.nav-icon svg {
  vertical-align: middle;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: "Antic";font-size: 14px;
  transition: 0.3s;
}

.nav-icon:hover svg {
  vertical-align: middle;
  display: inline-block;
  fill: white;
  transition: 0.3s;
}

.btnl {
  text-decoration: none;
  display: inline-block;
  padding: 20px;
  border: none;
  width: 290px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  background-color: #400080;
  color: #ff8080;
  cursor: pointer;
  font-family: "Antic";font-size: 14px;
  transition: 0.3s;
}

.btnl:hover {
  background-color: #df80ff;
  color: white;
  transition: 0.3s;
}

.btnl.active {
  background-color: #ff8080;
  color: white;
  transition: 0.3s;
}

/*###################################*/
/*Footer and Links*/
/*###################################*/


footer {
  position: relative;
  padding: 1rem;
  margin-top: 8px;
  background-color: #e4e4eb;
  text-align: center;
  width: auto;
  height: 3rem;
  border-radius: 10px;
 }

.foot-icon {
   vertical-align: middle;
   display: inline-block;
   fill: black;
   color: #ff8080;
   cursor: pointer;
   font-family: "Antic";
   font-size: 2em;
   transition: 0.3s;
   margin-left:6px;
   margin-right:6px;
 }

.foot-icon:hover {
   vertical-align: middle;
   display: inline-block;
   fill: #df80ff;
   transition: 0.3s;
 }

.foot-icon svg {
   vertical-align: middle;
   display: inline-block;
   text-decoration: none;
   cursor: pointer;
   font-family: "Antic";
   font-size: 2em;
   transition: 0.3s;
 }

.foot-icon:hover svg {
   vertical-align: middle;
   display: inline-block;
   transition: 0.3s;
 }

/* Style the buttons */
.btn {
  text-decoration: none;
  border: none;
  outline: none;
  padding: 12px 10px;
  margin: 6px;
  background-color: #400080;
  color: #ff8080;
  cursor: pointer;
  font-family: "Antic";font-size: 14px;
  border-radius: 10px;
}

.btn:hover {
  background-color: #df80ff;
  color: #ffffff;
  transition: 0.3s;
}

.btn.active {
  background-color: #ff8080;
  color: #ffffff;
}

/*###################################*/
/*Navigation*/
/*###################################*/

.topnav {
  overflow: hidden;
  background-color: #400080;
  border-radius: 10px;

}

.topnav a {

  display: inline-block;
  color: #ff8080;
  text-align: center;

  padding: 1.4rem;
  text-decoration: none;
  font-size: 1.2em;

}

.topnav a:hover {
  background-color: #df80ff;
  color: #ffffff;
  border-radius: 10px;
  transition: 0.3s;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
  padding: 2.3em;
  size: 300px;
}

/* Create a right-aligned (split) link inside the navigation bar */
.splitnav {
  display: inline-block;
  height: auto;
  max-width: 15%;
  background-color: #400080;
  color: white;
  float: left;
}

.splitnav a:hover{
  background-color: #df80ff;
  color: #ffffff;
  border-radius: 10px;
  transition: 0.3s;
}

.logo-container {
   max-width: 100%;
   height: auto;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
}


/*###################################*/
/*Landing Page Links*/
/*###################################*/

.landBtn {
  padding-top: 7px;
  margin-top: 8px;
  text-decoration: none;
  display: inline;
  border: none;
  background-color: #ffffff;
  color: #400080
  cursor: pointer;
  font-family: "Fresca";
  font-size: 2rem;
  transition: 0.3s;
  width: 100%;
}

.landBtn:hover {
  background-color: #df80ff;
  color: white;
  transition: 0.3s;
    border-radius: 10px;
}

.landBtn a {
  color: #ff8080;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
}

.landBtn a:hover {
  background-color: #df80ff;
  color: #ffffff;
  transition: 0.3s;
}

.landImg {
  	height: 350px;
    cursor: pointer;
    transition: 0.3s;
	object-fit: cover;
}

.showImg {
  	width: 300px;
    padding-top: 1em;
    padding-right: 1em;
    height: 600px;
	object-fit: cover;
}



/* Create two equal columns that floats next to each other */
.duoColumn {
  float: left;
  width: 50%;
  height: auto;

  /*padding: 10px;*/
}


.duoText {
  float: left;
  height: 100%;
  margin: 12px;
}

/* Clear floats after the columns */
.duoRow:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .duoColumn {
    width: 100%;
  }
}


/*###################################*/
/*Columns and Rows*/
/*###################################*/
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create three equal columns that sits next to each other */
.column {
  -ms-flex: 32%; /* IE10 */
  flex: 32%;
  max-width: 32%;
  padding: 0 4px;
  display: none;
  padding-top: 8px;
}

.column img {
  vertical-align: middle;
}



/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	display: none;
 }
}

/* Clear floats after rows */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/*###################################*/
/*Lightbox Modal*/
/*###################################*/
/* Style the Image Used to Trigger the Modal */
.myImg {
  	width: 300px;
  	height: 350px;
    cursor: pointer;
    transition: 0.3s;
	object-fit: cover;
}

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    font-family: "Antic";
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.s;
    animation-name: zoom;
    animation-duration: 0.5s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}


/*###################################*/
/*Slideshow Code*/
/*###################################*/

gal[class] {
    display: block;
}

.nvgt{
    position:absolute;
    top: 120px;
    height: 50px;
    width: 30px;
    opacity: 0.6;
}
.nvgt:hover{
    opacity: 0.9;
}
#prev{
    background: #000 url('./image/prev.png') no-repeat center;
    left: 0px;
}
ul {
  list-style-type: none;

  }
 ul li {
	display: inline-block;
	background:white;
  margin-bottom:10px;
}
.change_btn {
  text-align:center;
  font-size:30px;
  float:left;
}


</style>
