*{
    margin: 0;
    padding: 0;
}

html{
    width: 100%;
    height: 100%;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

button, input{
  font: inherit;
}

/* Root variables */

:root{

  --component: rgb(242, 248, 252);

  --border: rgb(0, 0, 0, 0.15);

  --text1: rgb(29, 44, 56);
  --text2: rgb(69, 99, 122);
  --text3: rgb(129, 148, 163);

  --red: #ff1736;
  --green: #00df1e;
  --blue: #066eff;

}

/* --- Fonts --- */

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

/* --- Body --- */

body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Poppins", sans-serif;
}

/* --- Page --- */

.page{
    width: 54%;
    height: fit-content;
    margin-left: 23%;
    margin-right: 23%;
    position: relative;
}

/* screen read only */

.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* --- Content --- */

.content{
    width: 100%;
    height: fit-content;
    padding-top: 5%;
    display: flex;
    gap: 20px;
}

/* --- Not found page --- */

.not_found_page{
    width: 100%;
    height: 100%;
    display: flex;
}


/* --- Media --- */

@media screen and (max-width: 1500px) {
    
    .page{
        width: 68%;
        margin-left: 16%;
        margin-right: 16%;
    }

}

@media screen and (max-width: 1200px) {
    
    .page{
        width: 84%;
        margin-left: 8%;
        margin-right: 8%;
    }

}

@media screen and (max-width: 900px) {

    .page{
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
    }
    
}

@media screen and (max-width: 800px) {

    .content{
        flex-direction: column;
        gap: 60px;
    }
    
}