/*FONT IMPORT*/ @import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&display=swap');

    body{
        background-color: #393750;
        margin: 0;
        height: 100%;
    }

    /*Cartoon Me*/
    #miniM{
        margin: 0;
        position: absolute;
        left: 1150px;
        top: 20px;
    }

    #miniM img{
        content: url("img/mm.png");
        width: 50px;
    }

    #miniM:hover img{
        content: url("img/mm2.png");
        width: 50px;
    }

    .button{
        background:none;
        cursor: pointer;
        transition-duration: 0.4s;
        position: absolute;
        padding: 0px;
        border: none;
        width: 150px;
    }

    .button img{
        display: block;
        pointer-events: none;
    }

    /*MP Button CSS */

    #MP{
        overflow: hidden;
        top: 20px;
        left: 920px;
        overflow: hidden;
        width: 150px;
    }

    #MP:hover{
        transform: scale(1.1)
    }

    #MP img {
    content: url("img/DPI_off.png");
    width: 150px;
    }

    #MP:hover img {
    content: url("img/DPI_on.png");
    width: 150px;
    }

    /*AP Button CSS */

    #AP{
        overflow: hidden;
        top: 20px;
        left: 720px;
        width: 150px;
    }

    #AP:hover{
        transform: scale(1.1);
    }

    #AP img {
    content: url("img/API_off.png");
    width: 150px;
    }

    #AP:hover img {
    content: url("img/API_on.png");
    width: 150px;
    }

    /*home button*/

    #home{
        overflow: hidden;
        top: 20px;
        left: 320px;
        width: 150px;
        height: 60px;
    }

    #home:hover{
        transform: scale(1.1);
    }

    #home img{
        content: url("img/home_off.png");
        width: 150px;
    }

    #home:hover img{
        content: url("img/home.png");
        width: 150px;
    }

    /*about button*/

    #about{
        overflow: hidden;
        top: 30px;
        left: 520px;
        width: 150px;
    }

    #about:hover{
        transform: scale(1.1);
    }

    #about img{
        content: url("img/about_off.png");
        width: 150px;
    }

    #about:hover img{
        content: url("img/about.png");
        width: 150px;
    }

    /*information pages*/

    /*Home CSS*/
    .hc h1{
        margin: 0;
        color: white;
        font-family: "Atma";
        font-size: 45px;
        padding-left: 120px;
        padding-top: 50px;
        width: 900px;
        
    }

    .hc p{
        margin: 0;
        color: white;
        font-family: "Atma";
        font-size: 45px;
        padding-left: 130px;
        padding-top: 30px;
        width: 900px;
    }

    .hc pre{
        margin: 0;
        color: white;
        font-family: "Atma";
        font-size: 45px;
        padding-left: 130px;
        padding-top: 30px;
        width: 900px;
    }
    /*About CSS*/
    .ac{
        font-size: 24px;
        padding: 20px;
    }

    .ac p{
        margin: 0;
        color: white;
        font-family: "Atma";
        font-size: 25px;
        padding-left: 500px;
        padding-top: 25px;
        width: 500px;
    }

    .ac img{
        position: absolute;
        margin: 0;
        padding-left: 150px;
        padding-top: 50px;
        width: 300px;
    }

    /*Audio CSS*/
    .apc{
       color: black;
       font-size: 24px;
       padding: 20px;
    }
    /*Design CSS*/
    .dpc{
        color: black;
        font-size: 24px;
        padding: 20px;
        transition-duration: 0.4s;
    }

    /*DPC Images*/

    #conbutton,
    #fambutton,
    #anabutton {
        position: absolute;
    }

    #anabutton{left: 130px; top: 150px;}
    #fambutton{left: 430px; top: 150px;}
    #conbutton{left: 730px; top: 150px;}

    #controller img,
    #family img,
    #analog img{
        display: block;
        width: 200px;
        transition: transform 0.3s ease;
    }

    #controller:hover img,
    #family:hover img,
    #analog:hover img{ 
        transform: translateY(-10px);
    }

    #controller a,
    #fambutton a,
    #anabutton a{
        display: inline-block;
        cursor: pointer;
    }


    /*Main Section*/
    .contain {
        overflow: hidden;
        transition-duration: 0.4s;
        margin: none;
        padding: none;
        background-color:#545075;
        position: relative;
        left: 165px;
        top: 110px;
        width: 1200px;
        height: 600px;
        border-radius: 100px;
    }

    .contain > div {
        position: absolute;
        top: 40px;
        left: 40px;

        width: calc(100% - 80px);
        height: calc(100% - 80px);

        z-index: 1;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.6s ease-in-out;
    }

    .contain > div.show {
        opacity: 1;
        pointer-events: auto;
        z-index: 10; /* bring active div to front */
    }

    .show {
        opacity: 1;
        pointer-events: auto;
    }