@font-face {
  font-family: 'Cousine';
  src: url('../fonts/Cousine-Regular.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'Cousine';
  src: url('../fonts/Cousine-Bold.woff') format('woff');
  font-weight: 700;
}

@media only screen and (min-width: 1025px){
  .page {
    /* color:black; */
    font-size: 2.10vw;
  }

  .contact {
    font-size: 1.5vw;
  }

  .artwork {
    scroll-margin-top: 6.5vw;
  }

  .artwork, .statement, .about, .writingList, .instruction {
    font-size: 1.6vw;
  }

  .artworkTitle, .artworkGroup, .stTitle, .writingCategory {
    /* background-color: black; */
    font-size: 2vw;
    padding:1%;
    line-height: 0.7;
  }

  .nestedTitle, .nestedTitleLink {
    font-size: 1.8vw;
    line-height: 0.7;
  }

  .siteTitle {
    font-size: 1.5vw;
  }

  .container {
    display:flex;
    height: 90vh;
    /* overflow: hidden; */
  }

  .left {
    flex:3.75;
    padding-top:1.5%;
    overflow: hidden;
  }

  .right {
    flex: 4.25;
    padding-top:0%;
    overflow: auto;
  }

  .photo {
    width:49%;
  }

  .vertPhoto {
    width: 24%;
  }

  .thirdPhoto {
    width: 32%;
  }

  .triplePhoto {
    width: 32%;
  }

  .twoThirdPhoto {
    width: 64.1%;
  }

  #bioPhoto {
    width:95%;
  }

  #bioPage {
    overflow: hidden;
  }

  #artTitle, #statementTitle, #writingTitle {
    padding-left: 1%;
    padding-top: 0.5%;
  }

  #bioTitle, #friendTitle {
    font-size: 2.6vw;
  }

  .fullCaption {
    display:flex;
    /* background-color: yellow; */
    padding-bottom:0%;
  }

  .caption {
    font-size: 1.2vw;
    margin-top:0.5%;
    margin-bottom:2%;
    min-width: 49%;
    /* background-color: green; */
    flex:6;
    /* padding-right:2%; */
  }

  #cvLink {
    font-size: 1.75vw;
  }

  .smallText {
    font-size: 1.3vw;
  }
}

@media only screen and (max-width: 1024px){
  .page {
    /* color:black; */
    font-size: 4vh;
  }

  .contact {
    font-size: 3vh;
  }

  .artworkTitle, .artworkGroup, .stTitle, .writingCategory {
    font-size: 3.2vh;
    padding:2%;
    line-height: 1.2;
  }

  .nestedTitle, .nestedTitleLink {
    font-size: 3.2vh;
    line-height: 1.2;
  }

  .siteTitle {
    font-size: 2.5vh;
  }

  .photo, .triplePhoto, .twoThirdPhoto {
    width:100%;
  }

  .vertPhoto {
    width: 48%;
  }

  .artwork, .statement, .about, .writingList, .instruction {
    font-size: 2.8vh;
  }

  #bioPhoto {
    width:100%;
  }

  #artTitle, #statementTitle, #writingTitle {
    padding-left: 2%;
    padding-top: 1%;
  }

  #bioTitle, #friendTitle {
    font-size: 4vh;
  }

  .caption {
    display:none;
  }

  #cvLink {
    font-size:3vh;
  }
}

body {
  font-family: "Cousine", 'Consolas';
  color:white;
  margin: 0px;
  background-color: black;
  padding-bottom: 0px;
  overflow: auto;
}

.page {
  padding-top: 1%;
  padding-left: 2.75%;
  padding-right: 2.75%;
  /* padding-bottom:1%; */
}

.contact {
  padding-top:1%;
}

.home1 {
  color: #a784f9;
}

.home1:hover {
  color:white;
  background-color: #611de9;
}

.home2 {
  color: #7fffd4;
}

.home2:hover {
  color:white;
  background-color: #00c381;
}

.home3 {
  color: #3399ff;
}

.home3:hover {
  background-color: #236bb2;
  color:white;
}

.home4 {
  color: #ccff00;
}

