html{
    background-color: gainsboro;
    font-family: 'Raleway', sans-serif;
}

html, body{
    margin: 0; 
    padding: 0; 
}

#logo{
    width: 133px;
    position: absolute;
}

#nav{
    margin: 0;
    padding: 0;
}

nav#main-nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav#main-nav ul li a{
    display: inline-block;
    text-decoration: none;
    padding: .4em .6em;
    margin: 0 10px;
    transition: all .5s;
    color: white;
}

nav#main-nav ul li a:hover{
    font-weight: bold;
}

#main-nav{
    background-color: #6B6782;
    padding-top: 5px;
    padding-bottom: 5px;
}

#image1{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    }



section{
    padding: 2em 5%;
}


h1{
    text-decoration: underline;
    margin: 0;
}

#homeimage{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    }
    
#castle{
    width: 48%;
}

.cont{
    width: 48%;
}

.houses{
    width: 100%;
}


.content1{
    display: flex;
    flex-wrap: wrap;
    background-color: #6B6782; 
    color: white;
    font-weight: lighter;
    font-size: 20;
    margin-top: 3em;
    justify-content: space-between;
}

.content2{
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(31, 20, 65); 
    color: white;
    font-weight: lighter;
    font-size: 20;
    justify-content: space-between;
}

.content3{
    display: flex;
    flex-wrap: wrap;
    background-color: #6B6782; 
    color: white;
    font-weight: lighter;
    font-size: 20;
    justify-content: space-between;
}

.content4{
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(31, 20, 65); 
    color: white;
    font-weight: lighter;
    font-size: 20;
    justify-content: space-between;
}



#hermoine{
    width: 48%;
    max-height: 800px;
}


.content1 {position: relative;}

#ron{
    width: 48%;
    max-height: 500px;
}

#map{
    width: 48%;
    max-height: 800px;
}




@media (max-width: 934px){
    #castle{
        width: 100%;

    }

    nav#main-nav ul li a{
        padding: .2em .2em;

    }

    #ron{
        width: 100%;
    }

    .cont{
        width: 100%;
    }

    #map{
        width: 100%;
    }

    ul{
        font-size: 10;
    }

    p{
        font-size: 15;
    }

    section{
        padding-right: 3em; 
    }

    h1{
        font-size: 20;
    }
    
    #logo{
        width: 100px;
    }

}

.homelink{
    position: relative;
    display: inline-block;
    width: 120px;
}

@media (max-width: 510px){

    p{
        font-size: 10;
    }

    ul{
        font-size: 6;
    }

    nav#main-nav ul li a{
        padding: .1em .2em;

    }

    #logo{
        width: 50px;
    }

    





}