@import "fonts.css";
@import "colours.css";

* {   
  margin: 0;
  padding: 0;
}

/* @font-face {
  font-family: "AmericanUncial";
  src: url("American\ Uncial\ Regular/American\ Uncial\ Regular.otf");
  }

@font-face {
  font-family: "IrishUncial";
  src: url("irish-uncialfabeta/IrishUncialfabeta-Bold.ttf");
  }
    
@font-face {
  font-family: "Oseberg";
  src: url("oseberg/Oseberg.ttf");
  }

@font-face {
  font-family: "martel";
  src: url("martel/martel.ttf");
  }

  @font-face {
    font-family: "livingstone";
    src: url("livingstone/Livingst.ttf");
    } */

header {
  padding:clamp(8px, 2.5vw, 16px);
  padding-top:clamp(10px, 4vw, 20px);
  padding-bottom: 0;
  color: rgb(235,235,235);
  /* font-family: 'AmericanUncial', monospace; */
  /* font-family: 'IrishUncial', monospace;  */
  font-family: 'livingstone', monospace; 
  text-align: center;
  background-color: black;
  
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  position:sticky; 
  top:-1px; 
  z-index: 100; 
  height:125px; 
  justify-content: space-around;

  border-bottom: 10px solid black; 
  background-image: url('images/knot_header.png');
  background-size: 1200px;
  background-position-y: 40%;
  background-position-x: 50%;

  /* border-style:outset;
  border-image-source: url('images/knot-frame.png');
  border-image-slice: 130 550 130 550;
  border-image-width: 20% 10% 20% 10%;
  border-image-outset: 0;
  padding-left:8%;
  padding-right:8%;
  padding-top:clamp(10px, 3.5vw, 30px);
  padding-bottom:clamp(10px, 3.5vw, 30px); */


}


footer {
  background:var(--dark-accent-color);
  font-family: 'livingstone', monospace; 
  display: flex;
  flex-wrap:nowrap;
  justify-content: flex-start;
  align-items: center;
  height:125px;

  padding:1em;
  position:static;
  bottom:0px;
  width:100%;
  margin-top:1em;
}

/* footer {
  background:var(--dark-accent-color);
  font-family: 'livingstone', monospace; 
  display: flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content: space-between;
  justify-items: center;
  padding:1em;
  position:static;
  bottom:0px;
  width:100%;
} */

#footer-text {
  font-size: clamp(15px, 4vw, 2rem);
  padding:0;

}

body {
  background-color: var(--main-bg-color);
  font-family: 'cmu', 'ErikasBuero';
  font-weight: lighter;
  color: rgb(235,235,235);
  /* background-image: url('images/hounds-profile-wide1.png'); */
  background-size: clamp(100px, 150%, 1000px) auto;
  background-repeat:no-repeat;
  background-position-x: 50%; 
  background-position-y: -25em;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* .parent {
  position: relative;
  overflow: hidden;
}

.child {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;

} */

.menu {
    font-family: 'livingstone';
    /* height:100%; */
    float:right;
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
  color: rgb(235,235,235);
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  /* height:100%; */
}

a:hover { 
  /* color: #506b35; */
  /* color: #ded8b1 */
  color: var(--light-accent-color);
  /* text-shadow: -2px 0 rgb(47, 44, 27), 0 2px rgb(47, 44, 27), 2px 0 rgb(47, 44, 27), 0 -2px rgb(47, 44, 27); */
}

h1 {
  /* font-size: clamp(30px, 6.5vw, 60px); */
  font-size: clamp(30px, 4.5vw, 65px);
  /* font-size: clamp(30px, 50px, 70px); */
  font-weight:lighter;
  margin-left:0.3em;
  /* padding: 8vmin 6vmin 6vmin; */
  /* padding-top:5vmin; */
  /* margin: 2vw; */
  /* padding:2vw; */
  text-align:left;
  rgb(235,235,235)-space: nowrap;
  /* height:100%; */
  /* background: url('images/houndsknot.png');
  background-size: clamp(100px, 100%, 1000px) auto;
  background-repeat:no-repeat;
  background-position-x: center;
  background-position-y: center; */
}

h2 {
  /* font-size: 2rem;
  height: clamp(100px, 15vw, 250px); */
  font-size: clamp(30px, 6vw, 50px);
  font-weight:lighter;
  /* padding: 1rem;
  margin: 1rem; */
  text-align: center;
  font-family: 'Cormorant Unicase';
}

h3 {
  font-size: 2rem;
  font-weight:lighter;
  padding: 1rem;
  margin: 0.5rem;
  text-align: center;
  /* font-family: "AmericanUncial"; */
  font-family: "livingstone";
}

h4 {
  font-size: 1.5rem;
  font-weight:lighter;
  padding: 1rem;
  margin: 0;
  text-align: center;
  font-family: 'Cormorant Unicase';
}

ul {
  padding: 10px;
  /* padding-top: 20px; */
  /* background: rgb(0,0,0,0.5); */
  margin:auto;
  height:100%;
    display: flex;
  justify-content: center;
  align-items: center;
}
li {
  display: inline;
  padding: 0px 10px;
  font-size: 1.4rem;
}

p {
  display:block;
  font-size: 1rem;
  text-align: center;
  /* padding:1rem; */
  margin:1rem;
  /* margin: */
}


.fa {
  /* padding: 20px; */
  font-size: 30px;
  width: 50px;
  height:50px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin: 10px;
  align-self:center;
  align-content:center;
  align-items:center;
  padding-top:10px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: whitesmoke;
  color: black;
}

.fa-youtube {
  background: whitesmoke;
  color: black;
}

.fa-instagram {
  background: whitesmoke;
  color: black;
}

.fa-bandcamp {
  background: whitesmoke;
  color: black;
}
/* iframe {
  position: relative;
  margin: auto;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw; 
  height: 52vw;
  max-height: 315px;
  max-width: 580px;
  font-family: 'El Messiri';
  color: rgb(235,235,235);
  background-color: var(--dark-accent-color);
} */

#feedback-page{
  text-align:left;
}

