@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: 'Roboto Mono', monospace;
    cursor: default;
}
:root{
    --mainColor: 24, 29, 92;
    --secondColor: 230, 236, 240;
}
input{
    cursor: pointer;
}
.vacTitle{
    cursor: help;
    font-size: 1.5em;
}
.wrapper{
    position: relative;
    overflow: hidden;
}
.display{
    display: flex;
    font-size: 2em;
    font-weight: bold;
}
main{
    display: flex;
    height: max-content;
    width: 100vw;
}
#goToMain{
    position: absolute;
    background: transparent;
    background-image: url(images/leftArrowBlue.png);
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    height: 50px;
    width: 50px;
    transition: all 0.2s linear;
}
#goToMain:hover{
    transform: scale(1.1);
    background-image: url(images/leftArrowBlueHover.png);
    cursor: pointer;
}
#page2{
    flex-direction: column;
    align-items: center;
    width: 100vw;
    min-height: 100vh;
    background:linear-gradient(180deg, rgba(100,203,234,1) 0%, rgb(147, 203, 233) 100%);
    color: white;
}


.info{
    display: flex;
    flex-direction: column;
    background-image: url('images/26302.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
.info-second{
    display: flex;
    background: rgba(var(--mainColor),0.70);
    border-radius: 8px;
    padding: 10px;
    gap: 10px;
    color: white;
    box-shadow: 0 0 10px 2px black;
}
.info-second h2 {
    align-self: center;
    padding: 10px;
    font-size: 1.3em;
}
#description{
    display: flex;
    flex-direction: column;
    max-width: 30vw;
    text-align: center;
    padding: 20px;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
#description-title{
    width: 25vw;
    max-width: 230px;
    text-align: center;
    text-shadow: 1px 1px 1px black;
    color: white;
    cursor: pointer;
}
#description p{
    max-width: 20vw;
}
.info-header{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 2.5vw;
    margin-bottom: 2.5vw;
    width: 90vw;
    height: 7vh;
    background: blue;
    background-color: rgb(var(--mainColor),0.6);
    color: white;
    text-shadow: 1px 1px 2px black;
    z-index: 1;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 0 10px 2px black;
}
#inputs{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}
#inputs h2{
    text-shadow: 1px 1px 1px black;
    padding-left: 0;
}
.info-dnascimento{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.info-dnascimento input{
    height: 30px;
    width: 180px;
    border-radius: 15px;
    text-align: center;
    font-size: 1em;
}
.auxiliarWrapper{
    display: flex;
    align-items: center;
    gap: 10px;
}
.auxiliarWrapper p {
    width: fit-content;
    white-space: nowrap;
}
#datePenta, #dateDtp, #dateVip, #dateVop, #dateHpv,#datePneumo, #dateHepatiteB, #dateDt, #dateTripliceviral, #dateTetraviral, #dateVaricela,#dateFebreAmarela,#dateRota,#dateMeningo
{
    height: 20px;
    width: 150px;
    border-radius: 10px;
    text-align: center;

}
#datePenta:hover, #dateDtp:hover, #dateVip:hover, #dateVop:hover, #dateHpv:hover, #datePneumo:hover, #dateHepatiteB:hover, #dateDt:hover, #dateTripliceviral:hover, #dateTetraviral:hover, #dateVaricela:hover, #dateFebreAmarela:hover, #dateRota:hover, #dateMeningo:hover
{
    transform: none;
}
#pentaButton, #dtpButton, #vipButton, #vopButton, #hpvButton, #pneumoButton, #HepatiteBButton, #dtButton, #tripliceviralButton, #tetraviralButton , #varicelaButton,#febreAmarelaButton, #rotaButton, #meningoButton
{
        height: 20px;
        width: 100px;
        border-radius: 15px;
        box-shadow: inset 0 0 5px black;
        color: grey;
        transition: all 0.5s ease;
        border: none;
        background:rgba(var(--secondColor),0.60);
}
#pentaButton:hover, #dtpButton:hover, #vipButton:hover, #vopButton:hover, #hpvButton:hover, #pneumoButton:hover, #HepatiteBButton:hover, #dtButton:hover, #tripliceviralButton:hover, #tetraviralButton:hover , #varicelaButton:hover, #febreAmarelaButton:hover, #rotaButton:hover, #meningoButton:hover
{
        background-color: rgba(var(--secondColor),0.2);
        cursor: pointer;
        color: rgb(170, 170, 170);
}
input[type="date"]{
    background: rgba(var(--secondColor),0.60);
    color: grey;
    box-shadow: inset 0 0 5px black;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.5s ease;
    border: none;
}
input[type="date"]:hover{
    background-color: rgba(var(--secondColor),0.2);
    color: rgb(170, 170, 170);
    transform: scale(1.2);
}
input[type="date"]:focus{
    outline: none;
    background-color: rgba(var(--secondColor),0.4);
    color: rgb(170, 170, 170);
    transform: scale(1.1);
}
::-webkit-calendar-picker-indicator{
    position: relative;
    right: 6px;
}
.info-sexo{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.infoSexoItem{
    display: flex;
    gap: 10px;
}
input[type="radio"]{
    appearance: none;
    background-color: rgba(var(--secondColor),0.60);
    margin: 0;
    box-shadow: inset 0 0 3px black;
    width: 20px;
    height: 20px;
    outline: none;
    border: none;
    border-radius: 50%;
    transition: all 0.5s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
input[type="radio"]::before{
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgb(var(--mainColor),0.3);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
input[type="radio"]:checked::before{
    opacity: 1;
}
input[type="radio"]:focus{
    transform: scale(1.1);
}
input[type="radio"]:hover{
    transform: scale(1.2);
}
.info-submit button {
    height: 30px;
    width: 180px;
    border-radius: 15px;
    font-size: 1em;
    font-weight: 500;
    box-shadow: inset 0 0 5px black;
    color: grey;
    transition: all 0.5s ease;
    border: none;
    background:rgba(var(--secondColor),0.60);
}
.info-submit button:hover{
    background-color: rgba(var(--secondColor),0.2);
    cursor: pointer;
    color: rgb(170, 170, 170);
    transform: scale(1.2);
}
.vaclist{
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    width: 90vw;
    gap: 10px;
    border: 1px solid black;
    border-radius: 15px;
    margin-bottom: 2vw;
    padding: 10px;
    background-color: rgb(var(--mainColor),0.6);
    box-shadow: 0 0 10px 2px black;
}
.vacItem{
    align-self: flex-start;
    align-items: center;
    display: flex;
    gap: 20px;
    font-size: 1.3em;
    padding: 10px;
}
.vacItem span{
    display: flex;
    gap: 5px;
    align-items: center;
    border: 1px solid black;
    box-shadow: inset 0 0 10px 2px black;
    border-radius: 50px;
    padding: 3px 15px;
    background: rgb(var(--secondColor),0.4);
    white-space: nowrap;
}
.tonextpage {
    position: fixed;
    bottom: 0;
    right: 0;
}
.topreviouspage {
    position: fixed;
    bottom: 0;
    left: 0;
}
.btnDiv{
    align-self: center;
    margin: 1vw;
}
.subbtn{
    width: 30vw;
    max-width: 450px;
    height: 75px;
    border: none;
    border-radius:15vw;
    font-weight: 500;
    font-size: 3em;
    cursor: pointer;
    text-shadow: 1px 1px black;
    background:rgba(var(--secondColor),0.60);
    box-shadow: inset 0 0 5px black;
    color: grey;
    transition: all 0.5s ease;

}
.subbtn:hover{
    background-color: rgba(var(--secondColor),0.2);
    cursor: pointer;
    color: rgb(170, 170, 170);
    transform: scale(1.2);
}

@media(max-width:1600px){
    .vacTitle{
        font-size: 1.2em;
    }
    .vacItem{
        font-size: 1em;
        gap: 15px;
    }
    .auxiliarWrapper p {
        font-size: 0.8em;
        
    }
}
@media(max-width:1300px){
    .display{
        font-size: 1.5em;
    }
    .vacTitle{
        font-size: 1em;
    }
    .vacItem{
        gap: 10px;
    }
    .vacItem span {
        font-size: 0.8em;
        padding: 3px 10px;
    }
    #datePenta, #dateDtp, #dateVip, #dateVop, #dateHpv,#datePneumo
    {
        font-size: 0.7em;
        width: 100px;
        
    }
    #pentaButton, #dtpButton, #vipButton, #vopButton, #hpvButton, #pneumoButton{
        width: 60px;
        font-size: 0.7em;
    }
    input[type="radio"]{
        width: 20px;
        height: 20px;
    }
    input[type="radio"]::before{
        width: 14px;
        height: 14px;
    }
    .auxiliarWrapper p {
        font-size: 0.8em;
        width: min-content;
    }
}
@media(max-width:768px){
    .display{
        font-size: 1.3em;
    }
    .vacItem{
        gap: 5px;
    }
    .vacTitle{
        font-size: 1em;
    }
    #datePenta, #dateDtp, #dateVip, #dateVop, #dateHpv,#datePneumo
    {
        font-size: 0.5em;
        width: 80px;
        height: 15px;
    }
    #pentaButton, #dtpButton, #vipButton, #vopButton, #hpvButton, #pneumoButton{
        width: 60px;
        height: 15px;
        font-size: 0.6em;
    }
    input[type="radio"]{
        width: 20px;
        height: 20px;
    }
    input[type="radio"]::before{
        width: 14px;
        height: 14px;
    }
    .vacItem span{
        font-size: 0.6em;
        gap: 5px;
        padding: 2px 5px;
    }
    .auxiliarWrapper{
        gap: 5px;
    }
    .auxiliarWrapper p {
        font-size: 0.6em;
    }
    .subbtn{
        width: 200px;
        height: 50px;        
        font-size: 2em;
    }
}
@media(max-width:425px){
    .info-header{
        height: 30px;
        padding: 10px;
    }
    .info-second{
        flex-direction: column;
    }
    .infoContent h1 {
        font-size: 1.5em;
    }
    #description{
        align-self: center;
        max-width: 100vw;
        width: 200px;
        padding: 0;
    }
    #description p{
        max-width: 100vw;
        width: 200px;
    }
    #description h1 {
        width: 200px;
    }
    #inputs{
        align-items: center;
    }
    .info-sexo p {
        align-self: center;
    }
    .display{
        font-size: 0.8em;
    }
    .vacItem{
        flex-direction: column;
        align-self: center;
    }
    .vacTitle{
        font-size: 1.3em;
    }
    #datePenta, #dateDtp, #dateVip, #dateVop, #dateHpv,#datePneumo
    {
        font-size: 1em;
        width: 150px;
        height: 30px;
        border-radius: 15px;
    }
    #pentaButton, #dtpButton, #vipButton, #vopButton, #hpvButton, #pneumoButton{
        width: 150px;
        height: 30px;
        font-size: 1em;
    }
    input[type="radio"]{
        width: 20px;
        height: 20px;
    }
    input[type="radio"]::before{
        width: 12px;
        height: 12px;
    }
    .vacItem span{
        font-size: 1em;
        gap: 10px;
        padding: 3px 10px;
        width: 150px;
        height: 30px;
        margin: 5px;
    }
    .auxiliarWrapper{
        gap: 10px;
        display: flex;
        flex-direction: column;
    }
    .auxiliarWrapper p {
        font-size: 1em;
    }
    .subbtn{
        width: 200px;
        height: 50px;        
        font-size: 2em;
    }
}
@media (max-width:330px){
    .display{
        font-size: 0.7em;
    }
    .info-header{
        height: 20px;
        padding: 10px;
    }
}