img, picture, video, iframe {
    max-width: 100%;
    height: auto;
}

:root {
    --header-bg-color: #3a67c2;
    --header-color: #e9effd;
    --navhov-bg: #365aa2;
    --navhov-color: #a8c0ef;
    --nav-bg-color: #a8c0ef;
    --nav-color: #365aa2;
    --main-color: white;
    --left-color: #e0e9fa;
    --right-color: #e0e9fa;
    --hover-tex-color: #12596a;
    --hover-bg-color: #d8f6fc;
    --bg-color: white;
    --tex-color: #082563;
    --alt-tex-color: #024e60;
    --href-color: #0c3483;
    --footer-bg: #3a67c2;
    --footer-color: #f2f6fe;
    --anim-color1: #A3005C;
    --anim-color2: #b7a0e3;
}

h1 {
    position: relative;
    display: inline;
    padding: 10px;
}

#gabriela-regular {
  font-family: "Gabriela", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 250%;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.dropdown {
    box-sizing: border-box;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.dropdown>li {
    padding: 0;
    margin: 0;
    display: inline-block;
    border: 2px solid var(--href-color);
    position: relative;
    width: 95px;
}

/*hide dropdown give border position it*/
.dropdown>li>ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    visibility: hidden;
    position: absolute;
    top: 25px;
    left: 0;
    width: 95px;
    border: 2px solid var(--href-color);
    opacity: 0;
    transition: all .2s ease-out;
}

/*reveal dropdown with hover*/
.dropdown>li:hover>ul {
    visibility: visible;
    opacity: 1;
    top: 30px;
    background-color: var(--nav-bg-color);
}

.dropdown a {
    text-decoration: none;
    font-weight: normal;
    font-family: sans-serif;
    width: 100%;
    padding: 0;
    margin: 0;
}

.dropdown>li>ul a {
    padding: 0;
    display: inline-block;
    padding: 0;
    white-space: nowrap;
    width: 100%;
}

a[href] {
    color: var(--href-color);
}

a:hover {
    box-sizing: border-box;
    background-color: var(--navhov-bg);
    color: var(--navhov-color);
    width: calc(100%);
}


.animation1 {
    width: 100px;
    height: 100px;
    background-color: var(--anim-color1);
    animation-name: spin;
    animation-duration: 5s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes spin {
     0% {
        transform: rotate(0deg) scale(0.5);
        background-color: var(--anim-color1);
     }
     50% {
        background-color: #b7ffff;
     }
     100% {
        transform: rotate(360deg) scale(1);
        background-color: var(--anim-color2);
     }
}

.animate__animated.animate__hinge {
  --animate-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

#cat1 {

    animation-duration: 2s;
    animation-iteration-count: infinite;
    color: #d8971f;
}

#cat2 {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    color: #A3005C;
}

#cat3 {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    color:#8c21b3;
}

#cat4 {
    animation-duration: 6s;
    animation-iteration-count: infinite;
    color: #2051bd;
}

#cat5 {
    animation-iteration-count: infinite;
    animation-duration: 2s;
    color: #f37b7b;
}

#cat6 {
    animation-iteration-count: infinite;
    animation-duration: 3s;
    color: #eb88c2;
}

#cat7 {
    animation-iteration-count: infinite;
    animation-duration: 4.2s;
    color: #6b94ef;
}

h2::before {
    content: "✧";
    margin-right: 10px;
}

h2::after {
    content: "✧";
    margin-left: 10px;
}

.tip {
    position:relative;
}

.tip:hover:before {
    content: attr(aria-label);
    padding: 2px 8px;
    background: #222;
    color: #fff;
    position:absolute;
    font-family:Courier;
    top:-30px;
    left:50%;
    white-space:nowrap;
}

label {
    display: inline-block;
}

form {
    color: var(--alt-tex-color);
}

.noises {

    box-sizing: border-box;
    padding: 10px 10px;
    margin: 0;
}

