/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}



* {
  box-sizing: border-box;
}

body {
  background: #384d54;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Roboto', serif;
}

.whale {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.containers {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 60px 60px;
  grid-template-rows: 60px 60px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-items: stretch;
  align-items: stretch;
}
.container {
  background: #25b8ec;
  width: 60px;
  height: 60px;
  color: #384d54;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
}
.container-stripe {
  width: 4px;
  height: 100%;
  background: #394d56;
}
.container:nth-child(1) {
  background: #384d54;
}
.container:nth-child(2) {
  background: #384d54;
}
.container:nth-child(3) {
  background: #384d54;
}
.container:nth-child(4) {
  border: 5px solid #394d56;
}
.container:nth-child(5) {
  background: #384d54;
}
.container:nth-child(6) {
  background: #384d54;
}
.container:nth-child(7) {
  border: 5px solid #394d56;
  background: #08a8d8;
}
.container:nth-child(8) {
  border: 5px solid #394d56;
}
.container:nth-child(9) {
  border: 5px solid #394d56;
  background: #08a8d8;
}
.container:nth-child(10) {
  background: #384d54;
}
.container:nth-child(11) {
  border: 5px solid #394d56;
  background: #08a8d8;
}
.container:nth-child(12) {
  border: 5px solid #394d56;
}
.container:nth-child(13) {
  border: 5px solid #394d56;
  background: #08a8d8;
}
.container:nth-child(14) {
  border: 5px solid #394d56;
}
.container:nth-child(15) {
  border: 5px solid #394d56;
  background: #08a8d8;
}
.body {
  width: 420px;
  height: 200px;
  background: #0db7ed;
  border-radius: 60% 0% 90% 90%/0% 0% 150% 150%;
  position: relative;
}
.body-eye {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  top: 35%;
  left: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.body-eyeinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #394d56;
  display: flex;
  justify-content: flex-end;
}
.body-eyegloss {
  width: 13px;
  height: 13px;
  background: white;
  border-radius: 50%;
}
.body-mouth {
  -webkit-clip-path: polygon(148px 195px, 134px 192px, 119px 187px, 102px 180px, 91px 175px, 78px 167px, 66px 159px, 53px 148px, 38px 131px, 23px 109px, 37px 115px, 49px 119px, 60px 122px, 70px 123px, 81px 124px, 91px 124px, 100px 123px, 110px 123px, 120px 122px, 130px 119px, 132px 133px, 135px 142px, 138px 151px, 141px 160px, 146px 169px, 151px 176px, 157px 184px, 165px 191px, 175px 198px);
          clip-path: polygon(148px 195px, 134px 192px, 119px 187px, 102px 180px, 91px 175px, 78px 167px, 66px 159px, 53px 148px, 38px 131px, 23px 109px, 37px 115px, 49px 119px, 60px 122px, 70px 123px, 81px 124px, 91px 124px, 100px 123px, 110px 123px, 120px 122px, 130px 119px, 132px 133px, 135px 142px, 138px 151px, 141px 160px, 146px 169px, 151px 176px, 157px 184px, 165px 191px, 175px 198px);
  background: white;
  width: 100%;
  height: 100%;
}
.smile {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #394d56;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(18px 101px, 38px 111px, 51px 115px, 63px 118px, 76px 121px, 91px 122px, 104px 120px, 117px 118px, 128px 114px, 130px 119px, 119px 123px, 105px 125px, 91px 127px, 75px 126px, 62px 123px, 49px 120px, 36px 115px, 23px 110px);
          clip-path: polygon(18px 101px, 38px 111px, 51px 115px, 63px 118px, 76px 121px, 91px 122px, 104px 120px, 117px 118px, 128px 114px, 130px 119px, 119px 123px, 105px 125px, 91px 127px, 75px 126px, 62px 123px, 49px 120px, 36px 115px, 23px 110px);
}
.tail {
  position: absolute;
  width: 355px;
  height: 253px;
  background: #0db7ed;
  opacity: 1;
  top: -103px;
  right: -290px;
  -webkit-clip-path: polygon(2px 104px, 38px 104px, 61px 103px, 71px 102px, 81px 99px, 90px 96px, 98px 91px, 105px 85px, 126px 109px, 117px 113px, 108px 116px, 100px 121px, 92px 127px, 84px 133px, 77px 141px, 71px 149px, 65px 159px, 61px 170px, 57px 184px, 38px 212px, 24px 233px, 0px 256px);
          clip-path: polygon(2px 104px, 38px 104px, 61px 103px, 71px 102px, 81px 99px, 90px 96px, 98px 91px, 105px 85px, 126px 109px, 117px 113px, 108px 116px, 100px 121px, 92px 127px, 84px 133px, 77px 141px, 71px 149px, 65px 159px, 61px 170px, 57px 184px, 38px 212px, 24px 233px, 0px 256px);
}
.tailend1 {
  position: absolute;
  width: 355px;
  height: 253px;
  background: #0db7ed;
  top: -103px;
  right: -290px;
  -webkit-clip-path: ellipse(24px 48px at 28.75% 27.25%);
          clip-path: ellipse(24px 48px at 28.75% 27.25%);
}
.tailend2 {
  position: absolute;
  width: 355px;
  height: 253px;
  background: #0db7ed;
  top: -103px;
  right: -290px;
  -webkit-clip-path: ellipse(46px 24px at 37.75% 37.15%);
          clip-path: ellipse(46px 24px at 37.75% 37.15%);
}