@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

@keyframes background {
    from {background-color: rgba(127, 255, 195, 0.699);}
    to {background-color: rgba(0, 255, 213, 0.699);}
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color:aquamarine;
    animation-name: background;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
}

header {
    display: flex;
    flex-direction: row;

    width: 100%;
}

header > * {
    flex-grow: 1;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.text {
    font-family: 'Pacifico';
    font-size: larger;
}

#mainPageHello {
    font-size: xx-large;
}

#inscriptionButtonMain {
    width: 300px;
    height: 75px;

    background-color: aqua;
    border-radius: 12px;
    border: 1px solid rgb(0, 195, 255);

    margin-top: 40px;
    margin-bottom: 10px;
}

#inscriptionButtonMain:hover {
    background-color:rgb(0, 195, 255);
    cursor: pointer;
}

#mainFrame {
    flex-direction: row;
    flex-wrap: wrap;
}

#mainFrame > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 500px;
    height: 250px;

    border-radius: 12px;
    border: 2px solid rgb(0, 195, 255);

    margin: 10px;
}

#mainFrame > div:hover {
    background-color:rgb(0, 195, 255);
    cursor: pointer;
}