a
        {
            margin: auto;
            text-decoration: none;
        }
        .spectacledcoder-card1
        {
            display: flex;
            margin: auto;
            width: 400px;
            height: 400px;
            background-color: rgb(255, 255, 255);
            box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
            border-radius: 10px;
            transition: all 2s;
            align-items: start;
            justify-content: right;
            font-family: "Grand Hotel", cursive;
        }
        .spectacledcoder-card2
        {
            display: flex;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 255);
            box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
            border-radius: 15px;
            transition: all 2s;
            align-items: start;
            justify-content: center;
            font-family: 'Belanosima', sans-serif;
        }
        .spectacledcoder-card3
        {
            display: flex;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 255);
            box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
            border-radius: 15px;
            transition: all 2s;
            align-items: end;
            justify-content: left;
            font-family:Cambria,cursive;
            font-size:18px;
        }
        .circle1
        {
            position: absolute;
            margin: auto;
            margin-right: 0px;
            width: 85px;
            height: 85px;
            background: rgb(37 147 117 / 64%);
            border-radius: 0px 15px 0px 50px;
            transition: all 0.5s;
            
        }
        .spectacledcoder-card1:hover .circle1
        {

            background: rgb(37 147 117 / 64%);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .spectacledcoder-card1:hover .content
        {
            color: white;
        }
        .circle2
        {
            position: absolute;
            margin: auto;
            margin-top: 35px;
            width: 50px;
            height: 50px;
            background-color: rgb(42, 42, 42);
            border-radius: 50%;
            transition: all 0.5s;
            
        }
        .spectacledcoder-card2:hover .circle2
        {
            margin-top: 0px;
            background-color: rgb(42, 42, 42);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .spectacledcoder-card2:hover .content
        {
            color: white;
        }
        .circle3
        {
            position: absolute;
            margin: auto;
            margin-top: 35px;
            width: 85px;
            height: 85px;
            background-color: rgb(255, 201, 201);
            border-radius: 0px 50px 0px 15px;
            transition: all 0.5s;
            
        }
        .spectacledcoder-card3:hover .circle3
        {
            margin-top: 0px;
            background-color: rgb(255, 201, 201);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .content
        {
            margin: auto;
            z-index: 200;
            color: black;
            font-weight: 500;
            text-align:center;
            margin-top:20px;
            
        }
        .content1
        {
            margin: auto;
            z-index: 200;
            color: black;
            font-weight: 400;
            text-align:center;
            margin-top:80px;
            
        }
        @media only screen and (max-width: 600px) 
        {
            body
            {
                flex-direction: column;
            }
        }
        .spectacledcoder-card1 img
        {
            position: absolute;
            margin: auto;
            padding-top: 18px;
            padding-right: 8px;
        }
        .spectacledcoder-card2 img
        {
            position: absolute;
            margin: auto;
            margin-top: 35px;
            padding-top: 12px;
        }
        .spectacledcoder-card3 img
        {
            position: absolute;
            margin: auto;
            padding-left: 8px;
            padding-bottom: 8px;
        }
        .disclaimer
        {
            position: absolute;
            bottom: 0px; 
            left: 0; 
            margin-left: auto; 
            right: 0; 
            margin-right: auto; 
            width: fit-content;
            color: rgb(0, 0, 0);
            text-align: center;
        }
        .disclaimer a
        {
            text-decoration: none;
            color: #202020;
            font-weight: 900;
        }
        .disclaimer a:hover
        {
            text-decoration: overline;
        }