@import "reset.css";
body{
    display:flex;
    flex-direction: column;
    font-size: xx-large;
    background-image: url("media/city.jpg");
}
header{
    width:50%;
    margin-top:30px;
    margin-bottom:30px;
    margin-left: auto;
    margin-right:auto;
    border:10px solid black;
    padding:30px;
    background-color: whitesmoke;
    opacity:0.9;
    font-family:"Bebas Neue";
}

footer{
    width:50%;
    margin-top:30px;
    margin-bottom:30px;
    margin-left: auto;
    margin-right:auto;
    border:10px solid black;
    padding:30px;
    background-color: whitesmoke;
    opacity:0.9;
    font-family:"Bebas Neue";
}
a{
    text-decoration:none;
    color:gray;
    font-size: xx-large;
    font-family:"Bebas Neue";
    text-align:right;
}

a:hover{
    color:purple;
}

h1{
    font-family:"Pacifico";
    color:black;
}

h2{
    font-family:"Pacifico";
    color:black;
}

section{
    text-align: center;
    width:50%;
    margin-top:30px;
    margin-bottom:30px;
    margin-left: auto;
    margin-right:auto;
    border:10px solid black;
    padding:30px;
    background-color: whitesmoke;
    opacity:0.9;
    font-family:"Bebas Neue";
}
.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

nav{
    display:flex;
    justify-content: space-around;
}

.pacifico-regular {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
  }

.kanit-regular {
    font-family: "Kanit", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
p{
    font-family:"Kanit";
    font-size: x-large;
    color:rgb(13, 13, 128);
    line-height:1.5;
}

.image{
    width:75%
}

h3{
    font-size: xx-large;
}

hr{
    width:0px;
    background-color:none;
}

label{
    font-size: xx-large;
    color:black;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-family:"Bebas Neue", serif;
    text-align:left;
}

.normal{
    font-size: xx-large;
    border: 5px solid black;
    padding: 15px;
    margin-top:10px;
    margin-bottom:10px;
    font-family: "Bebas Neue";
    background-color: white;
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:75%;
}

textarea{
    font-size: xx-large;
    border: 5px solid black;
    padding: 15px;
    padding-bottom:50px;
    margin-top:10px;
    margin-bottom:10px;
    height:50px;
    background-color: white;
    display:flex;
    align-items: center;
    margin-left:auto;
    margin-right:auto;
    width:75%;
    font-family: "Bebas Neue";
}

.finish{
    border-radius:15px;
    font-size: xx-large;
    border: 5px solid black;
    padding: 5px;
    margin-top:10px;
    margin-bottom:10px;
    font-family: "Bebas Neue";
    background-color: white;
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

div{
    text-align:center;
}

@media screen  and (min-width: 601px) and (max-width:1199px) {
    section{
        width:85%;
       }

    header{
        width:85%;
    }

    footer{
        width:85%
    }

    a{
        font-size: 30px;
    }

    h1{
        font-size: xx-large;
    }

    .name{
        text-align: center;
    }

    p{
        text-align: center;
    }

    h4{
        font-size: 30px;
    }

    iframe{
        width:75%
    }
}

@media screen and (min-width:1200px) {

}

@media screen and (max-width:600px){
    section{
        width:85%;
       }

    header{
        width:85%;
    }

    footer{
        width:85%
    }

    a{
        font-size: 25px;
    }

    h1{
        font-size: large;
    }

    #picture{
        height:125px
    }

    .name{
        text-align: center;
    }

    p{
        text-align: center;
    }

    h4{
        font-size: 20px;
    }

    iframe{
        display:none;
    }
}