*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    } 
     
    html{ 
    scroll-behavior: smooth; 
    } 
    body { 
    background-color: rgb(145, 47, 47); 
    } 
     
    header{ 
    width: 100%; 
    height: 80px; 
    background-color:rgb(97, 144, 143); 
    padding: 10px; 
    color: black; 
    /*position: fixed; */ 
     
    } 
     
    nav { 
    position:absolute; 
    right: 20px; 
    top: 20px; 
    font-size: 22px; 
    color:#340303; 
    } 
    nav ul li { 
    display: inline-block; 
    margin-right: 30px; 
    color:#340303; 
    } 
    nav a{ 
    color: rgb(0, 0, 0); 
    font-size: 1.0em; 
    } 
    nav a:hover{ 
    color: rgb(123, 184, 174); 
    } 
    #banner { 
    background-image: url(../images/dragonbanner.JPG); 
    width: 100%; 
    height: 30vh; 
    background-size: contain; 
    background-position: center top; 
    text-align: center; 
     
    } 
     
     
    main,footer{  
    padding: 20px; 
    } 
    main article p { 
    max-width: 60ch; 
    position: relative; margin:0 auto; 
    } 
    main { 
    padding-top: 20px; 
    font-size: 12px; 
     
    } 
    footer { 
    background-color: rgb(145, 47, 47); 
    font-size: 10px; 
    } 
     
    .fancy-button{ 
    background-color: rgb(91, 131, 125); 
    padding: 20px 35px; 
    border-radius: 10px; 
    box-shadow: 2px 4px 10px #36052183; 
    border: 5px double rgb(81, 121, 116); 
    color: rgb(255, 255, 255); 
    font-weight: bold; 
    } 
    .fancy-button:hover { 
    background-color: rgb(72, 116, 115); 
    color: rgb(55, 95, 101); 
    rotate: 2deg; 
    } 
    /* Styling the form */ 
     
    input[type=text], 
    input[type=password], 
    input[type=submit], 
    textarea{ 
    display: block; 
    padding: 10px; 
    border: 1px solid pink; 
    margin-bottom: 16px; 
    border-radius: 10px; 
    width: 260px; 
    } 
     
    .gallery { 
    display: grid; 
    grid-template-columns:repeat(auto-fit, minmax(277px, 1fr) ); 
    gap: 2px; 
    background-color: rgb(216, 152, 152); 
    color: white; 
    font-family: "Merriweather", serif; 
    font-weight: 300; 
    font-style: normal ; 
    text-align: center; 
    } 
     
     
    #logo{ 
    position: relative; 
    top: 40px; 
    left: -20px; 
    } 
     
    #title-box{ 
    position: relative; 
    top: -30px; 
    } 
     
    #title-box p{ 
    color: #ffffff; 
    font-size: 20px ; 
     
    } 
    h1{ 
    color: #000000; 
    font-family: 'Times New Roman', Times, serif; 
    font-weight: 400; 
    font-style: normal; 
    line-height: normal; 
    position: relative; margin:0 auto; 
    margin-left: 30px; 
     
    } 
     
    h2{ 
    color: white; 
    text-align: center; 
    font-family: "Merriweather", serif; 
    font-weight: 300; ; 
    } 
     
    h3{ 
    margin-top: 20px; 
    margin-left: 150px; 
    margin-right: 150px; 
    font-size: 15px; 
    } 
    #about{ 
    text-align: center; 
    font-family: "Inter", sans-serif; 
    font-weight: 800; 
    font-style: normal; 
    color: rgb(255, 255, 255); 
    margin-top: -4ch; 
    margin-bottom: 4ch; 
    font-size: 20px 
    } 
     
    #interests{ 
    background-color:rgb(216, 152, 152); 
    text-align: center; 
    font-family: "Merriweather", serif; 
    font-weight: 300; ; 
    color: white; 
    } 
     
    #contact{ 
    background-color: rgb(141, 85, 92); 
     
    text-align: center; 
    } 
     
    #footer{ 
    background-color:rgb(97, 144, 143); 
    font-family: "Merriweather", serif; 
    } 
     
    button{ 
    border-radius: 20px; 
    padding: 20px 30px; 
    background-color:rgb(97, 144, 143); 
    margin-top: 20vh; 
    border: none; 
    color: white; 
     
    } 
     
    .center{ 
    display: inline-block; 
    max-width: 70px; 
    min-width: 70px; 
    } 
     
    * {box-sizing:border-box} 
     
    /* Slideshow container */ 
    .slideshow-container { 
    max-width: 1000px; 
    position: relative; 
    margin: auto; 
    } 
     
    /* Hide the images by default */ 
    .mySlides { 
    display: none; 
    } 
     
    /* Next & previous buttons */ 
    .prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
    user-select: none; 
    } 
     
    /* Position the "next button" to the right */ 
    .next { 
    right: 0; 
    border-radius: 3px 0 0 3px; 
    } 
     
    /* On hover, add a black background color with a little bit see-through */ 
    .prev:hover, .next:hover { 
    background-color: rgba(0,0,0,0.8); 
    } 
     
    /* Caption text */ 
    .text { 
    color: #f2f2f2; 
    font-size: 15px; 
    padding: 8px 12px; 
    position: absolute; 
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
    } 
     
    /* Number text (1/3 etc) */ 
    .numbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
    } 
     
    /* The dots/bullets/indicators */ 
    .dot { 
    cursor: pointer; 
    height: 15px; 
    width: 15px; 
    margin: 0 2px; 
    background-color: #bbb; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
    } 
     
    .active, .dot:hover { 
    background-color: #717171; 
    } 
     
    /* Fading animation */ 
    .fade { 
    animation-name: fade; 
    animation-duration: 1.5s; 
    } 
     
    @keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
    }