/*
courses cards
*/
    :root {
        --surface-color: #000000;
        --curve: 40;
      }
      
      * {
        box-sizing: border-box;
      }
      
      body {
        font-family: 'Noto Sans JP', sans-serif;
        background-color: #fef8f8;
        background-image: url('Images\sePage.jpg');        
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .bgImg{
        position: fixed;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        
      }
      /* make the page similar to index.html */
      h1,h3 {
        font-size: 2em;
        text-align: center;
        margin: 2em 0;
        color: #6A515E;
        font-family: "MockFlowFont";
      }
      p {
        font-size: 1em;
        text-align: center;
        margin: 0 0 2em;
        color: #000000;
        font-family: "MockFlowFont";
        display: inline-block;
      }   
      
      /* make all have a back ground */
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2em;
        background-color: moccasin;
        opacity: 0.8;
        
      }
     
      /* courses as cards */
      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
        gap: 2rem;
        margin: 4rem 5vw;
        padding: 0;
        list-style-type: none;
      }
      
      .card {
        position: relative;
        display: block;
        height: 100%;  
        border-radius: calc(var(--curve) * 1px);
        overflow: hidden;
        text-decoration: none;
      }
      
      .card__image {      
        width: 100%;
        height: 315px;
      }
      
      .card__overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;      
        border-radius: calc(var(--curve) * 1px);    
        background-color: var(--surface-color);      
        transform: translateY(100%);
        transition: .2s ease-in-out;
      }
      
      .card:hover .card__overlay {
        transform: translateY(0);
      }
      
      .card__header {
        position: relative;
        display: flex;
        align-items: center;
        gap: 2em;
        padding: 2em;
        border-radius: calc(var(--curve) * 1px) 0 0 0;    
        background-color: var(--surface-color);
        transform: translateY(-100%);
        transition: .2s ease-in-out;
      }
      
      .card__arc {
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: 100%;
        right: 0;      
        z-index: 1;
      }
      
      .card__arc path {
        fill: var(--surface-color);
        d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
      }       
      
      .card:hover .card__header {
        transform: translateY(0);
      }
      
      .card__title {
        font-size: 1em;
        margin: 0 0 .3em;
        color: #6A515E;
      }
      
      .card__tagline {
        display: block;
        margin: 1em 0;
        font-family: "MockFlowFont";  
        font-size: .8em; 
        color: #D7BDCA;  
      }
      
      .card__status {
        font-size: .8em;
        color: #D7BDCA;
      }
      
      .card__description {
        padding: 0 2em 2em;
        margin: 0;
        color: #D7BDCA;
        font-family: "MockFlowFont";   
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }