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

/* Gerais */

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

a {
    text-decoration: none;
}

* {
    font-family: 'Dosis', sans-serif;
}

h1 {
    font-family: 'Dosis', sans-serif;
    font-weight: bold;
    font-size: calc(24px + 3vw);
    width: 50%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

select::-ms-expand {
    display: none;
}

select {
    color: #F2D02B;
    font-size: 1.25em;
}

select {
    outline: none;
}

/* Especificas */

.erro {
    display: flex;
    flex-flow: column;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

#erroMsg {
    color: #F2D02B;
    font-size: calc(15px + 0.390625vw);
    width: 80%;
    text-align: center;
}

#download {
    margin-top: 2%;
    display: flex;
    flex-flow: column;
}

#download span {
    margin-top: 0;
}

#download a {
    color: #F2D02B;
    font-weight: 800;
    font-size: calc(12px + 0.390625vw);
    margin-top: 0;

}

/* Index.php */

header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.homepage {
    width: 100vw;
    text-align: center;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh;
    display: flex;
    flex-flow: column;
}

.homepage h1 {
    font-size: calc(24px + 3vw);
    width: 45%;
    margin-bottom: 7.5%;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: white;
    width: 100vw;
}

footer div {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;

}

footer img {
    margin-right: 1%;
    margin-left: 1%;
}

/* LoginAluno.php */

.login,
.sign,
.logged {
    width: 100vw;
    overflow-x: hidden;
    height: 100vh;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.login header,
.sign header,
.logged {
    text-align: center;
    margin-bottom: 5%;
}

#back {
    font-size: 50px;
    color: #F2D02B;
    position: absolute;
    left: 2%;
    top: 0;
}

#logout {
    font-size: 50px;
    color: #F2D02B;
    position: absolute;
    left: 2%;
    top: 0;
}

.login form,
.sign form {
    display: flex;
    flex-flow: column;
}

.login label,
.sign label {
    font-family: 'Dosis', sans-serif;
    font-weight: bold;
    color: #F2D02B;
    font-size: 200%;
    display: inline-block;
    margin-bottom: 1%;
}

.login div,
.sign div {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
}

.sign label,
.login label {
    align-items: flex-start;
}

.login input,
.sign input {
    border: none;
    background: transparent;
    margin-bottom: 5%;
}

.login input[type=text],
.login input[type=password],
.sign input[type=text],
.sign input[type=password],
.sign input[type=email] {
    border-bottom-style: solid;
    border-color: #F2D02B;
    font-family: 'Outfit', sans-serif;
    font-size: 150%;
    color: #F2D02B;
}

.login input:focus,
.sign input:focus {
    outline: none;
}

.login input[type=submit] {
    background: url("../assets/IniciarYell.svg") no-repeat;
    background-size: 100% auto;
    width: 100%;
    padding: 10% 10% 10% 10%;
    height: 100px;
}

.sign input[type=submit] {
    background: url("../assets/CriarYell.svg") no-repeat;
    background-size: 100% auto;
    width: 100%;
    padding: 10% 10% 10% 10%;
    height: 100px;
}

/* Dashboard Aluno */

.logged header {
    margin-bottom: 5%;
}


.logged main {
    display: flex;
    width: 100vw;
    justify-content: center;
    align-self: center;
}

.logged main>div {
    display: flex;
    flex-flow: column;
    width: 20%;
}

.logged a>img {
    width: auto;
}

/* colecaoAluno.php */

.collection header {
    width: 100vw;
}

.collection,
.collection main {
    width: 100vw;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.collection .holder {
    display: flex;
    flex-flow: row;
    width: 50%;
}

.collection .stamp {
    width: 50%;
}

/* atividadesAlunos.php */

#edit{
    display: flex;
    flex-flow: row;
    width: 100%;
    align-items: center;
}

#edit a img{
    margin-left: 50%;
}

#filterContainer {
    width: 70%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.state h2 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.state h2 a {
    width: 100%;
    display: flex;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    color: #F2D02B;
}

.filters {
    display: flex;
    flex-flow: row;
    align-content: center;
    width: 45%;
}

.filters option{
    color: black;
}


.act,
.actEq {
    display: flex;
    flex-flow: column;
    width: 100vw;
    font-family: 'Outfit', sans-serif;
    color: #F2D02B;
}

.act h2,
.actEq h2 {
    color: #F2D02B;
    font-weight: 600;
    font-size: 200%;
}

.act span:first-of-type,
.actEq span:first-of-type {
    font-size: calc(15px + 0.390625vw);
}

