* {
    margin: 0;
}
img {
    width: 100%;
    height: 100%;
}
/* default */
.male { 
    background-color: #BDE9FF; /* #BDE9FF - male, #FFE0E0 - female */
}
.female {
    background-color: #FFE0E0;
}

/* default for all */
.text-box {
    padding-left: 10px;

    border: 0px;
    border-radius: 25px;
    font-size: 2em;
    text-shadow: 4px 4px 4px grey;
}
.text-box button {
    margin: 10px;
    font-size: 1.8em;
    background-color: rgba(125, 125, 125, 0.1);
    border-radius: 20%;
}

/* default for all */


/* Header */
header {
    display: flex;
    width: 100vw;
    height: auto;

    padding: 5px 0px 5px 0px;
    gap: 15px;
    background-color: #FFFEEF;
}
header .rounded-img {
    width: 20vw;
    height: 20vw;
    max-width: 150px;
    max-height: 150px;

    align-self: center;
    margin-left: 15px;
    border: 0px;
    border-radius: 100%;
}
header .text-box {
    display: flex;
    gap: 20px;
    align-self: center;
    font-size: 2em;
    text-shadow: 4px 4px 4px grey;
}
header .text-box h1 {
    margin-left: 15px;
    text-shadow: 4px 4px 4px #FFE0E0;
}
header .text-box p { /* - "find your puppy" */
    justify-self: center;
    text-shadow: 4px 4px 4px #BDE9FF;
}
header .ref-box {
    align-self: center;
    margin-left: auto;
    margin-right: 30px;
}

/* Main - Preferences */ 
main {
    display: flex;

    flex-direction: column;
}
main .preferences-box {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: auto;
    max-height: 30vh;
    padding: 15px 0px 15px 0px;

    flex-direction: row;
    gap: 10px;
    font-size: 2em;
    align-self: flex-start;
    background-color: #FFFEEF;
    border: 2px #FFE0E0 solid;
    overflow-x: auto;
    overflow-y: hidden;
}
main .preferences-box .container {
    display: flex;
    min-width: 25vw;
    width: auto;
    height: 20vh;

    font-size: 1em;
    gap: 2px;
    padding: 10px;
    flex-direction: column;
    background-color: #cbcbcb;
    border: 0px #FFE0E0 solid;
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: auto;
}
main .preferences-box .container * {
    min-width: 20vw;
    border-radius: 10px;
}
main .preferences-box .container ul {
    display: flex;

    flex-direction: column;
    gap: 3px;
}
main .preferences-box .container input {
    font-size: 1em;
}
main .preferences-box .container li:hover {
    cursor: pointer;
}

/* Main - Cards */ 
main {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.cards-box {
    display: flex;
    width: 100vw;
    height: 70vh;
    padding: 50px;

    justify-content: center;
    padding: 20px 0px 20px 0px;
    gap: 20px;
    align-self: flex-start;
    margin: 0;
    flex-wrap: wrap;
    background-color: #FFFEEF;
    border: 2px #FFE0E0 solid;
    overflow-y: auto; /* добавить скролл */
}
.cards-box .card {
    display: flex;
    width: 45%;
    height: 50%;

    border: 0px;
    border-radius: 25px;
}
/*image*/
.card .image-box {
    width: 50%;
    height: 100%;

    border: 0px;
    border-radius: 25px;
}
.card .image-box img {
    border-radius: 25px;
}/*text*/
.card .text-box {
    background-color: rgba(125, 125, 125, 0.1);
    width: 50%;
    height: 100%;
    padding-left: 10px;

    font-size: 1.2em;
    border: 0px;
    border-radius: 25px;
}

.card .text-box button {
    margin: 10px 0px 10px 0px;
    background-color: rgba(125, 125, 125, 0.1);
    border-radius: 20%;
}

/* Window */ 
.window-box {
    position: fixed;
    width: 80vw;
    height: 45vw;

    border: 0px;
    border-radius: 5%;
    padding: 2%;
    left: 5vw;
    top: 8vh;
    pointer-events: none;
}
.window-box .close-button {
    position: absolute;
    aspect-ratio: 1 / 1;
    width: 6%;
    height: auto;
    
    border-radius: 10px;
    right: 5%;
    top: 5%;
    background-color: red;
    z-index: 2;
    pointer-events: auto;
}
.close-button :hover {
    cursor: pointer;
}
.window-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;

    margin: 0;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.5);
}

.puppy_window { /* Puppy Window */
    display: flex;
    width: 100%;
    height: 100%;

    border-radius: 5%;
    pointer-events: auto;
}
.puppy_window * {
    border: 0px;
    border-radius: 5%;
}
.puppy_window .image-box {
    width: 50%;
    height: 100%;

    border: 0px;
    border-radius: 5%;
    pointer-events: none;
}
.puppy_window .text-box {
    background-color: rgba(125, 125, 125, 0.1);
    width: 50%;
    height: 100%;
    padding-left: 10px;
    font-size: 2em;
}
.puppy_window .text-box p {
    text-shadow: none;
}
.puppy_window .text-box span {
    text-shadow: none;
    color: rgba(255, 0, 0, 0.5);
}

