@import "reset.css";

/* DESKTOP */
@media screen and (min-width:411px) {
    #navbar {
        display:flex;
        margin-left:auto;
        justify-content:flex-end;
        padding:20px;
        background-color:rgb(47, 44, 61)
    }
    #navbar a {
        margin:10px; 
        font-size:18pt;
    }
    .aboutitem img {
        width:25vw;
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    .aboutitem {
        padding:15px;
    }
    #aboutgrid {
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr ;
        width:60vw;
        margin-right:auto;
        margin-left:auto;
        background-color:rgb(180, 173, 201);
    }
    .aboutflex {
        display:flex;
    }
    #homelogo {
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    #hometitle {
        text-align:center;
        font-size:48pt;
        font-family:"Poiret One";
        margin-right:30vw;
        margin-left:30vw;
        margin-top:30px;
        margin-bottom:30px;
        padding:10px;
        background-color:rgb(47, 44, 61);
        color:azure;
        border-radius:15px;
        transition:transform 1s;
    }
    #hometitle:hover {
        transform:scale(1.1);
    }
    #homegrid {
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows:1fr 1fr;
        width:100%;
        background-color:rgb(82, 80, 96)
    }
    #homegrid img {
        width:30vw;
        margin:auto;
        margin-top:20px;
        margin-bottom:20px;
    }
    #homegrid p {
        margin:50px;
        font-size:24pt;
    }
    .biotitle {
        text-align:center;
        font-size:3vw;
        margin-bottom:20px;
        font-family:"Poiret One";

    }
    .biotext {
        font-size:1.3vw;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    #listgrid {
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-template-rows:1fr 1fr;
    }
    #listtitle {
        text-align:center;
        margin:50px;
        font-size:5vw;
        font-family:"Poiret One";
        color:azure;
        background-color:rgb(47, 44, 61);
        padding:10px;
        width:60vw;
        margin-left:auto;
        margin-right:auto;
        border-radius:15px;
    }
    #listitem1 {
        width: 26vw;
        display:block;
        margin:auto;
    }
    #listgrid h2 {
        text-align:center;
        font-size:3vw;
        font-family:"Poiret One";
        margin-bottom:10px;
    }
    .listitem {
        margin:10px;
        padding:5px;
        background-color:rgb(180, 173, 201);
        border-radius:15px;
    }
    a {
        text-decoration:none;
    }
    a:link {
        color:white
    }
    a:visited {
        color:rgb(166, 147, 198)
    }
    a:hover {
        color:rgb(117, 117, 214)
    }
    a:active {
        color:brown
    }
    body {
        background-color:rgb(113, 110, 128)
    }
    #homeitem1 {
        color:azure;
        font-family:"Poiret One";
        text-align:center;
    }
    #homeitem4 {
        margin-left:auto;
        margin-right:auto;
    }
    footer {
        text-align:center;
        font-family:"Poiret One";
        padding:20px;
        color:azure;
        background-color: rgb(47, 44, 61);
    }
    #aboutfoot {
        background-color:rgb(47, 44, 61);
    }
    #facebook {
        display:block;
        margin:10px;
        margin-left:auto;
        margin-right:auto;
        transition:transform 1s;
    }
    #facebook:hover {
        transform:scale(1.1);
    }
    .content {
        text-align:center;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    #contact {
        display:flex;
        flex-direction:column;
        justify-content:center;
        margin-left:15vw;
        margin-right:15vw;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        text-align:center;
        font-size:24pt;
        margin-top:50px;
        margin-bottom:50px;
    }
    label {
        margin: 10px;
    }
    input {
        height:40px;
        margin:5px;
    }
    #submit {
        width:300px;
        height:50px;
        margin-left:auto;
        margin-right:auto;
        font-size:15pt;
    }
    #thankyou {
        font-family:"Poiret One";
        font-size:30pt;
        margin:30px;
        color:azure;
        text-align:center;
    }
    #formtitle {
        font-size:30pt;
        text-align:center;
        padding:10px;
        margin-top:20px;
        font-family:"Poiret One";
    }
    .backimage {
        background-image: url("images/background.jpg");
        width:100%;
        background-attachment: fixed;
    }
}

/* MOBILE */
@media screen and (max-width:411px) {
    .backimage {
        background-image: url("images/background.jpg");
        width:100%;
        background-attachment: fixed;
    }
    .aboutflex {
        display:flex;
        margin-top:50px;
        background-color:rgb(82, 80, 96);
    }
    .aboutitem img {
        width:50vw;
    }
    .biotitle {
        text-align:center;
        font-size:7vw;
        font-family:"Poiret One";
        margin-bottom:10px;
        color:azure;
    }
    .biotext {
        font-size:4vw;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        color:rgb(191, 199, 199);
    }
    .aboutitem {
        margin:10px;
    }
    #navbar {
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows:1fr 1fr;
        text-align:center;
        background-color:rgb(47, 44, 61);
        padding:10px;
    }
    #navbar a {
        padding:5px;
        font-size:16pt;
    }
    #homegrid {
        display:flex;
        flex-direction:column;
    }
    #homeitem2 {
        width:80vw;
        display:block;
        margin:auto;
        margin-top:20px;
        margin-bottom:20px;
    }
    #homegrid p {
        text-align:center;
        font-size:20pt;
        margin:10px;
    }
    #hometitle {
        text-align:center;
        font-size:36pt;
        font-family:"Poiret One";
        margin:10px;
    }
    #homelogo {
        display:block;
        margin-left:auto;
        margin-right:auto;
        width:55vw;
    }
    #listtitle {
        text-align:center;
        margin:30px;
        font-size:15vw;
        font-family:"Poiret One";
        color:azure;
    }
    #listgrid {
        background-color:rgb(82, 80, 96)
    }
    #listitem1 {
        width: 65vw;
        display:block;
        margin:auto;
    }
    a {
        text-decoration:none;
    }
    a:link {
        color:white
    }
    a:visited {
        color:rgb(166, 147, 198)
    }
    a:hover {
        color:rgb(117, 117, 214)
    }
    a:active {
        color:brown
    }
    body {
        background-color:rgb(113, 110, 128)
    }
    #hometitle {
        background-color:rgb(47, 44, 61);
        border-radius:20px;
        color:azure;
    }
    footer {
        text-align:center;
        font-family:"Poiret One";
        padding:20px;
        color:azure;
        background-color: rgb(47, 44, 61);
    }
    #homeitem3 {
        display:none
    }
    #facebook {
        display:block;
        margin:10px;
        margin-left:auto;
        margin-right:auto;
    }
    #homeitem1 {
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        color:azure;
        background-color:rgb(82, 80, 96);
        padding:5px;
        border-radius:5px;
    }
    .set {
        text-align:center;
        padding:10px;
        margin:5px;
        background-color:rgb(47, 44, 61);
        border-radius:15px;
        font-family:"Poiret One";
        color:azure;
        font-size:20pt;
    }
    .content {
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        text-align:center;
        padding:5px;
    }
    #contact {
        display:flex;
        flex-direction:column;
        margin-left:10vw;
        margin-right:10vw;
        justify-content:center;
    }
    label {
        text-align:center;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:16pt;
        margin:10px;
    }
    input {
        height:25px;
    }
    #submit {
        width:100px;
        margin:10px;
        margin-left:auto;
        margin-right:auto;

    }
    #formtitle {
        font-size:30pt;
        text-align:center;
        padding:10px;
        margin-top:20px;
        font-family:"Poiret One";
    }
}
#navbar {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#address {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:16pt;
    text-align:center;
    padding:10px;
    border-bottom:solid;
    margin-bottom:15px;
}