.act main,
.actEq main {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.act main>div,
.actEq main>div {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.act span:nth-of-type(2),
.actEq span:nth-of-type(2) {
    margin-top: 5%;
}

.act span {
    display: block;
}

.table {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    width: 70%;
}

.table>div {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    width: 50%;
}

.table>.stamp {
    display: inline-block;
    width: 50%;
    text-align: center;
}

.table>.stamp img {
    width: 40%;
}

/* Sobre nós */

.abt {
    color: #F2D02B;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.abt header {
    width: 100vw;
    margin-top: 5%;
    margin-bottom: 5%;
}

.abt main {
    display: flex;
    flex-flow: column;
    width: 100vw;
    align-items: center;
}

.abt span {
    width: 75%;
    font-size: calc(15px + 0.390625vw);
}

.abt footer {
    display: flex;
    flex-flow: row;
    align-items: center;
    width: 100vw;
}

.abt footer div {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
}

/* presença */

.pres {
    overflow-x: hidden;
    font-family: 'Outfit', sans-serif;
    color: hsl(50, 88%, 56%);
    overflow-x: hidden;
    width: 100vw;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-size: calc(15px + 0.390625vw);
}

.presT{
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.presT span{
    width: calc(100%/4);
}

.pres h2 {
    color: #F2D02B;
    font-weight: 600;
    font-size: calc(24px + 0.390625vw);
}

.pres span {
    margin-top: 1%;
}

.pres form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pres input {
    background-color: #F2D02B;
    margin-top: 5%;
    border-style: none;
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    font-size: calc(15px + 0.390625vw);
    text-align: center;
    color: #E93D3D;
    padding-left: 50vw;
    padding-right: 50vw;
    padding-top: 2%;
    padding-bottom: 2%;
}

.pres input[type="checkbox"] {
    background-color: #F2D02B;
    border-style: solid;
    font-weight: 600;
    font-size: calc(15px + 0.390625vw);
    position: static;
    margin-top: 0;
}

.pres footer a {
    font-family: 'Dosis', sans-serif;
    font-size: 150%;
    color: #F2D02B;
}

/* dashboardEquipa.php */

.equipa,
.actEq {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.equipa header,
.equipaRedhead {
    width: calc(100vw - 2%);
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
}

.equipa span,
.equipa a,
.equipaRedhead a,
.equipaRedhead span {
    color: #F2D02B;
    font-size: calc(15px + 0.390625vw);
}

#gest {
    display: flex;
    flex-flow: column;
    align-items: center;
}

#gest h1 {
    width: 100%;
    text-align: center;
}

#gest>div {
    width: 90%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

#gest div>a {
    width: 75%;
    height: auto;
}

/* Yellow bg */

.yellowbg {
    background-color: #F2D02B;
}

.equipaYellowhead {
    font-family: 'Dosis', sans-serif;
    color: #E93D3D;

}

.equipaYellowhead>span {
    display: inline-block;
    font-size: 3vw;
    width: 10vw;
    position: relative;
    bottom: 2vh;
}

.equipaYellowhead>a {
    left: 60vw;
}

.equipaYellowhead>a:nth-of-type(1) {
    display: inline-block;
    width: 5vw;
    position: relative;
    bottom: 2vh;
}

.equipaYellowhead>a:nth-of-type(2) {
    display: inline-block;
    width: 10vw;
    position: relative;
    bottom: 2vh;
    color: #E93D3D;
    font-size: 2vw;
}

.redbg {
    background-color: #E93D3D;
}

.redbg h1 {
    color: #F2D02B;
}

/* Adicionar Atividade */

.formInput {
    margin-bottom: 1%;
}

#addActMain {
    display: flex;
    flex-flow: column;
    width: 100%;
    align-items: center;
}

#addAct {
    font-family: 'Dosis', sans-serif;
    color: #F2D02B;
    display: flex;
    flex-flow: column;
    width: 80%;
    align-items: center;
}

#addAct h1 {
    width: 100%;
    text-align: center;
}

#addAct form {
    display: flex;
    flex-flow: column;
    width: 100%;

}

#addAct input[type=date],
#addAct input[type=file],
#addAct input[type=submit] {
    background-color: transparent;
    border-style: none;
    font-family: 'Dosis', sans-serif;
    font-size: calc(15px + 0.390625vw);
    text-align: center;
    color: #F2D02B;
}

#addAct select,
.actEq select {
    background-color: transparent;
    border-style: none;
    font-family: 'Dosis', sans-serif;
    font-size: calc(15px + 0.390625vw);
    text-align: center;
}

#addAct input[type=submit] {
    background-color: #F2D02B;
    color: #E93D3D;
    font-weight: 600;
    padding: 2%;
}

#addAct select:nth-of-type(1) {
    display: inline-block;
}

.formInput {
    margin-bottom: 2%;
}

