@import "reset.css";
body{
    display:grid;
    grid-template-areas:
    'headimg headimg headimg'
    'image1 image2 image3'
    'image4 image5 image6'
    'image7 image8 image9';
    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:center;
}

a:hover{
    color:purple;
}

h1{
    font-family:"Bokor";
    color:black;
    padding-top:3px;
    font-size: xx-large;
}

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

section{
    text-align: center;
    width:50%;
    margin-top:30px;
    margin-bottom:30px;
    margin-left: auto;
    margin-right:auto;
    padding:50px;
    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: large;
    color:rgb(13, 13, 128);
    line-height:1.5;
}

.image{
    width:100%;
    display: block;
    margin-left: auto;
}

h3{
    font-size: xx-large;
    text-align: center;
}

.name{
    text-align: left;
}

.desc{
    margin-left:50px;
    width:100%;
    align-items:flex-end;
    text-align: left;
}

.bokor-regular {
    font-family: "Bokor", system-ui;
    font-weight: 400;
    font-style: normal;
  }
@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;
    }
}

@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;
    }

    .image{
        display:none;
    }

    .name{
        text-align: center;
    }

    p{
        text-align: center;
    }

    h4{
        font-size: 20px;
    }
}