@import "reset.css";

/* desktop */
@media screen and (min-width:641px) {
    #navbar {
        display:flex;
        justify-content:space-between;
        background-color:rgb(255, 211, 157);
        align-items:center;
    }
    .navlink {
        padding:20px;
        font-size:20pt;
        text-decoration:none;
        background-color:beige;
    }
    .navlink:hover {
        background-color:rgb(241, 180, 139);
    }
    #links {
        margin:20px;
    }
    #navlogo {
        height:80px;
        margin:15px;
    }
    a:link {
        color:rgb(68, 27, 27)
    }
    a:visited {
        color:rgb(68, 27, 27)
    }
    a:hover {
        color:rgb(134, 50, 127)
    }
    a:active {
        color:rgb(28, 32, 85)
    }
    a {
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    #homecontainer {
        display:flex;
    }
    .boxitem {
        display:flex;
    }
    #hometitle {
        font-size:40pt;
        text-align:center;
        margin:30px;
        background-color:rgb(216, 164, 130);
        padding:10px;
        border-radius:30px;
        color:rgb(95, 1, 87);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        transition:transform 1s;
    }
    #hometitle:hover {
        transform:scale(1.07);
    }
    #homebox1,#homebox2 {
        width:50vw;
    }
    #homebox1 {
        border-right:solid rgb(161, 89, 71);
        background-color:rgb(255, 242, 227)
    }
    #homebox2 {
        background-color:rgb(255, 229, 205)
    }
    #homeimage {
        display:block;
        margin-left:auto;
        margin-right:auto;
        border-radius:20px;
    }
    #homedesc {
        padding:40px;
        font-size:24pt;
        background-color:rgb(253, 208, 170);
        color:rgb(128, 25, 119);
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .boxtitle {
        font-size:32pt;
        text-align:center;
        margin:10px;
        color:rgb(128, 36, 144);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .boximage {
        margin:10px;
        width:20vw;
    }
    .homepara {
        margin:20px;
        font-size:18pt;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #fishgrid,#bugsgrid {
        display:grid;
        grid-template-rows:1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    #fishtitle,#bugstitle{
        text-align:center;
        margin:10px;
        padding:20px;
        font-size:40pt;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        transition:transform 1s;
    }
    #fishtitle:hover,#bugstitle:hover {
        transform:scale(1.1);
    }
    #fishtitle {
        background-color:rgb(196, 215, 255);
        border-radius:20px;
        color:rgb(26, 74, 105);
        margin-left:100px;
        margin-right:100px;
    }
    #bugstitle {
        background-color:rgb(177, 74, 56);
        color:rgb(248, 192, 129);
        border-radius:20px;
        margin-left:100px;
        margin-right:100px;
    }
    .fishitem,.bugitem {
        aspect-ratio: 1/1;
        margin:10px;
    }
    .fishitem {
        border:double 10px rgb(75, 75, 196);
        background-color:rgb(188, 211, 255)
    }
    .bugitem {
        border:double 10px rgb(133, 15, 15);
        background-color:rgb(247, 178, 132)
    }
    .villager {
        display:flex;
        justify-content:center;
        border-bottom:solid;
        background-color:beige;
    }
    .villager > * {
        width:25vw;
        margin:25px;
    }
    .villagername {
        margin-top:auto;
        margin-bottom:auto;
        text-align:center;
        font-size:40pt;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        background-color:rgb(255, 211, 157);
        padding:5px;
        border-radius: 10px;
        color:rgb(128, 36, 144);
        transition:transform 1s;
    }
    .villagername:hover {
        transform:scale(1.1);
    }
    .villagerpara {
        font-size:24pt;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        text-align:center;
    }
    footer {
        background-color:rgb(216, 164, 130);
        text-align:center;
        padding:20px;
        font-size:16pt;
    }
    .itemtitle {
        text-align:center;
        padding:5px;
        margin:5px;
        margin-left:40px;
        margin-right:40px;
        font-size:24pt;
        background-color:white;
        border-radius:15px;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .fishimage {
        width:200px;
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    #goldfish {
        width:150px;
    }
    .imgcap {
        text-align:center;
        padding:5px;
        font-size:14pt;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .itemdesc {
        font-size:18pt;
        margin:10px;
        text-align:center;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .bugimage {
        display:block;
        margin-left:auto;
        margin-right:auto;
        height:125px;
    }
    #formtitle {
        text-align:center;
        padding:15px;
        margin:10px;
        font-size:36pt;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        background-color:rgb(196, 135, 191);
        margin-left:200px;
        margin-right:200px;
        border-radius:20px;
        color:rgb(64, 20, 105);
        transition:transform 1s
    }
    #formtitle:hover {
        transform:scale(1.1);
    }
    #address {
        text-align:center;
        font-size:20pt;
        padding:10px;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #contact {
        background-color:blanchedalmond;
    }
    #contactform {
        display:flex;
        flex-direction: column;
        margin:15px;
        margin-left:20vw;
        margin-right:20vw;
    }
    label {
        font-size:24pt;
        margin:10px;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    input {
        height:30px;
    }
    #submit {
        display:block;
        margin-left:auto;
        margin-right:auto;
        width:300px;
        height:75px;
        font-size:20pt;
    }
    #thankyou {
        text-align:center;
        font-size:48pt;
        padding:20px;
        margin:20px;
        margin-left:60px;
        margin-right:60px;
        background-color:rgb(196, 135, 191);
        color:rgb(64, 20, 105);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        border-radius:20px;
    }
    #googlemap {
        width:500px;
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    #socials {
        display:flex;
        justify-content:space-around;
        margin-top:10px;
    }
    .sociallink {
        width:100px;
        transition:transform 1s;
    }
    .sociallink:hover{
        transform:scale(1.15);
    }
}