.formInput:nth-of-type(6),
.formInput:nth-of-type(7),
.formInput:nth-of-type(8),
.formInput:nth-of-type(9) {
    display: inline-block;
}

.formInput:nth-of-type(10),
.formInput:nth-of-type(11),
.formInput:nth-of-type(12) {
    display: block;
}

#addAct input[type=text] {
    margin-top: 1%;
    border: none;
    background-color: transparent;
    border-bottom-style: solid;
    border-color: #F2D02B;
    font-family: 'Dosis', sans-serif;
    color: #F2D02B;
    font-size: calc(15px + 0.390625vw);
    width: 100%;
}

#addAct input:focus {
    outline: none;
}

#addAct label {
    font-size: calc(20px + 0.390625vw);
}

#addAct h1 {
    color: #F2D02B;
}

.addMore {
    background-color: #F2D02B;
    width: 300px;
    text-transform: uppercase;
    text-align: center;
    padding: 1%;
    margin-bottom: 2%;
    color: #E93D3D;
}

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

    .logged main>div {
        width: 60%;
    }

    .logged header img {
        width: 55%;
    }

    .sign img,
    .login img {
        width: 60%;
    }

    .sign form,
    .login form {
        width: 60%;
    }

    .sign label,
    .login label {
        font-size: 150%;
    }

    .equipa header img {
        width: 20%;
    }

    #gest div>a {
        width: 90%;
    }
}



@media only screen and (max-width: 640px) and (min-width: 480px) {

    .sign img,
    .login img {
        width: 50%;
    }

    .logged main>div {
        width: 50%;
    }

    .logged header img {
        width: 45%;
    }
}

@media only screen and (max-width: 1290px) and (min-width: 640px) {

    .sign img,
    .login img {
        width: 20%;
    }

    .sign header,
    .login header {
        margin-bottom: 10%;
    }

    .logged main>div {
        width: 35%;
    }

    .logged header img {
        width: 30%;
    }
}

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

    #addSelo {
        width: 50%;
    }

    .homepage main {
        display: flex;
        flex-direction: column;
        width: 100vw;
        justify-content: center;
    }

    .homepage main>div {
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .homepage main>div>div {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .homepage main>div>div img,
    .homepage main>div>div a {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin-bottom: 1%;
    }

    .homepage main>div>div a>img {
        width: auto;
    }

    footer div img:first-of-type {
        width: 10%;
    }

    footer div img:nth-of-type(2) {
        width: 10%;
    }

    footer div img:nth-of-type(3) {
        width: 10%;
    }

    footer div img:nth-of-type(4) {
        width: 10%;
    }

    footer div img:nth-of-type(5) {
        width: 20%;
    }

    footer div img:nth-of-type(6) {
        width: 15%;
    }
}

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

    .equipa header img {
        width: 20%;
    }

    #gest div>a {
        width: 90%;
    }
}

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

    .homepage header h1 {
        width: 75%;
    }

    .homepage main>div {
        flex-direction: column;
    }

    .homepage main>div>div {
        margin-top: 5%;
        margin-bottom: 10%;
    }

    footer div img:first-of-type {
        width: 10%;
    }

    footer div img:nth-of-type(2) {
        width: 10%;
    }

    footer div img:nth-of-type(3) {
        width: 10%;
    }

    footer div img:nth-of-type(4) {
        width: 10%;
    }

    footer div img:nth-of-type(5) {
        width: 20%;
    }

    footer div img:nth-of-type(6) {
        width: 15%;
    }


    #filterContainer{
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    .state{
        display: flex;
        flex-flow: row;
        width: 100%;
        font-size: 10px;
        justify-content: space-between;
    }

    .filters{
        display: flex;
        flex-flow: row;
        width: 100%;
        justify-content: space-between;
    }

    .filters select{
        padding: 0 !important;
        margin: 0 !important;
        text-align: left;
    }

    .act header>img {
        width: 80%;
    }

    .collection header>img {
        width: 60%;
    }

    .abt header>img {
        width: 60%;
    }

    .table {
        flex-flow: column;
        width: 90%;
    }

    .table>div {
        width: 75%;
    }

    .table>.stamp {
        margin-top: 2%;
        width: 75%;
    }

    .table>.stamp img {
        width: 100%;
    }

    .equipa header,
    .equipaRedhead {
        margin-top: 10%;
        flex-flow: column;
        align-items: center;
    }

    .equipa header div,
    .equipaRedhead {
        margin-top: 5%;
        text-align: center;
        margin-bottom: 5%;
    }

    .equipa header img,
    .equipaRedhead img {
        width: 50%;
    }

    #gest div>a {
        width: 100%;
    }


}