.home4:hover {
  background-color: #a3cc00;
  color:black;
}

#email:hover {
  color:black;
  background-color: #06ee00;
}

#instagram:hover {
  color:white;
  background-color: #eb00c7;
}

#twitter:hover {
  color:white;
  background-color: #00baeb;
}

#github {
  color: #a5acae;
}

#github:hover {
  color:black;
  background-color: white;
}

#mainPage {
  background-color: black;
  /* background: linear-gradient(45deg, #ef5b66, #541c68, #1e2870); */
}

#signup {
  display:none;
}

#submitButton {
  /* margin-left: 1%; */
  background-color: #a784f9;
  font-family: 'Cousine', 'Consolas';
  font-weight:700;
  padding-left:0.5%;
  padding-right:0.5%;
  border:white;
  border-style: solid;
  border-radius: 1px;
}

#submitButton:hover {
  background-color: #611de9;
  color: white;
}

#teeny {
  font-size: 0.8vw;
}

li {
  list-style-type: none;
  line-height: 25px;
}

a {
  color: #a5acae;
  text-decoration: none;
  font-weight: 700;
}

a:hover {
  text-decoration: line-through;
  background-color: #323232;
  cursor: cell;
}

.siteTitle {
  font-weight: 400;
}

.title, .artworkTitle, .artworkGroup, .stTitle, .writingCategory {
  border-style: solid;
}

.artworkTitle, .artworkGroup, .stTitle, .writingCategory {
  font-weight: 400;
  border-color:white;
}

.nestedTitle, .nestedTitleLink {
  font-weight: 400;
  border-style: solid;
  border-color: #d6f984;
  padding:1%;
}

.nestedTitle:hover, .nestedTitleLink:hover {
  background-color:#adf10c;
  border-color: white;
  color:black;
  cursor: cell;
}

#statementTitle {
  border-color: #ccff00;
}

.artwork, .statement, .writingList {
  line-height:1.3;
  padding-left: 2%;
  padding-right:1%;
}

.artwork, .statement {
display:none;
}

.instruction {
  padding-bottom: 1%;
}

#bioTitle, #friendTitle {
  border-color: #7fffd4;
  padding:1%;
}

#artTitle {
  border-color:#a784f9;
  /* font-size: 2.8vw; */
}

#writingTitle {
  border-color: #3399ff;
  /* padding-bottom: 1%; */
}

.plain {
  color:white;
  text-decoration: none;
}

.plain:hover {
  color:white;
  text-decoration: none;
}

#cvLink {
  font-weight: 400;
  color:white;
  text-decoration: none;
  border-color: #7fffd4;
  border-style: solid;
  padding-left:1%;
  line-height: 0;
  /* padding-top: -0.5%; */
}

#bioTitle:hover, #friendTitle:hover, #cvLink:hover {
  color:white;
  background-color: #01bb7c;
  cursor:cell;
}

.artworkTitle:hover {
  color:white;
  background-color: #611de9;
  cursor:cell;
}

.artworkGroup:hover {
  color:#611de9;
  border-color:#611de9;
  background-color: #efe8fc;
  cursor: cell;
}

.stTitle:hover {
  color:black;
  border-color: #ccff00;
  background-color: #a3cc00;
  cursor: cell;
}

.writingCategory {
  color:white;
  background-color: #003467;
}

#cv {
  text-decoration: none;
}

#bio, #friends {
  display: none;
  line-height:1.3;
  padding-left: 1%;
  padding-right: 1%;
}

.aboutLink {
  color: #7fffd4;
  text-decoration: none;
}

.aboutLink:hover {
  color:#ff7faa;
}

.artworkLink {
  color: #a784f9;
  text-decoration:none;
}

.artworkLink:hover {
  color: #adf10c;
}

.writingLink {
  color: #3399ff;
  text-decoration:none;
}

.writingLink:hover {
  color: #ff9933;
}

.hidden {
  display: none;
}

.active {
  background-color: blue;
}

html {
  margin-top: 0px;
  padding-top: 0px;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.footerSpace {
  height: 30px;
}