@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: 2em;
}

#header {
    width: 100%;
}

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

/*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: 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 {
    
}
}

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

#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-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: 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 {
    
}
}