@import url('https://fonts.googleapis.com/css2?family=Geo:ital@0;1&family=Herr+Von+Muellerhoff&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Yatra+One&display=swap');
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.space-mono-regular {
    font-family: "Space Mono", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .space-mono-bold {
    font-family: "Space Mono", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .space-mono-regular-italic {
    font-family: "Space Mono", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .space-mono-bold-italic {
    font-family: "Space Mono", serif;
    font-weight: 700;
    font-style: italic;
  }
body{
    margin: 0px;
    padding: 0px;
    background: rgb(230,230,230);
    background: linear-gradient(90deg, rgba(230,230,230,1) 34%, rgba(213,213,213,1) 57%, rgba(194,194,194,1) 76%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}

.a{
    display: flex;
}
.a::before{
    content: "- ";
    color: initial;
}

.sobre{
    position: relative;
    /* border: 1px solid red; */
    width: 50%;
    margin-right: 10px;
    padding: 10px;
    text-align: justify;
    font-family: "Space Mono", serif;
    font-style: italic;
    font-size: 20px;
    /* background: rgb(230,230,230);
    background: linear-gradient(90deg, rgba(230,230,230,1) 34%, rgba(213,213,213,1) 57%, rgba(194,194,194,1) 76%); */
}


.a{
    text-decoration: none;
    color: inherit;
}

a:hover{
    text-decoration: underline;
    color: #f00;
}

.s{
    color: linear-gradient(90deg, rgba(200,185,208,1) 34%, rgba(178,166,185,1) 57%, rgba(94,90,94,0) 76%);
}

img{
    width: 15px;
}

.pai{
    display: flex;
    /* border: 1px solid  pink; */
    padding: 0px;
    margin: 0px;

}

.menup{
    position: relative;
    /* border: 1px solid  green; */
    width: 50%;
    margin-left: 10px;
}

.ex{
    /* border: 1px solid salmon; */
    width: 50%px;
    height: 55%;
    position: relative;
    /* justify-items: center;
    align-items: center; */
   text-align: left;
   display: flex;
}

.imagem{
    position: relative;
    /* border: 1px solid seagreen; */
    width: 50%;
    border-radius: 20%;

    

}

.fn{
    font-family: "Space Mono", serif;
    font-style: italic;
    font-size: 20px;
    color: white;
}

.i{
    width: 5%;
}
h4, h3, h5{
    text-align: center;
    font-size: 20px;
}

.rodape{
    text-align: center;
    background-color: black;
    padding: 0px;
    margin: 10px;
    margin-bottom: -10px;
}

.menu{
    width: 100%;
    display: block;
    text-align: justify;
}

.cont{
    display: block;
    width: 100%;
}

.io{
    position: relative;
    display: flex;
    /* border: 1px solid  pink; */
    padding: 0px;
    margin: 1px;
    width: 100%;
    height: 100%;
}


.banner{
    position: relative;
    width: 100%;
    height: 20%;
    /* border: 1px solid white; */
    text-align: center;
    background: rgb(230,230,230);
    background: linear-gradient(90deg, rgba(230,230,230,1) 34%, rgba(213,213,213,1) 57%, rgba(194,194,194,1) 76%);
}

.q{
    position: relative;
    width: 15%;
    height: 10%;
}

.ds{
    width: 100%;
    height: 100%;
    /* border: 1px solid firebrick */
}


.wq{
    /* border: 1px solid goldenrod; */
    position: relative;
    text-align: center;
}

.pa{
    border: 2px solid black;
    border-radius: 20px;
    width: 30%;
    height: 10%;
    text-align: center;
    background-color: blueviolet;
}
.aprend{
    text-decoration: none;
    color: inherit;
}

.aprend:hover{
    text-decoration: underline;
    color: green;
}
@media (max-width: 600px) {
    /* Ajustes adicionais para telas muito pequenas */
    .pai{
        display: block;
        /* border: 1px solid  pink; */
        padding: 0px;
        margin: 0px;
    
    }

    .sobre{
        position: relative;
        /* border: 1px solid red; */
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        text-align: justify;
        font-family: "Space Mono", serif;
        font-style: italic;
        font-size: 20px;
        /* background: rgb(230,230,230);
        background: linear-gradient(90deg, rgba(230,230,230,1) 34%, rgba(213,213,213,1) 57%, rgba(194,194,194,1) 76%); */
    }

    .menup{
        position: relative;
        /* border: 1px solid  green; */
        width: 100%;
        margin-bottom: 10px;
    }

    .banner{
        position: relative;
        width: 100%;
        height: 50%;
        text-align: center;
        background: rgb(230,230,230);
        background: linear-gradient(90deg, rgba(230,230,230,1) 34%, rgba(213,213,213,1) 57%, rgba(194,194,194,1) 76%);
    }

    .fn{
        font-family: "Space Mono", serif;
        font-style: italic;
        font-size: 15px;
    }
}