/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end meyer reset */

header {
    display: flex;
    justify-content: flex-end;
    background-color: darkturquoise;
    height: 8rem;
    border-bottom: solid lightblue 2rem;
}

.title-container {
    display: flex;
    margin-top: 1.5rem;
}

.title1 {
    font-family: 'Oregano', cursive;
    font-size: 3.5rem;
    margin-top: 0.8rem;
}

.title2 {
    font-family: 'Oregano', cursive;
    font-size: 3.5rem;
    margin-top: 1.5rem;
}

.header-image {
    width: 65rem;
    height: 7rem;
}

nav {
    background-color:#175b8b;
    height: 2rem;
    color: white;
    display: flex;
    justify-content: center;
}

.sign-up {
    margin-top: 0.45rem;
}

.login {
    margin-top: 0.45rem;
}

.logout-button {
    margin-top: 0.45rem;
    height: 1.25rem;
}

.signup-form {
    margin-top: 0.45rem
}

.login-form {
    margin-top: 0.45rem
}

.invisible {
    display: none;
}

.invisible-signup {
    display: none
}

.invisible-login {
    display: none
}

.animation-div {
    height: 3rem;
    overflow: hidden;
}

.fish-gif {
    background-image: url('https://media0.giphy.com/media/65Tm9HSCNCKC3nHTte/source.gif');
    background-size: 3rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    position: absolute;
    left: -3rem;
    border: none;
} 

.flipped-fish-gif {
    background-image: url('https://media0.giphy.com/media/65Tm9HSCNCKC3nHTte/source.gif');
    background-size: 3rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    transform: scaleX(-1);
    float: right;
    position: absolute;
    right: -3rem;
    border: none;
}

.righthorizTranslate {
    -webkit-transition: 15s;
    -moz-transition: 15s;
    -ms-transition: 15s;
    -o-transition: 15s;
    transition: 15s;
    margin-left: 120% !important;
  }

  .lefthorizTranslate {
    -webkit-transition: 15s;
    -moz-transition: 15s;
    -ms-transition: 15s;
    -o-transition: 15s;
    transition: 15s;
    margin-right: 120% !important;
  }

  .transitionDelay {
      transition-delay: 10s
  }

.search {
    display: flex;
    justify-content: space-evenly;
    font-family: arial;
}

.search-fish{
    display: flex;
    justify-content: center;
}

.search-seafood {
    height: 20rem;
    width: 40rem;
    border: solid #000000;
    display: flex;
    flex-direction: column;
    /* margin-top: 1rem */
}

.search-submit {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Magnifying_glass_icon.svg/480px-Magnifying_glass_icon.svg.png');
    width: 1rem;
    height: 1rem;
    background-size: 100%;
    background-position: center;
    border: none;
    background-repeat: no-repeat

}

.seafood-list {
    display: flex;
    justify-content: space-evenly;
    /* align-items: center; */
}

.search-by-name {
    display: flex;
    flex-direction: column;
}

.wild-or-farmed {
    width: 21rem;
    height: 14.8rem;
    display: flex;
    flex-direction: column;
}

.wild-farmed-buttons {
    padding-top: 1rem;
    display: flex;
    justify-content: center;
}

.wild {
    width: 6rem;
    background-color: purple;
    color: white;
}

.wild-fish {
    color: purple;
}

.farmed {
    width: 6rem;
    background-color: #175b8b;
    color: white;
}

.farmed-fish {
    color: #175b8b;
}

.clear {
    width: 6rem;
}

.wild-farmed-container {
    border: solid black;
    height: 10rem;
}

.info-button {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQd4_dMaMIhVsqQ2J6Aexq3gNVmQXgBA4hE7ZwhNPy8jHhsRuz4&s");
    background-size: 100%;
    background-position: center;
    height: 1rem;
    width: 1rem;
    border: none;
}

.add-fish {
    background-image: url('https://cdn4.iconfinder.com/data/icons/user-interface-131/32/add-512.png');
    background-size: 100%;
    background-position: center;
    height: 1rem;
    width: 1rem;
    border: none;
}