#form-main{
  width:100%;
  padding-top:30px;
  margin: auto;
  font-family: 'El Messiri';
  margin-bottom:2rem;
}

#form-div {
  background-color:var(--dark-accent-color);
  padding:5px;
  width: 450px;
  left: 50%;
  margin:auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.feedback-input {
  color:#3c3c3c;
  font-family: 'El Messiri';
  font-weight:500;
  font-size: 18px;
  line-height: 22px;
  background-color: #fbfbfb;;
  padding: 13px 13px 13px 13px;
  text-align: left;
  width:96%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.feedback-input:focus{
  background: #fff;
  box-shadow: 0;
  border: 3px solid var(--dark-accent-color);
  color: var(--dark-accent-color);
  outline: none;
  padding: 13px 13px 13px 13px;
}

.focused{
  color:var(--dark-accent-color);
  border:var(--dark-accent-color) solid 3px;
}

textarea {
  width: 100%;
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
  background-color:rgb(235,235,235);
}

#button-green{
  width: 96%;
  margin:auto;
  border: #fbfbfb solid 2px;
  cursor:pointer;
  background-color: var(--dark-accent-color);
  color:rgb(235,235,235);
  font-family: 'El Messiri';
  font-size:24px;
  padding-top:22px;
  padding-bottom:22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  font-weight:700;
}

#button-green:hover{
  background-color: rgb(235,235,235);
  color: var(--dark-accent-color);
}

@media only screen and (max-width: 580px) {
  #form-div{
    margin: auto;
    width: 88%;
    padding: 1%;
  }
}

@media all and (min-width: 750px) {
    .menu{display:block;}
    .dropdown{display:none;}
}

@media all and (max-width: 800px) {
  .menu{display:none;}
  .dropdown{display:inline;}
  /* .splash-image{margin-top:0.8rem !important;} */
  header{
    /* background-position-y: top !important; */
    flex-wrap:nowrap !important;
    justify-content:space-around;
    padding-top:0;
  }
  .flex-header {
    flex-wrap:wrap !important;
    width:80%;
  }
  h1 {
    font-size:clamp(35px, 6vw, 50px);
  }

}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  z-index:1000;
  /* height:30px; */
  height:100%;
  position: relative;
  /* background:rgb(50, 50, 50, 0.5); */
  float: right;
  overflow:visible;
  
}

/* Dropdown Button */
.dropbtn {
  cursor: pointer;
  height:30px;
  outline:0;
  /* background:rgb(0,0,0,0.5); */
  margin:auto;
  position: relative;
  top:calc(50% - 15px);

}

/* Dropdown button on hover & focus */
.dropbtn:hover{
  background: rgb(0,0,0, 0.7);
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: fixed;
  background-color: black;
  /* top: calc(100% + clamp(16px, 5vw, 32px)); */
  top:124px;
  width:100vw;
  left:0px;
  padding:5px;
  font-family:"livingstone";
  text-transform: lowercase;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: rgb(235,235,235);
  font-size:0.9rem;
  padding: 10px;
  text-decoration: none;
  display: block;
  margin:5px;
  margin-top:0px;
  /* background-color: rgb(50, 50, 50, 0.5); */
  background-color: var(--dark-accent-color);
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background:var(--med-accent-color);}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.row {
  text-align: center;
  color: rgb(235,235,235);
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:space-around;
  margin:0;
  padding:1em;
}

.overlay {
    /* padding: 0 4px; */
    margin:auto;
    float:center;
}

.column {
  background-color: var(--dark-accent-color);
  padding:0.75em;
  vertical-align: middle;
  width:24%;
  margin:0;
  margin-bottom:1em;
}

