@import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css";
@import "/static/variables.css";
@import "https://cdn.jsdelivr.net/npm/intl-tel-input@25.2.1/build/css/intlTelInput.css";
/* FONTS */
/* 3 in this link !!! */
@import url('https://fonts.googleapis.com/css2?family=Days+One&family=League+Gothic&family=Rubik+Mono+One&display=swap');

.league-gothic {
  font-family: "League Gothic", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "width" 100;
}
h1 {
  font-family: "Rubik Mono One", serif;
  margin-bottom: var(--size-3);
  margin-top: var(--size-3);
  overflow-wrap: break-word;

}
/* mobile only */
@media screen and (max-width: 768px) {
  .is-two-fifths + .is-one-fifth img {
    margin-top: 0;
    margin-top: 0;
  } 
  .is-one-fifth + .is-two-fifths h1 {
    margin-top: 0;
  } 
}


h2, .subheading {
    font-family: "Rubik Mono One", serif;
    font-style: normal;
    margin-top: var(--size-5);
    margin-bottom: var(--size-7);
    font-size: var(--size-4);
    overflow-wrap: break-word;


  }
h3 {
  font-size: var(--size-5);
  text-transform: uppercase;
  margin-top: var(--size-7);
}

html {
  background-color: var(--bulma-primary);
}
.body-content {
  background-color: var(--bulma-danger)
}
.navbar {
  background-color: var(--bulma-warning);
  border: .17em solid ;
}
.body-content {
  border-left: .17em solid ;
  border-right: .17em solid ;
  border-bottom: .17em solid ;
}
a {text-decoration: underline;}
a.button {text-decoration: none;}

/* Composition: Stucture */

.flow > * + * {
  margin-top: var(--size-6);
}

form > * + * {
  margin-top: var(--size-6);
}
form {
  margin-top: var(--size-4);
}

p + p, .column:last-child {
  margin-bottom: var(--size-3);
}

ol {
  margin-left: var(--size-6);
}
.column:first-child {
  padding-top: var(--size-7);
}
.column img {
  margin-top: var(--size-5);
}

/* Utitily: Reusable classes */
.hidden {
  visibility: hidden;
}
.button.is-ghost:hover, 
.button.is-ghost,
.button.is-ghost.is-hover, 
.button.is-ghost:active, 
.button.is-ghost:visited,
.button.is-ghost:focus {
  color: var(--bulma-text-strong);
}

.mobile-menu {
      justify-content: flex-end;
      margin-inline-start: auto;
}
/* Block: Reusable components */



/* Exception: Variations and specific cases */
.iti__arrow {
  margin-top: 0;
}
#map { height: 400px; width:100%;}
.map-container { margin-top: 10px;}

.menu-list a {
  position: relative;
  padding: var(--size-6);
  background: none;
  width:auto;
}

.menu-list a span.icon-text {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;

}

.menu-list a span span:first-of-type {
  box-sizing: unset;
}

.menu-list a span span 
+ span {
  align-self: flex-end;
}

.menu-list .icon {
  right: var(--size-6);
  width: 1rem;
}
body.container div.content {
  margin-bottom: 0;
  /* putting padding or margins in here screws course layout */
}

.content ul.menu-list {
  list-style-type: none;
  margin-inline-start: 0;
  flex-flow: row nowrap;
}
.content ul.menu-list li {
  border-bottom: .17em dashed;
}
aside.menu {
  background-color: var(--bulma-success);
  height: 100%;
  border-right: .17em solid;
  border-left: .17em solid;
}
.uni-nav {
  height: 100%;
}

.iti { 
  width: 100%;
}
body.container .navbar > .navbar-brand {
  margin-inline-start: 0;
}
.pupbar.is-hidden-tablet {
    margin-top: -1em;
    margin-bottom: 1.25em;
    margin-left: .5em;
    height: auto;
}
.pupbar {
  height: var(--size-1);
  margin-top: var(--size-7);
}

.pupbar img {
  height: var(--size-1);
}
.banana {

}
.puppy, .banana { 
  margin-top: var(--size-7);
}
.puppy.stopped {
  position:relative;
  left:88px;
}

.pup-container {
  position: relative;
  display: inline-block;
}
.hoop-front {
  z-index: 75;
}
.hoop-back {
  z-index: 25;
}
.hoop  {
  margin-bottom: var(--size-7);
  position: relative;
}
/* mobile only */
@media screen and (max-width: 768px) {
  .first-pup {
    width: 0;
  }
}
footer { 
  background-color: var(--bulma-warning);
  border-top: .17em solid;
}

.navbar-burger {
  color: var(--bulma-content-heading-color);
}

.phone_format {
  border: none;
}

.card .iti__arrow {
  display: none;
}

/* animation */
#anim {
  background-image: url('/static/IMG/pups.png');
  background-size: 850% 100%;
  width: 72px;
  height: 62px;
  animation: anim 1.0s steps(8);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-delay: 2s;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  z-index: 50;
}
@keyframes anim {
  100% { background-position: 114%; /*734*/
        left: 78px; 
      }
}

.modal-card-body {
  background-color: var(--bulma-primary);
}