button {
    height: auto;
    width: auto;
    color: var(--alt-tex-color);
    background-color: var(--navhov-color);
    margin: 10px;
    padding: 10px;
}

.checky {
    color: var(--alt-tex-color);
}

input[type="checkbox"] {

    position: relative;
    color: var(--alt-tex-color);
}

nav {
    box-sizing: border-box;
    text-align: center;
    font-size: x-large;
}

table {
    box-sizing: border-box;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid var(--alt-tex-color);
    caption-side: bottom;
    border-right: 1px solid var(--alt-tex-color);
    empty-cells: hide;
    overflow: auto;
    margin: 0%;
}

caption {
    font-size: small;
    color: var(--alt-tex-color);
}

th {
    color: var(--alt-tex-color);
    border-bottom: 1px solid var(--alt-tex-color);
    border-right: 1px solid var(--alt-tex-color);
    padding: 5px 10px;
}

td,tr {
    border-bottom: 1px solid var(--alt-tex-color);
    padding: 5px 10px;
    text-align: left;
    border-right: 1px solid var(--alt-tex-color);
}

tfoot > tr > td{
    color: var(--alt-tex-color);
    text-align: center;
}

.clearfloat {
    clear: both;
}

body {
    color: var(--tex-color);
    margin: 0 auto;
    background-color: var(--bg-color);
    font-size: 120%;
    flex-wrap: wrap;
}

td:hover,td>a[href]:hover {
    
    background-color: var(--hover-bg-color);
    color: var(--alt-tex-color);
}

* {
    box-sizing: border-box;
}

.floatleft {
    position: relative;
    float: left;
    padding: 10px;
}

.floatright {
    float: right;
    padding: 10px;
}

.myheader {
    grid-area: header;
    background-color: var(--header-bg-color);
    color: var(--header-color);
    padding: 0;
    font-weight: bolder;
    border-radius: 10px;
}

.mymenu {
    box-sizing: border-box;
    grid-area: menu;
    background-color: var(--nav-bg-color);
    padding: 0;
    border-radius: 10px;
}

.myleft {
    grid-area: left;
    background-color: var(--left-color);
    padding: 10px;
    border-radius: 10px;
}

.mymain {
    border-top-right-radius: 5px;
    grid-area: main;
    background-color: var(--main-color);
    padding: 10px;

}

.myright {
    grid-area: right;
    padding: 10px;
    background-color: var(--right-color);
    border-radius: 10px;
}

.myfooter {
    grid-area: footer;
    background-color: var(--footer-bg);
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    color: var(--footer-color);
}

.myparent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: 
    'header header'
    'menu   menu'
    'main   main'
    'right  right'
    'left   left'  
    'footer footer';
    grid-gap: 5px;
    background-color: var(--bg-color);
    padding: 5px;
}


@media screen and (min-width: 768px) {

.dropdown>li>ul {
    width: 100%;
}

.dropdown>li {
    width: 140px;
}

h1::before {

    content: url('assets/knitting-23927.svg');
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    width: 140px;
    height: 100px;
    margin-right: -30px;
    margin-left: 10px;
    padding: 0;
}

.myparent {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: 
    'header header header'
    'menu   menu   menu'
    'right  main   main'
    'right left  left'
    'footer footer footer';
    grid-gap: 10px;
    background-color: var(--bg-color);
    padding: 5px;
}
}

@media screen and (min-width: 992px) {

    
.myparent {
    display: grid;
    grid-template-columns: 15% auto auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
    'header header header header header'
    'menu menu menu menu menu'
    'left main main main right'
    'footer footer footer footer footer';
    grid-gap: 10px;
    background-color: var(--bg-color);
    padding: 5px;
}
}

@media screen and (min-width: 1024px) {

#myparent {
    display: grid;
    grid-template-columns: 20% auto auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
    'header header header header header header'
    'menu   menu   menu   menu   menu  menu'
    'left   left   main   main   right  right'
    'footer  footer footer footer footer footer';
    grid-gap: 10px;
    background-color: var(--bg-color);
    padding: 5px;
}
}