:root {

    --color: aqua;
    --color: blanchedalmond;
}


/* display: flex; */
/* flex-wrap: wrap; */






body {

    margin: auto;
    padding: auto;
    color: black;
    /* background-color: rgb(18, 18, 18); */
    /* box-sizing: border-box; */
}

main {

    display: flexbox;

}



header {
    height: 160px;
    display: flex;
    width: 100%;
    margin: 0 auto;
    /* padding: 2.5rem; */
    text-align: center;
    background-color: blanchedalmond
}

.top-header {
    top: 25px;
    position: relative;
    right: 500px
}

.text {

    position: absolute;
    left: 100px;
    right: 10px
}

header h1 {

    padding: 10px;
    font-family: fantasy;
    color: var(--aqua);
    /* position: relative; */
    /* right: 100px; */

}

h2 {
    position: relative;



}

#text {

    position: relative;
    top: 400px;

}

#contact {

    position: relative;
    left: 0px;
    top: 300px;
    display: flex;
    justify-content: center;



}

.text-center {

    position: relative;
    left: 300px;

}

/* header */

/* ,footer  */
/* { */
/* height: 60px; */
/* width: 100%; */
/* line-height: 60px; */

/* } */


.profile-picture {
    /* position: relative; */
    left: 500px;
    bottom: 145px;
    width: 130px;
    height: 150px;
    border: 5px solid white;
    border-radius: 30%;
}

.img {
    float: none;
    width: 95%;
    height: 85%;
    justify-content: center;


}

.img a {
    float: left;
    color: azure;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;

}

.img a:hover {

    background-color: black;
    color: blueviolet;

}

.coming-soon {

    float: none;
    width: 95%;
    height: 85%;
    justify-content: center;
    border-radius: 50%;


}

.topnav {

    background-color: aquamarine;
    height: 100px;
    /* overflow: hidden; */

}

.topnav a {

    float: left;
    color: azure;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;

}

.topnav a:hover {

    background-color: black;
    color: blueviolet;

}



nav {

    /* position: relative; */
    bottom: 170px;
    right: 40px;
}


/* body { */
/* font-family: Arial, Helvetica, sans-serif; */
/* margin: 0; */
/* } */

/* html { */
/* box-sizing: border-box; */
/* } */

/* *, *:before, *:after { */
/* box-sizing: inherit; */
/* } */






/* .column { */

/* float: left; */
/* width: 33.3%; */
/* margin-bottom: 16px; */
/* padding: 0 8px; */
/* } */

.main-cards {

    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    margin: 20px;

}

.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 50%;
    width: 50%;
    background-color: #474e5d;
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: 8px;
}

.card:first-child {
    grid-row: 1 / -1;

}

.about-section {

    /* padding: 50px; */
    height: 150px;
    text-align: center;
    background-color: #474e5d;
    color: white;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: s;
    padding: 0 16px;

}

/* .container::after, .row::after { */
/* content: ""; */
/* clear: both; */
/* display: table; */
/* } */

.title {
    color: var(--blanchedalmond);
    position: relative;

}

.button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.button:hover {
    background-color: #555;
}

/* media (max-width: 650px) { */
/* column { */
/* width: 100% */
/* display: block; */
/* } */
/* } */







section {
    margin-bottom: 0;
    padding: 20px 10px 40px 10px;
    border-top: 3px solid #fff;
    background-color: #fff;
}

form {
    margin: 0 auto;
    width: 500px;
    padding: 10px;
    border: 5px solid aqua;
    border-radius: 20px;
}

input {
    box-sizing: border-box;
    width: 300px;
    border: 1px solid #f1edd0;

}

label {

    width: 100px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

button {
    height: 40px;
    width: 120px;
    background-color: aqua;
    color: var(--aqua);
}

@media screen and (max-width: 807px) {
    button {
        height: 40px;
        width: 120px;
        background-color: aqua;
        color: var(--aqua);

        header {
           justify-content: center;
           
        }
            
    }

}

@media screen and (max-width: 768) {}

@media screen and (max-width: 660) {}