.front-page-row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
  margin:auto;
  align-self: center;
  width:100%;
  margin-bottom:2%;
  justify-content: space-evenly;
}

.front-page-col {
  position: relative;
  display: block;
  flex-direction: column;
  text-align: left;
  justify-content:flex-start;
  flex-wrap:nowrap;
  margin:1vmin;
  padding: clamp(5px, 2vw, 18px);
  width:45%;
  background-color: rgb(50, 50, 50, 0.5);
}

/* .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 8px;
  background-color: var(--dark-accent-color);
  padding: 1%;
} */

.page-title {
  /* padding: 10px; */
  text-align: center;
  background-color: var(--dark-accent-color);
  color: rgb(235,235,235);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin:2%;
}

.page-title-full {
  text-align: center;
  color: rgb(235,235,235);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin:0;
  margin-bottom:2%;
  margin-top: 30px;
  margin-left:3vw;
  margin-right:3vw;
  /* height: clamp(80px, 10vw, 125px); */

  /* background-image: url('images/knot_header.png');
  background-size: 1000px;
  background-position-y: 40%;
  background-position-x: 50%; */

  /* background-image: url('images/knot-frame.png');
  background-size:cover;
  background-position: center; */

  border-style:outset;
  border-image-source: url('images/knot-frame.png');
  border-image-slice: 130 550 130 550;
  border-image-width: 20% 10% 20% 10%;
  border-image-outset: 0;
  padding-left:8%;
  padding-right:8%;
  padding-top:clamp(10px, 3.5vw, 30px);
  padding-bottom:clamp(10px, 3.5vw, 30px);

  /* display:flex;
  align-items: center;
  justify-content: center; */
  background-color: black;
  
  /* background:var(--darker-accent-color); */

  font-size: clamp(30px, 10vw, 50px);
  font-weight:lighter;
  text-align: center;
  font-family:'livingstone', 'Cormorant Unicase';
  /* font-family: "AmericanUncial"; */

}

.content-box {
  /* padding: 10px; */
  text-align: center;
  background-color: #3b3a3771;
  color: rgb(235,235,235);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin:2%;
  max-width:600px;
  margin:auto;
  margin-bottom:1em;
}

.main-body {
  /* width:100%; 
  max-width:1000px; 
  margin:auto; */
}

.container {
  padding: 0 8px;
}

.title {
  color: rgb(235,235,235);
  font-family: 'Cormorant Unicase';
  font-size: 1rem;
  margin:0;
  margin-bottom:1rem;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 2%;
  color: rgb(235,235,235);
  background-color:black;
  text-align: center;
  cursor: pointer;
  width: 30%;
  font-family:"Consolas";
  margin:auto;
  margin:1rem;
  font-size: 1rem;
  
}

.button:hover {
  background-color: rgb(50, 50, 50, 0.8);
}


.white-button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 2%;
  color:black;
  background-color:whitesmoke;
  text-align: center;
  cursor: pointer;
  width: 30%;
  font-family:"Consolas";
  margin:auto;
  margin:1rem;
  font-size: 1rem;
  
}

.white-button:hover {
  background-color: var(--dark-accent-color);
}

.white-button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 1%;
  color: black;
  background-color:rgb(235,235,235);
  text-align: center;
  cursor: pointer;
  width: 30%;
  font-family:"Consolas";
  margin:auto;
  margin:1rem;
  font-size: 1rem;
  font-weight:bolder;
  /* text-transform: uppercase; */
  
}

.white-button:hover {
  background-color: rgb(100, 100, 100, 0.5);
}


#bio-row {
  max-width:1250px;
  margin:auto;
  /* background:var(--dark-accent-color); */
}

#biocol {
  /* border: 5px solid var(--dark-accent-color); */
  background-color: var(--dark-accent-color);
  flex-wrap: wrap;
  width:14%;
}



@media screen and (max-width:1000px) {
  #biocol {
    width:24%;
  }
}

@media screen and (max-width:1100px) {
  footer {
    justify-content: center;
  }
}

@media screen and (max-width:670px) {
  .page-title-full {
    /* border-image-slice: 130 550 130 550; */
    border-image-width: 15% 20% 15% 20%;
    border-image-outset: 0;
    padding-left:15%;
    padding-right:17%;
    padding-top:clamp(10px, 3.5vw, 30px);
    padding-bottom:clamp(10px, 4vw, 30px);
    margin-bottom:3%;
    margin-top:25px;
  }

  #bio-row {
    flex-wrap:wrap;
  }
  #biocol {
    width:45%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    width: 45%;
  }
  .row {
    flex-wrap:wrap;
  }
}

@media screen and (max-width: 400px) {
  .column {
    width: 100%;
  }
  #biocol {
    width:100%;
  }
}