@charset "UTF-8";

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    text-align: center;
}

.wrapper {
    max-width: 1024px;
    margin: 0 auto;
}

p , li {
    font-size: 16px;
    line-height: 30px;
    color: #393939;
}

div#header {
    .wrapper {
        display: flex;
        justify-content: space-between;
        h1.logo {
            padding: 10px 20px;
            font-size: 14px;
            line-height: 30px;
            color: #fff;
            background: #393939;
        }
    }
}

div#main {
    .wrapper {
        div#mainimg {
            width: 100%;
            margin-bottom: 70px;
            img {
                width: 100%;
                height: auto;
            }
        }
        div#profile {
            margin-bottom: 70px;
            h2 {
                margin-bottom: 30px;
                font-size: 30px;
                line-height: 40px;
            }
            div.content {
                margin-bottom: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
                @media screen and (max-width: 768px) {
                    flex-wrap: wrap;
                    padding: 0 30px;
                }
                div.img  {
                    max-width: 150px;
                    @media screen and (max-width: 768px) {
                        max-width: 100%;
                    }
                }
                div.text {
                    text-align: left;
                    a {
                        color: #393939;
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

div#footer {
    margin-top: auto;
    .wrapper {
        padding: 20px;
        border-top: 1px solid #999;
        p {
            font-size: 16px;
            line-height: 30px;
            font-style: normal;
        }
    }
}