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

body {

    overflow: hidden;

}



.day {

    position: fixed;

    margin: 0px;

    padding: 0px;

    top: 1%;

    left: 1%;

    border-radius: 15px;

    background-color: white;

    width: 4vh;

    height: 4vh;

    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;

    display: flex;

    justify-content: center;

    align-items: center;

    user-select: none;

    cursor: pointer;

    overflow: hidden;

    z-index: 3;

}



.Expertise {

    font-family: Raleway;

    font-size: x-large;

}



.day svg {

    position: absolute;

    transition: 1s ease-in-out;

}



.day #xnight:not(.day.night #xnight) {

    transform: translate(200%, 0%);

}



.night #xday {

    transform: translate(-200%, 0%);

}



.night {

    background-color: #262626;

    color: #fff;

}



.day.night+#particles-js {

    animation: fadein 2s;

    display: none;

}



.day.night~#particles-js-night {

    animation: fadein 2s;

}



@keyframes fadein {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



.main {

    position: absolute;

    top: 0%;

    background-color: #fff;

    left: 50%;

    transform: translate(-50%, 0%);

    width: 65%;

    height: 100%;

    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;

}



.day.night~.main {

    box-shadow: rgba(255, 255, 255, 0.1) 0px 8px 24px, rgba(255, 255, 255, 0.1) 0px 16px 56px, rgba(255, 255, 255, 0.1) 0px 24px 80px;

}



#logo-main {

    width: 25vw;

}



.main header {

    box-shadow: #39242438 0px 40px 20px -40px;

    display: flex;

    justify-content: center;

}





/* CSS */



button {

    align-items: center;

    background-color: #fff;

    border: 1px solid rgba(0, 0, 0, 0.404);

    box-sizing: border-box;

    color: #000;

    cursor: pointer;

    fill: #000;

    font-family: Raleway;

    font-size: 16px;

    font-weight: lighter;

    height: 48px;

    justify-content: center;

    letter-spacing: -.8px;

    outline: 0;

    text-align: center;

    text-decoration: none;

    transition: all .3s;

    user-select: none;

    -webkit-user-select: none;

    touch-action: manipulation;

}



.button:focus {

    color: #171e29;

}



.button:hover {

    border-color: #06f;

    color: #06f;

    fill: #06f;

}



.button:active {

    border-color: #06f;

    color: #06f;

    fill: #06f;

}



#button {

    max-width: 100%;

    margin: 2vh;

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

}



#button button {

    margin: 0.5vh;

    flex: 1 0 13%;

}



#motivaiton {

    max-width: 100%;

    box-shadow: #00000038 0px -20px 20px -15px;

    text-align: justify;

    margin: 2vh;

    display: flex;

    padding-right: 2vh;

    justify-content: space-around;

    
    font-family: Raleway

}



.hight {

    background-color: #ffffff;

    display: flex;

    align-items: center;

    margin: 15px;

    padding: 5px 15px 5px 15px;

    justify-content: space-around;

    flex-direction: column;

    width: 40%;

    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;



}

@keyframes clignoter {

    0% { opacity: 1; }

    50% { opacity: 0; }

    100% { opacity: 1; }

}



.hight button {

    align-items: center;

    background-color: #fff;

    border: 1px solid rgba(0, 0, 0, 0.904);

    box-sizing: border-box;

    color: #000;

    cursor: pointer;

    fill: #111;

    font-family: Raleway;

    font-size: 18px;

    font-weight: 400;

    height: 40px;

    justify-content: center;

    letter-spacing: -.8px;

    outline: 0;

    text-align: center;

    text-decoration: none;

    transition: all .3s;

    user-select: none;

    -webkit-user-select: none;

    touch-action: manipulation;

}



.hight h1 {
	color:red;

    animation: clignoter 1s infinite;

    text-decoration: underline;

}



.hight img {

    aspect-ratio: 2/1;

    width: 100%;

}





.tilte {

    margin: 0.5vh;

    margin-top: 3vh;

    padding: 0.5vh;

    width: 100%;

    display: flex;

    flex-direction: column;

}



h1 {

    list-style: none;

}



.tilte div {

    font-size: 1.8vh;

}





#motivaiton .tilte h1 {

    position: relative;

    user-select: none;

    cursor: pointer;

    font-weight: bolder;

    font-size: x-large;

    font-family: Raleway;

}





#exper_class {

    display: flex;

    justify-content: space-around;

    align-items: center;

    flex-wrap: wrap;

    margin: 2%;

    height: 40%;

}



 

#exper_class > div {

    flex: 0 0 33%;

    max-width: 200px;

    height: 20rem;

    overflow: hidden;

    cursor: pointer;

}





#exper_class div div:nth-child(1) {

    width: 100%;

    height: 70%;

    background-position: left;

    background-size: cover;

    background-repeat: no-repeat;

}



#exper_class div:nth-child(1) div:nth-child(1) {

    background-image: url(../../props/main/462ae1f8-ac79-40a4-99f1-9618d590d665.jpg);

}



#exper_class div:nth-child(2) div:nth-child(1) {

    background-image: url(../../props/main/86bef092-24c2-49b6-a92d-10ca8173b3b0.jpg);

}



#exper_class div:nth-child(3) div:nth-child(1) {

    background-image: url(../../props/main/6bda0c97-1b94-401c-b86f-41daa20a9dc5.jpg);

    align-items: flex-end;

}



#exper_class div div:nth-child(2) {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    text-align: center;

    height: 20%;

}







#exper_class div p {

    font-family: Raleway;

    font-size: x-large;

    user-select: none;

}





#back {

    position: absolute;

    height: 100%;

    width: 5%;

    top: 0%;

    left: 0%;

}



#back:hover {

    box-shadow: inset #0000009e 5vw 0px 10vh -10vh;

}



#back::after {

    content: "";

    background-image: url(../../props/main/back.png);

    background-repeat: no-repeat;

    background-size: contain;

    top: 45%;

    left: 2%;

    opacity: 20%;

    width: 10vh;

    height: 10vh;

    position: absolute;

}



#back:not(:hover)::after {

    display: none;

}



@font-face {

    font-family: "Raleway";

    src: url("../../police/Raleway-VariableFont_wght\ .ttf") format("truetype"), url("../../police/Raleway-Italic-VariableFont_wght.ttf") format("truetype");

}



@font-face {

    font-family: "optimus";

    src: url("../../police/OptimusPrinceps.ttf") format("truetype"), url("../../police/OptimusPrincepsSemiBold.ttf") format("truetype");

}



.none {

    display: none;

}