/* mobile */
@media screen and (max-width:640px) {
    #navlogo {
        display:none;
    }
    #links {
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        background-color:rgb(255, 211, 157);
    }
    .navlink {
        padding:15px;
        margin:15px;
        font-size:16pt;
        text-decoration:none;
        background-color:beige;
    }
    a:link {
        color:rgb(68, 27, 27)
    }
    a:visited {
        color:rgb(68, 27, 27)
    }
    a:hover {
        color:rgb(134, 50, 127)
    }
    a:active {
        color:rgb(28, 32, 85)
    }
    a {
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    #hometitle {
        font-size:24pt;
        text-align:center;
        margin:20px;
        background-color:rgb(216, 164, 130);
        padding:10px;
        border-radius:30px;
        color:rgb(95, 1, 87);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    #homeimage {
        display:block;
        margin-left:auto;
        margin-right:auto;
        width:100vw;
    }
    #homedesc {
        padding:20px;
        font-size:16pt;
        background-color:rgb(253, 208, 170);
        color:rgb(128, 25, 119);
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .boxitem {
        display:flex;
        border-top:solid rgb(128, 25, 119);
    }
    .boximage {
        width:50vw;
    }
    .boxtitle {
        font-size:24pt;
        text-align:center;
        margin:10px;
        color:rgb(128, 36, 144);
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        
    }
    .homepara {
        display:none;
    }
    footer {
        background-color:rgb(216, 164, 130);
        text-align:center;
        padding:20px;
        font-size:16pt;
    }
    .itemtitle {
        text-align:center;
        padding:5px;
        margin:5px;
        margin-left:40px;
        margin-right:40px;
        font-size:24pt;
        background-color:white;
        border-radius:15px;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .fishimage {
        width:200px;
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    #goldfish {
        width:150px;
    }
    .imgcap {
        text-align:center;
        padding:5px;
        font-size:14pt;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .itemdesc {
        font-size:18pt;
        margin:10px;
        text-align:center;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .bugimage {
        display:block;
        margin-left:auto;
        margin-right:auto;
        height:125px;
    }
    #fishtitle,#bugstitle{
        text-align:center;
        margin:10px;
        padding:20px;
        font-size:40pt;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    #fishtitle {
        background-color:rgb(196, 215, 255);
        border-radius:20px;
        color:rgb(26, 74, 105);
    }
    #bugstitle {
        background-color:rgb(177, 74, 56);
        color:rgb(248, 192, 129);
        border-radius:20px;
    }
    .fishitem,.bugitem {
        aspect-ratio: 1/1;
        margin:10px;
    }
    .fishitem {
        border:double 10px rgb(75, 75, 196);
        background-color:rgb(188, 211, 255)
    }
    .bugitem {
        border:double 10px rgb(133, 15, 15);
        background-color:rgb(247, 178, 132)
    }
    .villager {
        display:flex;
        flex-direction: column;
        border-bottom:solid rgb(161, 89, 71);
    }
    .villagerimage {
        width:50vw;
        display:block;
        margin:10px;
        margin-left:auto;
        margin-right:auto;
    }
    .villagerpara {
        font-size:16pt;
        margin:10px;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .villagername {
        font-size:24pt;
        text-align:center;
        margin:10px;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        background-color:burlywood;
        margin-left:30px;
        margin-right:30px;
        padding:10px;
        border-radius:15px;
    }
    #villager1,#villager3,#villager5 {
        flex-direction:column-reverse;
    }
    #villagers {
        background-color:blanchedalmond
    }
    #address {
        text-align:center;
        font-size:16pt;
        padding:10px;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #contact {
        background-color:blanchedalmond;
    }
    #contactform {
        display:flex;
        flex-direction: column;
        margin:15px;
        margin-left:10vw;
        margin-right:10vw;
    }
    label {
        font-size:24pt;
        margin:10px;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    input {
        height:30px;
    }
    #submit {
        display:block;
        margin-left:auto;
        margin-right:auto;
        width:200px;
        height:50px;
        font-size:16pt;
    }
    #formtitle {
        text-align:center;
        padding:15px;
        margin:10px;
        font-size:36pt;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        background-color:rgb(196, 135, 191);
        border-radius:20px;
        color:rgb(64, 20, 105);
    }
    #googlemap {
        width:100vw
    }
    #socials {
        display:flex;
        justify-content:space-around;
        margin-top:10px;
    }
    .sociallink {
        width:75px;
    }
}