@import "reset.css";
@import "../components/variable.css";

body{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.title{
    grid-column: 1/3;
    grid-row: 1/4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    background-color: var(--title-color);
}
.title span{
    font-size: 7vw;
    font-weight: 600;
    color: white;
    padding-bottom: 10px;
}
.login-form{
    grid-column: 3/-1;
    grid-row: 1/4;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.login-form h3{
    font-size: 32px;
    font-weight: 600;
    color: var(--title-color);
    margin-bottom: 20px;
}
.login-form input{
    width: 20vw;
    height: 10px;
    border: 2px solid var(--title-color);
    font-size: 15px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.login-form a{
    background-color: white;
    color: white;
}
.button__create,
.button__login{
    width: 10vw;
    height: 30px;
    background-color: var(--title-color);
    border: 2px solid var(--title-color);
    color: white;
    font-size: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.design-one{
    grid-column: 1/3;
    grid-row: 4/-1;
    background-size: cover;
    top: -100px;
    background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fkids-collective.com%2Fwp-content%2Fuploads%2F2016%2F03%2FIMG_5043.jpg&f=1&nofb=1");
}
.design-two{
    grid-column: 3/4;
    grid-row: 4/-1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    padding-bottom: 10px;
    background-color: white;
    color: --title-color;
    border-top: 2px solid var(--title-color);
    border-right: 2px solid var(--title-color);
}
.design-two span{
    padding-bottom: 10px;
}
.design-three{
    grid-column: 4/-1;
    grid-row: 4/6;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    font-size: 32px;
    font-weight: 600;
    color: white;
    border-top: 2px solid var(--title-color);
}
.design-three div{
    font-size: 32px;
    font-weight: 600;
    padding: 10px;
    display: flex;
    align-items: center;
}
.design-three div i{
    margin-right: 10px;
}
.design-three div:nth-child(odd){
    background-color: white;
    color: var(--title-color);
}
.design-three div:nth-child(even){
    background-color: var(--title-color);
    color: white;
}