@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@500&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Barlow+Semi+Condensed:wght@300&family=Vollkorn:wght@500&display=swap');
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            /* Head */
            
            .banner-text h1 {
                font-family: fantasy;
            }
            
            .banner-text p {
                font-family: fantasy;
            }
            
            nav div a {
                color: white;
                text-decoration: none;
                margin: 20px;
            }
            
            nav div a article {
                margin: 5px;
            }
            
            .banner {
                margin: 0px auto;
                padding: 90px;
                color: white;
                background-size: cover;
                background-image: url("https://images.unsplash.com/photo-1468186402854-9a641fd7a7c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
            }
            
            .banner-text {
                text-align: center;
                font-size: x-large;
            }
            
            .profile-image {
                width: 150px;
                height: 150px;
                object-fit: cover;
                border-radius: 30%;
                margin: 0 auto 20px auto;
                display: none;
            }
            /* Main */
            
            .main-container {
                background-color: lightgray;
                padding-bottom: 20px;
            }
            
            .main-container h2 {
                text-align: center;
                padding-top: 15px;
                font-family: var(--bs-font-sans-serif);
                color: white;
            }
            
            .img {
                max-width: 300px;
                max-height: 250px;
            }
            
            .my-card {
                width: 200px;
                height: 100px;
                padding: 30px;
            }
            
            main section {
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                width: 100%;
                margin: 20px auto;
                padding: 20px;
                padding-bottom: 20px;
                gap: 15px;
            }
            
            sl-button a {
                text-decoration: none;
                color: salmon;
            }
            
            h4 {
                text-align: center;
                font-family: var(--bs-font-sans-serif);
                background-color: lightgray;
                border-radius: 10px;
                color: salmon;
                font-size: 20px;
                padding: 5px 0px;
            }
            
            sl-button-group {
                padding-left: 70px;
                border-radius: 20%;
            }
            
            hr {
                margin-bottom: 30px;
                margin-left: 60px;
                margin-right: 60px;
            }
            /* form */
            
            .mb-3 {
                padding-left: 60px;
                padding-right: 60px;
            }
            
            .mb-3 #exampleFormControlTextarea1 {
                height: 150px;
            }
            /* submit button */
            
            .btn {
                background-color: white;
                width: 130px;
                margin-left: 60px;
                padding: 2px;
                border-radius: 8px;
            }
            
            .btn:hover {
                color: teal;
            }
            /* Footer */
            
            .media {
                background-color: lightgreen;
            }
            
            footer {
                height: 80%;
            }
            
            .media ul {
                margin-bottom: 0px;
                display: flex;
                padding: 10px 0px;
            }
            
            .media ul li {
                list-style: none;
                display: inline;
                font-size: 20px;
                border-radius: 45%;
                transform: .5s;
                width: 80%;
                text-align: center;
            }
            
            li:hover {
                color: thistle;
            }
            
            .fab::after {
                content: '';
                display: block;
                width: 0;
                height: 2px;
                background: #fff;
                transition: width .3s
            }
            
            .fab:hover::after {
                width: 100%;
                transition: width .3s;
            }

            iframe {
                width: 80%;
                height: 140vh;
            }