.add-puppy-window { /* Add Puppy Window */
    display: flex;
    width: 100%;
    height: 100%;

    background-color: #FFFEEF;
    border-radius: 5%;
    pointer-events: auto;
    overflow-y: auto;
}
.add-puppy-window * {
    border: 0px;
    border-radius: 5%;
}
.add-puppy-window .text-box input {
    font-size: 0.9em;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px #BDE9FF solid;
    border-radius: 25px;
}

.calculator-window { /* calculator window */
    display: flex;
    flex-direction: column;
    width: 98%;
    height: 100%;

    gap: 2%;
    padding: 2%;
    background-color: #FFFEEF;
    border: 2px #FFE0E0 solid;
    border-radius: 5%;

    pointer-events: auto;
}
.calculator-window input {
    padding-left: 2%;
    padding-right: 2%;
    width: 100%;
    border-radius: 15px;
    font-size: 32px;
}
.calculator-row {
    display: flex;
    width: 100%;
    height: 100%;

    gap: 2%;
}
.calculator-row button {
    font-size: 2em;
    width: 20%;
    height: 100%;
    background-color: rgba(125, 125, 125, 0.2);
    border: #BDE9FF 2px solid;
    border-radius: 25%;
}
button:hover {
    cursor: pointer;
}
.calculator-button { /* show calc window */
    position: fixed;
    width: 100px;
    height: 100px;

    right: 25px;
    bottom: 25px;
    background-color: #FFFEEF;
    border-radius: 25%;
}
.add-puppy-button { /* show calc window */
    position: fixed;
    width: 100px;
    height: 100px;

    right: 145px;
    bottom: 25px;
    background-color: #FFFEEF;
    border-radius: 25%;
}


/* footer {
    display: flex;
    width: 100vw;
    height: auto;
    padding: 15px 0px 15px 0px;
    margin-top: 40px;

    border-top: #FFE0E0 2px solid;
    gap: 15px;
    background-color: #FFFEEF;
} */

/* FOOTER */
footer{
    margin-top: 40px;
    border: #ffbeee 2px solid;
    border-radius: 10px;
    background-color: #FFFEEF;
    padding: 8px;
}
footer * {
    margin: 5px 0 5px 0;
}
.box4{
    height: 50px;
    width: 50px;
    object-fit: cover;
    border-radius: 100px;
    position: relative;
    left: 20px;
    
}
.box2{
    font-size: 25px;
    position: relative;
    left: 75px;
    top: 5px;
    text-shadow: 3px 3px 3px rgb(255, 194, 204);
}
.box3{
    text-shadow: 3px 3px 3px rgb(201, 251, 255);
    font-size: 15px;
    position: relative;
    left: 80px;
    
}
.myButton:hover{
    color: bisque;
}
.container10{
    font-size: 32px;
}
.box1{
    display: flex;
    gap: 30px;
    border-bottom: #ffbeee 2px solid;
}
.box5{
    display: flex;
}
.box6{
    position: relative;
    right: 45px;
}
.box7{
    border-color: #ffbeee;
    
}


@media (max-width: 1100px ) {
    header .text-box{
        font-size: 1.8em;
    }
    main .preferences-box .container {
        font-size: 0.9em;
    }
    .card .text-box {
        font-size: 1.2em;
    }
    .card .text-box h2 {
        font-size: 1.8em;
    }
    .card .text-box p {
        font-size: 1.6em;
    }
    .puppy_window .text-box {
        font-size: 1.8em;
    }
    .puppy_window .text-box span {
        font-size: 0.8em;
        color: rgba(255, 0, 0, 0.5);
        text-shadow: none;
    }
}
@media (max-aspect-ratio: 1/1) {
    header .rounded-img {
        width: 20vw;
        height: 20vw;
    }
    main .preferences-box {
        width: 100vw;
    }
    main .preferences-box .container {
        min-width: 25vw;
        width: auto;
        height: auto;
    }
    main .cards-box {
        width: 100vw;
        height: 40vh;

        align-self: flex-start;
    }
    .window-box {
        left: 5vw;
        width: 90vw;
        height: 45vw;
    }
}
@media (max-width: 800px) {
    header {
        gap: 2px;
    }
    header .text-box{
        font-size: 1em;
    }
    header .rounded-img {
        width: 20vw;
        height: 20vw;
    }
    main .preferences-box {
        width: 100vw;
        max-height: 20vh;
    }
    main .preferences-box .container {
        min-width: 25vw;
        width: auto;
        height: auto;
    
        font-size: 0.5em;
    }
    main .preferences-box .container input {
        font-size: 1em;
    }
    main .cards-box {
        width: 100vw;
        height: 30vh;

        align-self: flex-start;
    }
    .card .text-box {
        font-size: 0.7em;
    }
    .card .text-box p {
        font-size: 0.9em;
    }
    .window-box {
        left: 5vw;
        width: 90vw;
        height: 45vw;
    }
    .puppy_window .text-box {
        font-size: 1em;
    }
    footer {
        font-size: 0.6em;
    }
}