.delete-fish {
    background-image: url('https://images.squarespace-cdn.com/content/v1/55ece940e4b048d1ed401c11/1450136257542-4DATU4KRB70MDENGJXJX/ke17ZwdGBToddI8pDm48kAf-OpKpNsh_OjjU8JOdDKBZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZUJFbgE-7XRK3dMEBRBhUpwkCFOLgzJj4yIx-vIIEbyWWRd0QUGL6lY_wBICnBy59Ye9GKQq6_hlXZJyaybXpCc/X%3A++The+Unknown');
    background-size: 100%;
    background-position: center;
    height: 1rem;
    width: 1rem;
    border: none;
}

.search-region {
    height: 20rem;
    width: 40rem;
    border: solid black;
    display: flex;
    flex-direction: column;
    /* margin-top: 1rem; */
}

.user-info {
    display: flex;
    justify-content: center;
}

.invisible-info {
    display: none
}

.your-fish {
    width: 19rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user-fish {
    border: solid black;
    height: 20rem;
    width: 50rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-self: center;
    display: flex;
    justify-content: space-evenly;
}

.your-region {
    width: 19rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.change-region {
    margin-top: 1rem;
    display: flex;
}

.region-label {
    font-family: arial;
    font-size: 0.9rem;
}

.update-region {
    display: flex;
}

h2 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-top: 1rem;
}

h3 {
    align-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    font-family: arial;
}

h4 {
    text-align: center;
    margin-top: 0.5rem;
    font-weight: bold;
}

.fish-form {
    display: flex;
    justify-content: center;
}

.fish-input {
    width: 8rem;
    margin-left: 1rem;
}

.fish-list {
    margin-top: 0.9rem;
    margin-left: 0.3rem;
}

.fish-name {
    font-size: 1.2rem;
}

.map-container {
    display: flex;
    justify-content: center;
}

.map {
    border: solid black;
    height: 15rem;
    width: 25rem;
    display: flex;
    justify-items: center;
}

.mapkey {
    border: solid black;
    height: 8rem;
    width: 8rem;
    display: block;
}

ul {
    margin-left: 0.7rem;
    margin-top: 0.5rem;
}

li {
    list-style: none;
    font-size: 1rem;
    font-family: arial
}

.alaska {
    color: #ccecfc;
    font-weight: bold;
}

.westcoast {
    color: #7cd3f6;
    font-weight: bold;
}

.southeast {
    color: #00a2d4;
    font-weight: bold;
}

.atlantic {
    color: #175b8b;
    font-weight: bold;
}

.pacific {
    color:darkturquoise;
    font-weight: bold;
}

.mapsvg {
    width: 25rem;
    height: 15rem;
}

object {
    width: 25rem;
    height: 15rem;
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0x linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 30rem;
    height:30rem;
    border-radius: 0.5rem;
}

.close-button {
    float: right;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.dory-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0x linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.dory-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 30rem;
    height:30rem;
    border-radius: 0.5rem;
}

.dory-close-button {
    float: right;
    width: 4.5rem;
    height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    /* background-color: lightgray; */
    background-color: #175b8b;
    color: white;
    margin-left: 2rem;
}

.show-dory-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.dory-div {
    display: flex;
    justify-content: center;
}

.dory-info {
    border: solid black;
    height: 26rem;
    width: 25rem;
    z-index: -3;
    position: absolute;
}

.dory-header {
    font-family: 'Oregano', cursive;
    font-size: 3rem;
    text-align: center;
}

.help {
    font-family: arial;
    font-size: 1.5rem;
    margin-top: 1rem;
    text-align: center;
}

.dory-help {
    font-family: arial;
    font-size: 1rem;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    font-weight: bold;
}

.blurb {
    font-family: arial;
    font-size: 0.8rem;
    margin-left: 1rem;
}

.blurb-carbon {
    font-family: arial;
    font-size: 0.8rem;
    margin-left: 1rem;
    margin-right: 4.5rem;
}

.dory-photo {
    height: 20rem;
    width: 30rem;
    float: right;
    z-index: -3;
    position: absolute;
    margin-left: 14.5rem;
    margin-top: 13rem;
}

.fish-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: arial;
}

.fish-image {
    height: 10rem;
    width: 20rem;
}

.scientific-name {
    font-style: italic;
}

g.west:hover {
    color: red;
}