*{box-sizing: border-box;}

body {background-color: #f7f3fa;
        color: #0f0f0f;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        background-image: linear-gradient(to bottom,#fff, 
        #f72d92);
        background-repeat: no repeat;}  

header {background-color: #e04e7f;
          color: #fff;
        background-image: url(images/header.jpg);
        background-position: left;
        background-repeat: no-repeat; 
        background-size: contain;
        line-height: 500%;
        text-indent: 6em;
        text-align: center;
        border-radius: 20px;}

form{display:flex; flex-flow: column nowrap;}
input,textarea{margin-bottom:1em;}

@media (min-width: 1024px){

nav {text-align: center;
        font-weight: bold;
        margin-top: 0;
        }

nav ul{
        list-style-type: circle;
        padding-left: 0;
        font-size: 1.4em;
        margin: 0;
}


nav {background-color: #ccccff;
        line height: 2.5em;
        font-weight: bold;
        border-radius: 20px;
        text-align: center;}

nav a{text-decoration; none;
        transition:5s ease-in-out;}
nav li {border: 1px solid #fa2df0;}
nav a:link{color:#000;}
nav a:hover{color: #ee11c9;;}

main {padding:1px 20px 20px 20px;
        display: block;
        padding-left: 30px;
        background-color: #fff;
        overflow: auto;}

section {float:right;
        width: 33%;
        padding-left: 2em;
        padding-right: 2em;
}


footer {background-color: #c338cf;
        text-align: center;
        font-size: 75%;
        padding:1em;}

h2 {color: #f72d92;
font-family: Georgia, 'Times New Roman', Times, serif;
text-shadow: 2px 2px 2px #e04e7f}

h1 {font-family: Georgia, 'Times New Roman', Times, serif}

header h1{margin-bottom: 0; margin-top: 0px;}

ul {list-style-type: circle; }

dt {color: #e2199f;}

.name {color: #ee11c9;}

#address{color: #f01394;}

#homeimg {background-image: url(images/home.jpg);
        height: 300px;
        background-repeat: no-repeat;
        background-size: 60% 80%;
        background-position: center;}

#passportimg {background-image: url(images/passport.webp);
                height: 300px;
                background-repeat: no-repeat;
                background-size: 60% 80%;
                background-position: center;}

#spaimg {background-image: url(images/spa.jpg);
        height: 300px;
        background-repeat: no-repeat;
         background-size: 60% 80%;
         background-position: center;}

#registerimg {background-image: url(images/sign_up.jpg);
        height: 300px;
        background-repeat: no-repeat;
         background-size: 60% 80%;
         background-position: center;}

#galleryimg {background-image: url(images/gallery.jpeg);
        height: 300px;
        background-repeat: no-repeat;
         background-size: 90% 90%;
         background-position: center;}

#viewsimg {background-image: url(images/views.jpg);
        height: 300px;
        background-repeat: no-repeat;
         background-size: 90% 90%;
         background-position: center;}

#collageimg {background-image: url(images/collage.jpg);
        height: 300px;
        background-repeat: no-repeat;
         background-size: 90% 90%;
         background-position: center;}

    #cover{margin:auto;
        width: 80%;
        background-image:linear-gradient(to bottom,#fff,
        #df4a9c )
        box-shadow: 3px 3px 3px #f730c5;
        border; 3px solid #003;
        background-repeat: no-repeat;
        grid-template-columns: 180px auto;
        grid-template-rows: auto;}   

table {border: 1px;px solid #ccccff;
        border-collaspe: collaspe;}
td, th {padding: 0.5em;
        border: 1px solid #ccccff
        text-align: center;}
tr:nth-of-type(odd) {background-color: #f7f3fa;}
th {background-color: #fbfbfc;}

caption {font-weight: bolder;
        text-align: center;
        color:#e04e7f;
        font-family:'Times New Roman', Times, serif;}
        
iframe {float: right; margin: 1em;}


header {grid-row:1/2 ;grid-column:1/3; }
nav{grid-row: 1/5 ;grid-column: 1/2;}
div{grid-row:2/3; grid-column: 2/3;}
main{grid-row:2/4; grid-column: 2/3;}
footer{grid-row:4/5; grid-column: 3/4;}

nav li {border-bottom: 0px;}
    }



form{
        display:grid;
        grid-gap:1em;
        grid-template-columns:6em 1fr;
        grid-template-rows: auto;
        width:60%;}

input[type="submit"] {
        grid-column: 2/3;
        width:10em;
}

* {box-sizing:border-box}