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;
  }

/*=========================================
    Main Styles
    =========================================*/
    body {
        font-family: arial;
        color: #333;
        background-color: grey;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0
    }

    .form{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        text-align: center;
    }

    .contact-details{
        padding: 20px;
        text-align: center;
        font-size: 22px;
    }

    input[type=text], select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type=email], select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    textarea, select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type=submit] {
        width: 100%;
        background-color: palegreen;
        color: black;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

    input[type=submit]:hover {
        background-color: #45a049;
    }

    .form-design {
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
    }

    .intro{
        text-align: center;
        font-family: fantasy;
        background: linear-gradient(#eee, #333);
        padding: 15px 0;
    }

    .intro h1 {
        font-size: 82px;
        
    }

    .class-links{
        padding: 5px;
    }

    #links{
        text-align: center;
    }

    .nav {
        background-color: #333;
        overflow: hidden;
    }

    .nav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 20px;
        text-decoration: none;
        font-size: 17px;
    }

    .nav a:hover {
        background-color: mediumpurple;
        color: white;
    }
 
    .nav a.active {
        background-color: palegreen;
        color: white;
    }

    .section h1 {
        font-size: 52px; 
        text-align: center;
        font-family: fantasy;
        text-shadow: 2px 2px 5px mediumpurple;
    }

    .section h3 {
        font-size: 20px;
        text-align: center;
        font-family: fantasy;
    }

    .section p {
        float: right;
        text-align: center;
        font-family: fantasy;
        font-size: 20px;
    }

    .main {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .section {
        width: 50%;
        height: 100%;
    }

    .about-img{
        padding: 10px;
    }

    .title-design{
        font-size: 32px; 
        text-align: center;
        font-family: fantasy;
        text-shadow: 2px 2px 5px mediumpurple;
    }

    .p-design{
        font-family: fantasy;
        font-size: 22px;
        text-shadow: 2px 2px 5px mediumpurple;
    }

    .schedule-des{
        text-align: center;
        font-size: 22px;
        text-align: center;
        font-family: fantasy;
    }

    table{
            margin-left: auto;
            margin-right: auto;
    }

        th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 15px;
            text-align: center;
        }

    .table1{
        background-color: darkslategrey;
        color: black;
    }

    .table2{
        background-color: dimgrey;
        color: black;
    }

    .img-hover:hover {
        animation: shake 0.5s; 
        animation-iteration-count: infinite; 
    }

    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    
    .class-info{
        float: left;
        text-align: center;
        padding: 10px;
        font-family: sans-serif;
        font-size: 20px;
        border: 5px solid palegreen;
    }

    .class-cost{
        text-align: center;
        font-family: fantasy;
        font-size: 45px;
        text-shadow: 2px 2px 5px palegreen;
    }
    
    iframe{
        float: right;
        padding: 20px 5px;
    }

    .gallery-img{
        text-align: center;
        padding: 15px 0;
    }

    .gallary{
        border: solid 3px black;
        padding: 3px;
    }


    .sign-up{
        text-align: center;
    }