@media only screen and (min-width:320px) and (max-device-width : 1100px) {
	body {
  background-color: black;
  color:darkred;
}

#main {
    width: 60%;
    height: 35%;
    position: relative;
    margin: auto;
    top: 60px;
    text-align: center;
    font-size: x-small;
}

#us-photo {
    height: 20vw;
}

.about-card{

}

.custom-iframe {
    border: none;
    height: 331px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.registry-frame {
    background-color: black !important;
}

#lassodog {
    height: 80vh;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

h1{
	font-size: 4em;
}

h2{
	font-size: 3em;
}

p{
	font-size: 3em;
}

#header {
    width: 100%;
}

#titlecard {
    width: 100%;
    height: 45%;
    display: flex;
    position: relative;
    margin: auto;
    top: 50px;
}

/*For the corner thingies*/

.flares{
    height: 75px;
    position: fixed;
}

#left-flare{
    top:5px;
    left:5px;
}

#right-flare{
    top:5px;
    right:5px;
}

#left-flare-bottom{
    bottom:5px;
    left:5px;
}

#right-flare-bottom{
    bottom: 5px;
    right: 5px;
}

/*For the borders around*/
.lines {
    background-color: #f47a56;
    position:absolute;
	display: none;
}

#top-line {
    top: 2.4vh;
    height: 4px;
    left: 0px;
    right: 0px;
    margin-left: 100px;
    margin-right: 100px;
    border-radius:4px;
    border:solid;
    border-width:0px;
}

#bottom-line {
    bottom: 2.4vh;
    height: 4px;
    left: 0px;
    right: 0px;
    margin-left: 100px;
    margin-right: 100px;
    border-radius: 4px;
    border: solid;
    border-width: 0px;
}

#left-line {
    top:0px;
    bottom:0px;
    left: 2vh;
    width: 4px;
    margin-top: 90px;
    margin-bottom: 90px;
    border-radius: 4px;
    border: solid;
    border-width: 0px;
}

#right-line {
    top: 0px;
    bottom: 0px;
    right: 2vh;
    width: 4px;
    margin-top: 90px;
    margin-bottom: 90px;
    border-radius: 4px;
    border: solid;
    border-width: 0px;
}


/*For the two banners on either side*/
.banners {
        height: 50vw;
    position: absolute;
    top: 17vh;
}

#left-banner{
    left:85px;
}

#right-banner{
    right:85px;
}

/*Buttons*/

#selections {
    width: 20%;
    text-align: center;
    position: relative;
    top: 60px;
    margin-left: auto;
    margin-right: auto;
}

 

    .select-btn {
        height: 50px;
        padding: 15px;
    }
.select-btn:hover {
    
}

#maddie-pic{
    height: 550px;
}

#nick-pic {
    height: 550px;
}


div.gallery {
    width: 100%;
    position: relative;
    margin: auto;
}

div.gallery-item {
    width: 50%;
    padding: 5px;
    margin: auto;
}

    div.gallery-item:hover {
        border: 1px solid #777;
    }

    div.gallery-item img {
        width: 100%;
        height: auto;
    }

    div.gallery-item div.desc {
        padding: 15px;
        text-align: center;
    }

@font-face {
    font-family: OldeEnglish; /* set name */
    src: url(Brotherland.otf); /* url of the font */
}
}

@media only screen and (min-width:1281px) {
	body {
  background-color: black;
  color:darkred;
  position:relative;
}

#main {
    width: 50%;
    height: 35%;
    position: relative;
    margin: auto;
    top: 20px;
    text-align: center;
    font-size: x-small;
    color: #f47a56;
}

#us-photo {
    height: 20vw;
}

.about-body {
    height: 100%;
    margin: auto;
}

.about-card {
    display: inline-flex;
    margin-bottom: 100px;
    position: relative;
}

.show-images{
    height:55px;
}

#show-pics {
    display: grid;
}

.custom-iframe {
    border: none;
    height: 331px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.registry-frame {
    background-color: black !important;
}

#lassodog {
    height: 80vh;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

h1{
	font-size: 4em;
}

h2{
	font-size: 3em;
}

p{
	font-size: 2em;
}

#header {
    width: 100%;
}

#titlecard {
    width: 60%;
    height: 35%;
    display: flex;
    position: relative;
    margin: auto;
    top: 20px;
}

/*For the corner thingies*/

.flares{
    height: 75px;
    position: absolute;
}

#left-flare{
    top:5px;
    left:5px;
}

#right-flare{
    top:5px;
    right:5px;
}

#left-flare-bottom{
    bottom:5px;
    left:5px;
}

#right-flare-bottom{
    bottom: 5px;
    right: 5px;
}

/*For the borders around*/
.lines {
    background-color: #f47a56;
    position:absolute;
}

#top-line {
    top: 2.4vh;
    height: 4px;
    left: 0px;
    right: 0px;
    margin-left: 100px;
    margin-right: 100px;
    border-radius:4px;
    border:solid;
    border-width:0px;
}

#bottom-line {
    bottom: 2.4vh;
    height: 4px;
    left: 0px;
    right: 0px;
    margin-left: 100px;
    margin-right: 100px;
    border-radius: 4px;
    border: solid;
    border-width: 0px;
}

#left-line {
    top:0px;
    bottom:0px;
    left: 2vh;
    width: 4px;
    margin-top: 90px;
    margin-bottom: 90px;
    border-radius: 4px;
    border: solid;
    border-width: 0px;
}

#right-line {
    top: 0px;
    bottom: 0px;
    right: 2vh;
    width: 4px;
    margin-top: 90px;
    margin-bottom: 90px;
    border-radius: 4px;
    border: solid;
    border-width: 0px;
}


/*For the two banners on either side*/
.banners {
    height: 60vh;
    position: absolute;
    top: 3vh;
    z-index: 100;
}

#left-banner{
    left:85px;
}

#right-banner{
    right:85px;
}

/*Buttons*/

#selections {
    width: 100%;
    text-align: center;
    position: relative;
    top: 20px;
    
}

 

    .select-btn {
        height: 30px;
        padding: 15px;
    }
.select-btn:hover {
    
}

#maddie-pic{
    height: 550px;
}

#nick-pic {
    height: 550px;
}


div.gallery {
    width: 100%;
    position: relative;
    margin: auto;
}

div.gallery-item {
    width: 50%;
    padding: 5px;
    margin: auto;
}

    div.gallery-item:hover {
        border: 1px solid #777;
    }

    div.gallery-item img {
        width: 100%;
        height: auto;
    }

    div.gallery-item div.desc {
        padding: 15px;
        text-align: center;
    }

@font-face {
    font-family: OldeEnglish; /* set name */
    src: url(Brotherland.otf); /* url of the font */
}
}