diji/docs/style.css

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;700&family=Open+Sans:wght@300;400;500;600;700;800&display=swap');


body {
font-family: 'Open Sans', sans-serif;
background-color: #18181b;
color: white;
}

html,
body {
  margin: 0;
  padding: 0;
}

.header {
    height: 100%;
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 0px;
    align-items: center;
    justify-content: center;
display: flex;
 
    background: linear-gradient(#7D7D7D, #4A4A4A);
} .headername {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    font-size: 55pt;
    padding: 0px;
    margin: 0px;
    color: white;
} .headercontent {
    text-align: center;
} .headersubtitle {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 500;
    font-size: 20pt;
color: white;
padding: 0px;
margin: 0px;
margin-top: 20px;
}
.button {
    margin: 10px;
    padding: 10px;
    width: 200px;
    background-color:rgba(255, 255, 255, 0.20);
    border-radius: 100px;
    color: white;
    text-decoration: none;
    font-size: 17pt;
    font-weight: 500;
    display: inline-block;
    transition: transform .2s;
} .getstarted {
    background-color: white;
    color: black;
} .logo {
    margin-bottom: 20px;
} .contentpart {
    height: 100%;
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    display: flex;
    width: 100%;
 

}

.button:hover {
 /*   box-shadow: 0px 3px 10px 0px #0000007c;*/
 transform: scale(1.1);
}

.footer {
    text-align: center;
    padding: 10px;
    padding-bottom: 20px;
}

.faicon {
    font-size: 25pt;
    margin: 10px;
    padding: 10px;
}
.footerlink {
    color: white;
    transition: .2s;
}

.footerlink:hover {
    opacity: 0.6;
}
.contentpart2 {
    height: 100%;
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    display: flex;
    width: 100%;
    background-color: #27272a;
 

}
.contentimage {
    width: 350px;
    margin-left: auto;
    margin-right: 0px;
   grid-column: 2;
    display: block;
}

.contentimage2 {
    width: 350px;
    margin-left: 0px;
    margin-right: auto;
   grid-column: 1;
    display: block;
}

.contenttext {
    display: inline-block;
    padding: 20px;
    padding-bottom: 0px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0px;
} .contentgrid {
    width: 100%;
} .contenttext2 {
    display: inline-block;
    padding: 15px;
    padding-bottom: 50px;
    margin: 0px;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: 500;
}

@media only screen and (min-width: 48em) {
    .contentimage {
        width: 500px;
    }
    .contentimage2 {
        width: 500px;
    }
    .tablephoto {
        grid-column: 2;
        grid-row: 1;
    }.tabletext {
        grid-column: 1;
        grid-row: 1;
    }

    .tablephoto2 {
        grid-column: 1;
        grid-row: 1;
    }.tabletext2 {
        grid-column: 2;
        grid-row: 1;
    }

    .contenttext {
        grid-column: 1;

    }
    .contentgrid {
        display: grid;
        width: 100%;
        grid-template-columns: 57% 43%;
        grid-template-rows: 100%;
    }
    .contentgrid2 {
        display: grid;
        width: 100%;
        grid-template-columns: 43% 57%;
        grid-template-rows: 100%;
    }
    .contenttext {
       vertical-align: top;
    } .contenttext2 {
        vertical-align: top;
     } 
}